[리액트 세팅-1]Typescript + React + Express.js 프레임워크 + Prettiers 환경 세팅하기

📝 목차

1. Typescript + React 세팅⚙ 

2. babel 세팅 및 Express.js 프레임워크 세팅⚙ 

 

📦 운영환경 고려

배포를 생각하면, 프로젝트를 따로 만드는 게 좋을 것 같습니다.

서버와 웹 별도로 repo를 생성해서 서버와 웹 코드를 분리해서 버전을 관리하는 게 좋을 것 같습니다. 이렇게 나눠서 코드를 관리하면 좋은 점이 배포할 때, 서버와 웹을 별도로 배포를 할 수 있기 때문입니다.

 

로컬에는 하나의 폴더에 두 개의 repo를 넣어서 사용하기로 합니다.

프로젝트
ㄴ front-end
ㄴ back-end

 

 

 

⚙ Typescript + React 세팅

로컬에 프로젝트 생성할 때는 아래 명령어를 입력합니다.

npx create-react-app --template typescript 프로젝트 이름 

yarn create react-app --template typescript 프로젝트 이름

프로젝트 폴더가 있는 경우, 프로젝트 폴더의 홈 경로에서 명령어를 터미널에 실행합니다.

npx create-react-app --template typescript .

설치가 끝나면, 프로젝트 파일이 자동으로 생성되어 있습니다.

 

package.json파일에 script 객체를 보면, start 키가 있습니다.

 

프로젝트 홈 경로 터미널에서 npm start로 앱을 실행시켜 봅시다.

 

실행 화면

네. 예쁩니다.

testing-library가 cra에 자동으로 설치되어 있습니다. redux와 redux-saga를 설치해서 상태를 관리해봅시다.

 

Redux & Redux-saga 설치

 

 

 

 

⚙ Express.js 프레임워크 세팅

 

1. back-end 프로젝트를 생성하고 node 초기화를 합니다.

$ npm init -y

 

2. Babel 패키지를 설치합니다.  Oh my  babel 참고하기

$ npm i -D babel-cli
$ npm i -D babel-preset-es2015

.Babelrc 설정하고, 실행 시, 빌드하고 실행되도록 package.json 설정을 해줍니다. -> 확인하기

 

3. express를 설치합니다.

$ npm i express

 

server.js 파일을 만듭니다.

const express = require('express');
const app = express();
const port = process.env.port || 3001;

app.use(bodyParser.json());
app.use('/api', (req, res) => res.json({ name: "선릉역"}));

express.listen();

 

package.json 설정

script객체에 

"start":"node ./server.js"

 

실행

$ npm run start

 

⚙ nodemon으로 node 서버 개발환경 자동화하기

Prettierrc 세팅

이제 Prettierrc를 설정하겠습니다.

vscode plugin으로 prettierrc를 다운받습니다.

프로젝트 홈 경로에 .prettierrc 파일을 생성합니다.  그리고, 내용으로 다음 코드를 넣습니다.

{
  "printWidth": 200,
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": true,
  "singleQuote": true
}