리액트 게시판(React Board) - 스프링 부트 연동

1. 부트 스트랩을 사용 하기 위한 react-bootstrap를 install한다.

 

npm install react-bootstrap bootstrap

 

Stylesheets

중요 - 최상단의 루트파일인 src/index.js 또는 App.js 파일에 다음 스타일을 추가해줍니다.
import 'bootstrap/dist/css/bootstrap.min.css';
만약 추가하지 않는다면 부트스트랩의 스타일은 적용되지 않습니다.

 

아래의 사이트를 찾아가 쓸만한 컴포넌트를 찾아 본다.

https://react-bootstrap.netlify.app/getting-started/introduction/

React-Bootstrap

 

https://getbootstrap.com/docs/5.0/getting-started/introduction/

위의 컴포넌트가 맘에 들지 않을 경우 부트스트랩 사이트에서 찾아서 복붙 한다.

 

 

2. 리액트 라우터를 쓰기 위한 아래의 npm 설치

npm install react-router-dom

3. 서버와 통신을 위한 axios 

npm install axios

 

4. CROS 개념 익히기

 

5. 스프링 부트에서의 RESTful 설계

 

JD	Method	Rest URI	기존 URI
게시판 전체 조회	GET	/rboard	/list
게시판 컨텐츠 조회(1개조회)	GET	/rboard/{bid}	/content_view
게시판 글 생성	POST	/rboard
게시판 글 수정	PUT	/rboard/{bid}	/write
게시판 삭제	DELETE	/rboard/{bid}