Board App - FrontEnd (React)

Board App - FrontEnd (React)

“게시판 앱 만들기”

프로젝트 생성

npx create-react-app board-app
Shell
복사

create-vite board-app --template react
Shell
복사

라이브러리 설치

## 라이브러리 전체 설치
npm install react-router-dom axios

### react router dom
npm install react-router-dom

### axios
npm install axios
Shell
복사

라우팅 경로

기능	경로	컴포넌트	설명
메인	/	Home	메인 페이지
목록	/boards	/pages/board/List	게시판 목록 페이지
조회	/boards/:id	/pages/board/Read	게시판 글 상세 조회
등록	/boards/insert	/pages/board/Insert	게시판 글 등록 페이지
수정	/boards/update	/pages/board/Update	게시판 글 수정 페이지

컨테이너

컨테이너	경로	하위 컴포넌트
ListContainer	containers/board/ListContainer.jsx	/board/List.jsx
ReadContainer	containers/board/ReadContainer.jsx	/board/Read.jsx
InsertContainer	containers/board/InsertContainer.jsx	/board/Insert.jsx
UpdateContainer	containers/board/UpdateContainer.jsx	/board/Update.jsx

컴포넌트

컴포넌트	경로	하위 컴포넌트
BoardList	components/board/List.jsx	-
BoardRead	components/board/Read.jsx	-
BoardInsertForm	components/board/Insert.jsx	-
BoardUpdateForm	components/board/Update.jsx	-

apis

axios 라이브러리를 활용한 비동기 요청 처리

npm install axios
Bash
복사

기능	요청 경로	요청 메소드	데이터 (body)
목록	/boards	GET
조회	/boards/{id}	GET
등록	/boards	POST	{ title, writer, content }
수정	/boards	PUT	{ id, title, writer, content }
삭제	/boards/{id}	DELETE