스프링(서버) 1. mapper - namespace를 지정하여 다른 mapper와 구분지어준다. insert into books(title,price,author,image) values (#{title},#{price},#{author},#{image}) 2. BookVO 생성하기 - DB의 테이블 컬럼명과 동일하게 주는 것이 좋다 - getter, setter 메소드 생성해서 외부 파일에서 사용할 수 있도록 해줌 private int code; private String title; private int price; private String author; private String image; private int viewcnt; private String content; 3. BookDAO 생성..

에디터 생성하기1. 라이브러리 설치 - 터미널npm install @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic 2. 에디터 컴포넌트 & 빌드 importimport { CKEditor } from '@ckeditor/ckeditor5-react'; import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; 3. CKEditor 컴포넌트 렌더링 - return문 안에 작성{ onChangeContent(editor.getData()); }} />속성(고정)역할설명config에디터 설정 정의ckfinder는 업로드된 이미지 및 파일을 관리하기 위한 설정 uploadUrl은 파일 업로드 주소ed..

1. 구글 차트 라이브러리 설치 - yarn 또는 npm 사용 npm install react-google-charts yarn add react-google-charts * 구글 차트 사용법 - 홈페이지 참고 Examples | React Google Charts List of react-google-charts usage examples. www.react-google-charts.com 2. chart 컴포넌트를 import 한다 import { Chart } from "react-google-charts"; 3. 데이터 가져오는 getData 함수 작성, 상태변수 data를 생성해 결과를 담아준다 const [data,setData] = useState([]); const getData = asy..

📌 Context API 사용법 - 리액트 애플리케이션에서 전역적으로 데이터를 공유하고 관리하는 방법을 제공한다. (간편한 전역 상태 관리 가능) - 상위 -> 하위 컴포넌트로 데이터 전달 시 속성(props)을 전달하지 않고도 컴포넌트 간 데이터를 공유할 수 있도록 해줌 1. UserContext.js 파일 생성 - createContext함수 import : 새로운 컨텍스트 생성할 때 사용하는 함수 - UserContext라는 context 생성, 초기값 null로 주고 다른 컴포넌트에서 사용할 수 있도록 export import { createContext } from "react"; export const UserContext = createContext(null) 2. App.js (부모) - ..

📌 react-router-dom 라이브러리 React에서 라우팅(Routing) 기능을 제공하는 라이브러리로 웹 어플리케이션에서 페이지 전환을 관리하는 기능이다. - 컴포넌트를 사용해 URL경로에 따라 페이지를 렌더링 할 수 있다. - Link 컴포넌트를 이용해 경로를 지정하고 Route컴포넌트로 URL경로에 따라 렌더링 할 컴포넌트를 정의한다. 설치 (VScode - 리액트프로젝트) yarn add react-router-dom@5.3.0 - package.json에서 설치 확인, @는 버전이다. - Link와 Route컴포넌트는 react-router-dom에서 import 해서 사용한다 예제코드 import { Link } from 'react-router-dom'; const App = () =..

jsonplaceholder에서 데이터를 가져올 때는 fetch메서드를 사용했지만 오늘은 axios라이브러리를 사용해서 코드를 작성해 보았다. Axios 리액트 애플리케이션에서 HTTP요청 및 응답을 처리해 주는 기능 제공해 주는 라이브러리이다. 1) 터미널에서 axios라이브러리 설치 후 package.json에서 확인 **npm은 install이지만 yarn은 add로 설치한다. yarn add axios 2) import axios from 'axios'로 가져와서 사용한다. 3) async는 JavaScript에서 비동기 함수를 정의할 때 사용하는 키워드로 await 키워드와 같이 사용한다 4) await은 비동기 함수의 결과가 도착할 때까지 기다리도록 해준다. (async로 정의된 함수 안에서만..

1. DOM(document object model) 문서객체모델 - 웹페이지(HTML, XML)의 콘텐츠 및 구조, 스타일 요소를 구조화시켜 프로그래밍 언어가 해당 문서에 접근하고 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스(의사소통 매개체)이다. - 웹페이지(HTML문서)를 계층적 구조와 정보로 표현하며 이를 제어할 수 있는 property와 method를 제공하는 트리 자료구조 -> 최상위 노드(root)에서 시작해 자식 노드를 가진다 ▶ Document node(root) - 최상위 루트노드로 window객체의 document 프로퍼티로 바인딩되어있다. 문서에 하나만 존재한다. ▶ Element node - html, head, body, meta, title, div, h2 .....

JSX(JavaScript XML) - react 컴포넌트를 정의하는 데 사용되는 js 파일로 XML형식의 값을 반환해준다. - 자바스크립트 변수를 HTML 요소에 바인딩할 수 있고, 조건부 렌더링이나 반복문을 사용할 수 있다. - jsx파일을 통해 컴포넌트를 생성할 수 있다. 이를 통해 효율을 높이고 코드를 간결하게 관리할 수 있다. **컴포넌트는 일종의 UI조각이다. public 폴더 index.html - 브라우저가 가장 먼저 실행하는 파일 src 폴더 index.js - react 렌더링 정의 하는 코드 작성 -> index.html파일에 로딩됨 (id= root는 dom의 최상위 노드이다.) app.js - index.js에서 기본으로 렌더링 하는 파일 , 태그 안에 작성해준다. ** index..

React - JavaScript 라이브러리로, 사용자 인터페이스(UI) 개발에 주로 사용된다. - Facebook에서 개발하였으며, 최근에는 웹, 모바일, 데스크톱 애플리케이션 등을 개발하는데 널리 사용된다. - 컴포넌트 기반으로 작성되며, 컴포넌트는 데이터를 입력받아 UI를 렌더링 할 수 있다. - 데이터의 변화에 따라 자동으로 UI를 갱신하는 기능을 제공한다. React의 강점으로는 코드의 재사용성, 성능, 개발 효율성 등이 있다. 1. 리액트 패키지 관리 도구 yarn 설치 - [CMD]창 npm install -global yarn 2. 설치확인(버전) - [CMD]창 yarn -v 3. 프로젝트 생성 - [CMD]창 cd c:/data/react 로 프로젝트 생성할 파일 지정 yarn crea..