[React] 설치와 Client + Server 세팅

리액트 설치부터 Client, Server 초기 세팅까지 과정에 대해 알아보자.

 

 

 

 

React 설치와 Client + Server 세팅

 

프로젝트 폴더 생성

 

터미널에서 프로젝트 폴더 경로로 이동한다.

cd my-app/

 

리액트 프로젝트 개발 환경을 구축하기 위해 아래 명령어를 입력한다.

npx create-react-app client

 

타입스크립트 버전

npx create-react-app --template typescript

 

my-app 아래에 client 폴더가 생성되면서, 그 안에 리액트 패키지가 설치되었다.

프로젝트 폴더에 server 폴더를 생성한다.

mkdir server

현재까지 폴더 구조

 

my-app
├── client
│   ├── README.md
│   ├── package-lock.json
│   ├── package.json
│   ├── public
│   │   ├── favicon.ico
│   │   ├── index.html
│   │   ├── logo192.png
│   │   ├── logo512.png
│   │   ├── manifest.json
│   │   └── robots.txt
│   └── src
│       ├── App.css
│       ├── App.js
│       ├── App.test.js
│       ├── index.css
│       ├── index.js
│       ├── logo.svg
│       ├── reportWebVitals.js
│       └── setupTests.js
└── server

 

 

타입스크립트 버전

 

my-app
├── client
│   ├── README.md
│   ├── package-lock.json
│   ├── package.json
│   ├── public
│   │   ├── favicon.ico
│   │   ├── index.html
│   │   ├── logo192.png
│   │   ├── logo512.png
│   │   ├── manifest.json
│   │   └── robots.txt
│   ├── src
│   │   ├── App.css
│   │   ├── App.test.tsx
│   │   ├── App.tsx
│   │   ├── index.css
│   │   ├── index.tsx
│   │   ├── logo.svg
│   │   ├── react-app-env.d.ts
│   │   ├── reportWebVitals.ts
│   │   └── setupTests.ts
│   └── tsconfig.json
└── server

지금부터 루트 경로란 my-app을 의미한다.

 

루트 경로에 .env 파일을 생성해준다. 민감한 정보 등을 환경 변수로 담아 관리할 곳이다.
루트 경로에 README.md 파일을 생성해준다. 프로젝트에 대한 설명을 작성하는 곳이다. 배포 시 필요하다.

 

client>public 폴더에 이미지 폴더를 생성한다. 사용할 이미지를 여기에 담아두고 사용한다.

client>src 폴더에 components 폴더를 생성한다. 컴포넌트 관리는 여기에서 한다.

client>srvc 폴더에 setupProxy.js 파일을 생성한다. 미들웨어가 필요한 경우 아래와 같이 코드를 작성한다.

 

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
        '/api',
        createProxyMiddleware({
            target: 'http://localhost:포트넘버',
            changeOrigin: true,
        })
    );
};

 

server 폴더를 세팅해보자.

 

server 폴더에 index.js 혹은 server.js를 생성한다. 서버를 관리하는 곳이다.
server 폴더에 config 폴더를 생성한다.
config 폴더에 dev.js, key.js, prod.js를 생성한다.

 

Development 환경(개발 중)과 Production 환경(배포 후)을 구분해주는 곳이다.
DB에서 받은 개인 KEY 정보는 노출되면 안 되기 때문에 나누는 것이다.
정보가 모두 적힌 dev.js는 배포 시 .gitignore에 포함해 배포하지 않는다.

 

 

dev.js (개발 시 사용)

실제 URI를 모두 적어주면 된다. 이 파일은 .gitignore에 포함해 배포하지 않는다.

 

// Development mode
module.exports = {
  mongoURI: 'mongodb+srv://...'
}

 

prod.js (배포 후 사용)

환경 변수 형식으로 작성한다. (process.env.작명)
작명한 부분은 배포 시 배포 서버에 KEY로 작성해주면 되고, 실제 URI는 VALUE로 작성해주면 된다. 그러면 배포한 서버에서 인식하여 적용해준다.

 

// Production mode
module.exports = {
  mongoURI: process.env.MONGO_URI
}

 

 

key.js (환경 인식하여 모듈 적용)

 

if (process.env.NODE_ENV === 'production') {
  // 배포 후
  module.exports = require('./prod');
} else {
  // 개발 시
  module.exports = require('./dev');
}

 

server 폴더에 middleware 폴더를 생성한다.
middleware 작성이 필요하면 이 폴더 내에 파일을 생성해 작성하면 된다.

 

server 폴더에 models 폴더를 생성한다.
스키마 필요시 models 폴더 내에 파일을 생성해 작성하면 된다.

 

루트 경로에서 패키지 설치를 위해 아래 명령어를 입력한다.

npm init

 

package name 등 정보를 입력하고 계속 엔터 하면 npm 초기화가 완료되면서 package.json이 생성된다.

 

package.json을 열어 "scripts" 세팅을 해준다.
"scripts"에 명령어를 세팅하면 npm run + 생성한 명령어로 실행할 수 있다.

 

 

(package.json)

 

"scripts": {
  "start": "node server/index.js",
  "backend": "nodemon server/index.js",
  "frontend": "npm run front --prefix client",
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "concurrently \"npm run backend\" \"npm run start --prefix client\"",
},

 

• npm run start: node server/index.js를 실행한 것과 같이 서버가 실행된다.
• npm run backend: nodemon server/index.js를 실행한 것과 같이 서버가 실행된다.
• npm run frontend: client 폴더에서 npm run front를 실행한 것과 같이 클라이언트가 실행된다.
• npm run dev: 서버와 클라이언트를 동시에 실행할 수 있게 해준다.

 

nodemon은 서버에 실시간으로 업데이트를 반영해준다.

npm install nodemon --save-dev

 

npm run dev를 사용하려면 concurrently 라이브러리를 설치해야 한다.

npm install concurrently --save

 

 

--save를 입력하면 package.json dependecies에 추가된다. 따라서, 나중에 해당 package.json을 가져다 npm install 하면 저장했던 것들이 모두 설치된다.
--dev를 입력하면 로컬에서만 사용하겠다는 의미이다. 배포 시에는 필요 없는 경우 사용한다.

 

루트 경로에 .gitignore 파일을 생성한다. 배포 시 제외할 폴더와 파일을 입력한다.

 

# dependencies
node_modules

# Development mode
dev.js

# env
.env

 

자주 사용하는 라이브러리는 dependencies에 추가해두고 해당 package.json을 다른 프로젝트에 복붙한 다음 npm install해서 사용한다.

 

자주 사용하는 라이브러리 참고

 

루트 경로 package.json

 

"dependencies": {
  "axios": "^0.26.0",
  "bcrypt": "^5.0.1",
  "concurrently": "^7.0.0",
  "cookie-parser": "^1.4.6",
  "dotenv": "^16.0.0",
  "express": "^4.17.2",
  "jsonwebtoken": "^8.5.1",
  "mongoose": "^6.2.0"
},
"devDependencies": {
  "nodemon": "^2.0.15"
}

 

• "axios": node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트
• "bcrypt": 데이터 암호화,
• "concurrently": 서버와 클라이언트를 동시에 실행할 수 있게 해줌
• "cookie-parser": 쿠키 헤더를 추출(파싱)
• "dotenv": 서버에서 환경 변수를 사용할 수 있게 해줌
• "express": NodeJS를 사용하여 쉽게 서버를 구성할 수 있게 만든 클래스와 라이브러리의 집합체
• "jsonwebtoken": JSON Web Token. 토큰 생성
• "mongoose": MongoDB와 Express 웹 애플리케이션을 연결해줌

 

 

body-parser는 Express 4.x부터 내장되어 있어 설치할 필요가 없다.

 

 

클라이언트 폴더 내 package.json

 

"dependencies": {
  "axios": "^0.25.0",
  "http-proxy-middleware": "^2.0.3",
  "node-sass": "^7.0.1",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "react-redux": "^7.2.6",
  "react-router-dom": "^6.2.1",
  "redux": "^4.1.2",
  "redux-logger": "^3.0.6",
  "redux-promise": "^0.6.0",
  "redux-thunk": "^2.4.1",
},

 

• "axios": node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트
• "http-proxy-middleware": 클라이언트 단에서 미들웨어를 사용할 수 있게 해줌
• "node-sass": SASS를 사용하기 위해 설치
• "react-redux": redux
• "react-router-dom": router
• "redux": redux
• "redux-logger": redux middleware. 리덕스 정보를 콘솔에 제공
• "redux-promise": redux middleware.
• "redux-thunk": redux middleware.

 

최종 폴더 구조

 

my-app
├── README.md
├── client
│   ├── README.md
│   ├── package-lock.json
│   ├── package.json
│   ├── public
│   │   ├── favicon.ico
│   │   ├── index.html
│   │   ├── logo192.png
│   │   ├── logo512.png
│   │   ├── manifest.json
│   │   └── robots.txt
│   └── src
│       ├── App.css
│       ├── App.js
│       ├── App.test.js
│       ├── components
│       │   ├── Footer
│       │   ├── LandingPage
│       │   └── NavBar
│       ├── index.css
│       ├── index.js
│       ├── setupProxy.js
│       ├── logo.svg
│       ├── reportWebVitals.js
│       └── setupTests.js
└── server
    ├── config
    │   ├── dev.js
    │   ├── key.js
    │   └── prod.js
    ├── index.js
    ├── middleware
    └── models

타입스크립트 버전

 

my-app
├── client
│   ├── README.md
│   ├── package-lock.json
│   ├── package.json
│   ├── public
│   │   ├── favicon.ico
│   │   ├── index.html
│   │   ├── logo192.png
│   │   ├── logo512.png
│   │   ├── manifest.json
│   │   └── robots.txt
│   ├── src
│   │   ├── App.css
│   │   ├── App.test.tsx
│   │   ├── App.tsx
│   │   ├── components
│   │   │   ├── Footer
│   │   │   ├── LandingPage
│   │   │   └── NavBar
│   │   ├── index.css
│   │   ├── index.tsx
│   │   ├── setupProxy.js
│   │   ├── logo.svg
│   │   ├── react-app-env.d.ts
│   │   ├── reportWebVitals.ts
│   │   └── setupTests.ts
│   └── tsconfig.json
├── package.json
└── server
    ├── config
    │   ├── dev.js
    │   ├── key.js
    │   └── prod.js
    ├── index.js
    ├── middleware
    └── models