[React][CRUD] 리액트로 간단한 게시판 페이지 만들어보기 - 2. 필요한 모듈, 라이브러리 설치, react router 사용하기

목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial

[React][CRUD] create-board-tutorial

 

 

 

 

VSCode extension 중 open native terminal 을 설치하면

 

 

root folder 와 현 파일이 들어있는 디렉토리 폴더(current folder) 중 어디서 터미널을 열 것인지 고를 수 있다.

 

 

 

 

extension은 이렇게 생겼다

 

 

 

VSCode 에서 사용하는 terminal은 기본적으로 rootfolder 기준이므로 yarn start / npm run 이 실행된 상태일 시 VSCode terminal을 일단 kill 하고 change directory를 사용해야 하기 때문에 번거롭다.

 

yarn 없이 npm만 사용하는 것이 아니라면 따로 terminal을 띄워서 사용해도 이제까진 괜찮았다.

 

 

 

 

 

 

 

필요한 모듈을 설치해보자

 

yarn add redux react-redux react-router-dom redux-saga @reduxjs/toolkit antd

 

상태 관리를 위한 redux와 react-redux, redux-toolkit

router 사용을 위한 react-router-dom

비동기 처리로서 사용할 middleware로 redux-saga

스타일링을 위한 antd

 

이 외 더 필요한 것이 있다면 중간에 추가하도록 하겠다.

 

 

 

 

 

 

설치가 끝나면 package.json 파일의 dependencies 에 다음과 같이 추가된다.

 

 

 

 

 

 

 

프로젝트의 기본 구조는 다음과 같이 설정하였다.

 

원래는 온라인 쇼핑몰을 만드려 했으나 상품과 주문을 연결할 정보가 마땅치 않았기 때문에 기본 게시판 구조로 가기로 하였다.

(디렉토리도 추가할 항목이 생기면 추가할 예정)

 

 

(서버는 json-server 를 이용할 예정이다)

 

 

 

 

 

 

 

첫 화면 컴포넌트를 만들어보자

 

/src/components/views/BoardPage 위치에

BoardPage.js 만든다.

 

꿀팁으로 ES6 code snippet과 ES7 code snippet 이라는 VSCode extension를 설치한다면 react 약어를 이용하여 능률을 높일 수 있다.

 

 

 

예로 rfce 를 입력하면

 

이렇게 자동완성 해준다.

컴포넌트 이름도 자동으로 만들어준다.

 

 

 

 

이제 router를 이용하여 화면 첫 페이지에 BoardPage 컴포넌트가 나오도록 만들어보자.

 

 

 

 

/src/index.js 에 react router dom의 BrowserRouter 를 import 하고 App 컴포넌트를 감싸준다.

 

 

 

 

App 컴포넌트에는 Route, Switch 를 import 하여

들어가자마자 나오는 화면에 BoardPage가 뜰 수 있도록 경로(path)를 '/' 로 지정해주고 component에 BoardPage를 넣는다.

 

 

 

 

 

파일들을 모두 저장하고 웹에서 compile 된 결과를 보면 다음과 같다. 

 

 

 

 

 

 

 

BoardPage 에는 게시판 타이틀, 게시글목록(BoardList)과 글 등록 버튼이 나오게 할 예정이다.

 

 

 

 

우선

/src/components/views/BoardPage 디렉토리에 Sections 라는 폴더를 추가하고

Sections 폴더에 BoardList.js 파일을 생성하여 BoardPage.js 에 import 한다.

 

화면은 아래와 같이 나와야 한다.

 

 

 

 

 

타이틀과 버튼까지 기본 사항으로만 추가하면 이렇다

 

 

 

 

 

다음은 글 화면 부분이다.

 

/src/components/views/ArticlePage 디렉토리에서 ArticlePage.js 파일을 만든다.

 

 

 

 

 

App.js 파일로 와서 route를 생성하고 ArticlePage를 import하여 컴포넌트 프로퍼티에 넣어준다.

이때 route 경로(path)는 게시글 Id 를 프로퍼티로 받아 사용할 것이기 때문에 "/article/:articleId" 로 적는다.

 

 

 

 

 

목록에서 게시글을 클릭하면 url이 다음과 같이 '/article/게시글아이디' 형식으로 들어갈 것이다.

 

 

 

 

 

 

글목록을 클릭해서 보려면 일단 글을 생성해야 한다.

 

/src/components/views 에 RegisterPage 라는 폴더를 추가하고 생성된 폴더에 RegisterPage.js 도 추가한다.

그리고 App.js 에도 route를 등록해준다. 경로는 "/register" 로 한다.

 

 

 

 

 

 

주소에 /register 라고 매번 치기 어려우니 BoardPage의 버튼에 Link 태그를 추가하여 'New Post' 버튼을 클릭했을 때 /register 페이지로 바로 이동할 수 있도록 만든다.

 

 

 

 

 

기본적으로 틀만 만들어놓고 저장 후 App이 잘 돌아가나 테스트를 해보자

 

 

 

 

 

 

목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial

[React][CRUD] create-board-tutorial