[NodeJS] 노드 리액트 기초 - express 라이브러리 설치 및 서버 실행

노드를 다운받으셨다면 터미널 창에서 node -v 혹은 node --version 명령어로 노드가 설치되어있는지, 설치되어있다면 몇 버전이 설치되어있는지 확인이 가능합니다.

node -v
node --version

 

 

expressJS는 nodeJS의 프레임워크인데요!

https://expressjs.com/

Express - Node.js web application framework

이 사이트는 express의 공식 사이트입니다!

Getting started에서 처음 시작하시는 분들을 위한 설명이 잘 되어있습니다.

 

express를 설치하기 위해서는 노드가 반드시 설치되어 있어야합니다!

 

저는 cmd창 말고 VSCODE를 켜서 VSCODE에서 제공해주는 터미널을 사용하겠습니다.

 

우선 작업하고자 하는 폴더를 만들어서 폴더 내에 package.json 파일을 만들어줍니다.

터미널 창에서 npm init 명령어를 통해 package.json 파일을 만들수 있습니다.

npm init

npm init 명령어를 수행하면 이처럼 뭔가 설정해주는 내용이 나오는데요. 모두 생략해도 됩니다!

이렇게 명령을 수행해주면 package.json파일이 생긴걸 볼수 있습니다!

이제 express를 설치해 볼까요??

 

npm install express --save

 

 

이명령을 수행하면 express가 다운이 되고 package-lock.json파일과 node_modules폴더가 생긴걸 볼수 있습니다!

node_modules의 경우에는 다운받은 라이브러리들이 저 node_modules폴더 안에 들어가게 됩니다.

 

동시에 package.json 파일에는 express 디펜던시가 추가되었습니다.

--save 명령을 수행함으로서 표시가 된건데요.

이 어플리케이션에서는 express라는 라이브러리를 사용하고 있다는 표시를 해주는 것입니다.

 

이제 index.js라는 파일을 만들어서 해당 프로젝트의 시작점을 만들어 볼까요??

 

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

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

app.listen(port, () => {
  console.log(`Example app listening on port ${port}!`)
})

index.js파일에 이 코드를 작성해보겠습니다.

 

먼저 첫번째 줄의 const express =require('express')는 다운받은 express모듈을 express라는 이름으로 사용할수 있도록 선언해주었으며 express function을 이용해서 app이라는 새로운 express 앱을 만들고 3000번 포트를 사용할 예정입니다.

'/'의 의미는 해당 루트 디렉터리에 오게되면 Hello, Express!를 출력하겠다는 의미입니다.

또 해당 app은 3000번 포트에서 실행이 됩니다.

 

package.json에서 scripts안에 "start": "node index.js", 를 추가해 넣어주겠습니다. 

start가 수행이 되면 node 앱을 실행하겠다는 의미인데 노드가 설치되어있으면 브라우저에서만 동작하는 자바스크립트가 서버사이드에서 실행될수 있기때문에 해당명령을 수행하겠습니다.

 

이 app이 3000번 포드를 listen을 하게 되면 해당 console.log가 찍히게 된다는 의미입니다. 

브라우저에서 localhost:3000을 가보게 되면 Hello, Express!가 응답이 됩니다.

응답 내용을 수정하고 싶다면 서버를 끄고 다시 실행시켜야 합니다.