[React][CRUD] 게시판 만들기 All in One (1). react App 생성, 디렉토리 구조 설정, json-server 설치 및 실행

 

 

 

목차돌아가기:

binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial-v2

[React][CRUD] create-board-tutorial-v2

 

 

 

들어가기 전에

 

10월 말부터 연재(?)한 게시판 crud 시리즈(간단한 게시판 만들기)는 presentation component, container component 가 따로 분리 되어있는 구조로 만들었는데 동작 부분(container) 화면에 보이는 부분(presentation)이 따로 따로 있다보니 redux를 안다 해도 흐름 파악이 어려운 점이 아무래도 있었다. 그리고 나 또한 개념을 충분히 알고 있지 않은 채로 만들었던 터라 부족한 면도 많이 있었다.

 

 

성능 최적화를 생각하면 내 경우 presentation component와 container component 가 따로 있는 것을 선호하지만 회사에서 하고 있는 프로젝트에서는 디렉토리가 굉장히 자잘하게 쪼개져 있기에 따로 분리를 안 하고 있다.

 

 

어느 방식이든 장단점이 있다. (예전 소스와 방식은 거의 비슷하지만) 소스 리팩토링도 할 겸 presentation과 container가 합쳐진 방식으로 이번에 새로 연재(?)를 하려 한다.

 

 

그래서 v1(간단한 게시판 만들기)과 v2 중에 본인에게 맞는 걸로 포스팅을 읽거나 따라하면 되실 것 같다.

 

 

이번 완성본도 github에 올릴 예정이다.

 

github.com/cruellaDev/react-create-board-v2

cruellaDev/react-create-board-v2

 

 

 

/**

* 주의

* 2022-03-24

* 이 글을 작성한 시점은 2021년 4월으로 약 1년 전이고 그 사이에 많은 모듈들이 수차례 업그레이드를 진행하였기에

* 위 패키지 그대로 할 시 컴파일이 안될 수도 있다.

* Node 버전 확인 후 진행 요망

* (npx create-react-app 의 경우 Node 버전이 낮을 경우 안 될 수 있다. 업그레이드 해야 함)

*/

 

 

 

우선 원하는 폴더 위치에 커맨드창 혹은 shell을 열어 다음 코드를 친다.

 

npx create-react-app 원하는-레파지토리-이름

 

나는 이번에도 react-create-board 라는 이름을 이용하려 한다.

 

만든 뒤에 react-create-board-v2 의 폴더로 감쌌다.

 

 

처음 준비할 폴더 구조는 다음과 같다.

 

 

 

 

 

react-create-board 에 스크립트문을 작성하고 server 는 말그대로 server다.

 

server로는 json-server를 사용할 것이다.

 

 

 

 

이제 여기서 디렉토리 구조를 수정할 것이다.

 

 

 

디렉토리 구조 정리 전에 우선 App.js 에서 import 구문을 싹 날려준다.(그래야 컴파일 에러 안 남)

 

// App.js

function App() {
  return (
    <div>
    </div>
  );
}

export default App;

 

 

Index.js 도 필요없는 부분은 날리고 이렇게만 남겨준다.

 

// Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

 

 

 

그리고 폴더를 생성해주는데 따라 만들 디렉토리 구조는 다음과 같다.

 

 

 

 

현재 여기서 보이지 않는 App.css, Index.css, App.test.js 등은 과감히 삭제해도 된다.

(단 삭제하기 전에 import 되어 있는 곳은 지워주고 삭제해야 compile 에러가 안 난다.)

 

 

 

server 를 손쉽게 키는 방법은 두 가지가 있다.

(계속 터미널에서 npx  쓰는 게 귀찮아서 찾아본 방법이다.)

 

우선 vscode 에 npm extension이 설치되어 있어야 한다.

 

 

 

 

첫번째 방법이다.

 

첫번째 방법의 경우 ./server 구조는 다음과 같을 것이다. 

 

첫번째 방법은 package.json을 디렉토리 따로따로 만드는 방법이다.

 

(개인적으로 두번째 방법을 추천함)

 

 

 

 

우선 ctrl + shift + ` 를 눌러 새 터미널을 연다.

 

폴더 위치가 root folder (server의 상위 폴더)일 경우

cd ./server 

를 타이핑하여 이동한다.

 

 

그리고

npm init -y

를 친다.

 

 

그러면 package.json이 생성될 것이다.

 

 

다시 터미널에서

npm install json-server

를 입력하여 json-server를 다운로드 받고

 

 

./server/package.json 을 다음과 같이 수정한다.

 

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "starts": "json-server --watch board.json --port 4000"
  },
  "keywords": [],
  "author": "이름",
  "license": "ISC",
  "devDependencies": {
    "json-server": "^0.16.3"
  }
}

 

(포트번호는 꼭 4000으로 할 필요 없다.)

 

 

그리고 react-create-board 에 있는 .gitingnore를 복사해서 server 폴더에 붙여넣기 해준다.

 

(안 그럼 2000 몇 개의 changes 가 발생함)

 

 

 

 

혹시 모르니 npm install 을 한 번해주고 (혹은 npm scripts 에서 package.json 마우스 오른쪽 버튼 클릭 + run install)

 

sidebar의 npm scripts 에서 재생버튼을 누르면 json-server 가 켜질 것이다.

 

(나는 vscode의 npm extension을 사용하기 때문에 sidebar의 npm scripts 에서 재생버튼을 누른다)

 

 

 

Tada!

 

json-server가 켜졌다.

 

 

localhost:정해놓은포트번호 << 웹주소 확인해보면

 

 

그냥 빈화면이면 아마 Resources 부분에 아무것도 없을 건데 데이터 설계를 위해 미리 값을 넣어놨다.

 

 

일단 계획상 데이터 설계는 이러하다. (성공 기원....)

 

 

 

 

 

 

npm start와 json-server가 같이 켜지는 방법이 있을 것 같은데 아직은 모르겠다. 추후 방법을 알게되면 밑에 수정된 내용이 달릴 것이다!

 

방법 알아냄 ^__________________^

 

두번째 방법은 스크립트만 작성하는 /react-create-board/package.json 하나만으로 /server/board.json 서버까지 킬 수 있는 방법이다.

 

 

우선 react-create-board 폴더 위치에서

npm i json-server

json-server 를 설치한다.

 

 

그리고 /react-create-board/package.json 에서 scripts 부분을 다음과 같이 바꾼다.

 

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "server": "json-server ../server/board.json --watch --port 4000"
  },

 

 

그러면 사이드바에 있는 npm scripts  가 이렇게 바뀌었을 것이다.

 

 

 

 

저기서 이제 server - react-create-board 옆 재생버튼을 클릭하면 아래 starts - server 없이도 그냥 하나의 package.json에서 다른 디렉토리에 위치한 서버를 켤 수 있다. 그리고 이 방식은 json-server를 한군데만 install 해도 된다는 장점이 있다.

 

 

서버 켜는 방식은 취향에 맡기겠다!

 

vscode npm scripts extension 이 가끔 initialize 되지 않을 때도 있다.

 

그럴 경우 어쩔 수 없이 server 폴더에서 npx json-server 해야 한다.

 

 

 

목차돌아가기:

binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial-v2

[React][CRUD] create-board-tutorial-v2