세계최강용사의 개발일기

1. brew search node 로 노드 버전 검색

2. 원하는 버전 brew install node@14 등으로 설치

3. brew search node로 잘 설치되었는지 확인한다.

4. brew unlink node 로 언링크 한다.

5. brew link --overwrite node@14로 원하는 버전으로 링크를 건다

* 본 포스팅은 리액트와 타입스크립트가 설치되었다는 가정하게 작성하도록 하겠습니다.

일반적으로 타입스크립트로 코드를 작성할 경우, 실행 시 2-step이 필요합니다.

Step1. TypeScript => JavaScript 컴파일

tsc practice.ts

Step2. 컴파일된 JavaScript 실행

node practice.js

매번 Live compile을 세팅하면 매번 컴파일을 해야하는 번거로움을 덜 수 있습니다.

ts-node 설치하기

npm install ts-node --save-dev

nodemon 설치하기

npm install nodemon --save-dev

package.json script작성

  "scripts": {
    "start": "npm run build:live",
    "build": "tsc -p .",
    "build:live": "nodemon  --exec 'ts-node' src/main.ts -e ts,tsx,js,json", //ts,tsx,js,json 확장자 확인
  },

이후 npm run start로 실행하면 정상적으로 실행되는부분을 확인 할 수 있다.

React - Node 연동

React는 그냥 프론트엔드일뿐임 ! 
Node는 Reqeust요청이오면 맞는 페이지를 전달해주면됌 ~

React Build

React 프로젝트를 먼저 Build하고, 프로젝트 혹은 Build 된 폴더 전체를 Node 프로젝트에 넣어준다 ~
Build방법은 아래와같음

npm run build

server.js

Node > server.js에 노드 화면을 라우팅해주기 위해 static 처리를 해준다 !

api Url > Node Static Url > 그외에 React Url 순서로 나는 맞추었다 ~

//Server Init 부분
    //미들웨어 셋팅
    this.setMiddleWare()

    //라우팅
    this.setRoute()

    //정적 디렉토리 추가
    this.setStatic()

    this.app.use('/public', express.static('src/public'))
    this.app.use('/uploads', express.static('uploads'))
    this.app.use(express.static(path.join(__dirname, '../react/build')))


//여기서부터 리엑트 경로로 설정해주면,
//아무것도 해당하지 않을때 리엑트 경로로 라우팅됨 !!

    //@ts-ignore
    this.app.get('/', (req, res) => {
      res.sendFile(path.join(__dirname, '../react/build/index.html'))
    })
    this.app.get('/*', (req, res) => {
      res.sendFile(path.join(__dirname, '../react/build/index.html'))
    })​

dotenv 설치

npm install dotenv

.env

환경변수 파일을 프로젝트 파일에 생성 후 아래와 같은 양식으로 입력한다

TEST_TOKEN=TEST
MONGO_PASSWORD=PassWord

사용방법

require('dotenv').config()
const {TEST_TOKEN} = process.env