[React] Node.js 연동

안녕하세요, 오늘은 React를 배워보기 전 Node.js와 express 연동하는 방법을 설명드리려 합니다!

 

[ 개발환경 ]

 

OS: macOS Big Sur

Editor: VSCode

 

Node.js 설치

구글에 node js를 검색하면 보이는 가장 상단의 사이트로 이동하여 Node.js를 직접 설치해줍니다.

https://nodejs.org/ko/

Node.js

저는 안정화된 14.17.3 LTS 버전을 다운로드 해줬습니다.

다운로드를 마치고나면 다운이 성공적으로 잘 되었는지 확인하기 위해 터미널에서 아래의 명령어를 입력해줍니다. 

$ node -v

 

npm package 생성

npm은 Node Package Manager로 Node.js에서 사용 되는 패키지들의 모임입니다. 이 패키지들을 사용하기 위해 npm을 초기화 시켜주도록 합시다. 

터미널에서 다시 아래의 명령어를 입력해줍니다. 

$ cd {프로젝트를 생성할 파일}
$ npm init

package name: 

version: 

description: 

entry point: 

test command: 

git repository: 

keywords: 

author: 

license: 

npm을 init하면 다음과 같은 옵션을 설정을 할 수 있고, npm init -y 로 옵션 설정 단계를 스킵할 수도 있습니다. 

 

이 과정을 마치고 프로젝트 파일로 돌아가면 package.json 파일이 생성 된 것을 확인할 수 있습니다.

 

Express js 설치

다시 터미널로 돌아가 다음 명령어를 입력해줍니다.

$ npm install express --save

 

index.js 생성

https://expressjs.com/ko/starter/hello-world.html

Express "Hello World" 예제

express 공식홈페이지의 문서를 참고하여 index.js 파일을 생성해봅시다. 

우선 프로젝트 폴더로 돌아가 index.js 이름으로 파일을 하나 생성하고 파일에 아래와 같은 코드를 추가해주면 됩니다. 

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

 

실행

이제 index.js 파일을 생성하였으니 코드를 실행하여 웹에서 잘 작동되는지 확인해봐야겠죠?? 

index.js를 실행하기 위해 package.json 파일에서 script 부분에 

  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

index.js가 실행되도록 start 명령어를 추가해줍니다.

그리고 터미널에서  npm run start를 입력해주면

쟌쟌~~ 로컬 호스트로 접속해주면 Hello World!가 제대로 출력된 것을 확인할 수 있습니다!

저는 port 넘버를 5000으로 해서 0.0.0.0:5000 으로 접속하였는데 port 넘버를 3000으로 하셨다면 0.0.0.0:3000으로 접속하시면 됩니다.