[Node] Node란? + Node.js 와 Express.js 다운 방법

Node.js

노드는 기존에 JavaScript를 사용하려면 html이나 기본적인 jsp 페이지 내부에서 사용을 해주어야 했는데

이것을 보완하여 서버 쪽에서 자체적으로 다른 언어들처럼 작성하고 사용할 수 있도록 하는 것이 Node.js 입니다.

 

 

Express.js

노드가 차의 엔진이라면 Express 는 그밖의 차의 부품들을 구성하고 만들어주는 Node.js의 프레임워크 기술입니다.

 

 

 

Node.js + Express.js 설치 과정

(1) 설치 확인

터미널 환경을 열어줍니다.

 

 

우선적으로 설치된 Node 가 존재하는지 확인하기 위한 명령어를 입력합니다.

# 명령어 : node -v

 

위 처럼 버전이 나오면 설치되어있다는 뜻입니다.

 

 

!! 설치가 안되어 있을 경우

- 구글에 node js를 입력합니다.

 

- LTS 버전을 다운로드 받습니다.

 

- 다운받은 node를 열어서 완전히 설치해줍니다.

나는 기존에 node가 설치되어있기 때문에 사진 자료는 스킵할게요!

 

- 다시 명령 프롬프트에서 node -v 명령어를 입력하고 정상적으로 버전이 설치되었는지 확인합니다.

 

 

(2) 설치 후 터미널 경로 추가 (필수 X)

현재 있던 경로에서 documents 경로로 이동하고  =>  cd documents

boiler-plate 경로를 추가하였습니다.  =>  mkdir boiler-plate

boiler-plate 경로로 이동합니다.  => cd boiler-plate

 

 

 

(3) npm 패키지 설치

생성된 경로 안에 진입하여 npm 패키지를 설치해줍니다.

# 명령어 : npm init

 

설치 내용이 나오고 엔터를 치다보면 여러 설정 값을 입력해줄 수 있습니다.

description, test command, git repository, keywords, author 등 여러 설정들이 나오는데

저는 author에 제 이름만 적어주었습니다.

 

계속 진행하다보면 Is this OK? 라는 문구와 함께 마지막 엔터를 치게 되면 npm이 설치가 됩니다.

 

 

 

(4) Visual Studio에서 생성한 경로에 방금 만든 파일 확인

도구는 비주얼 스튜디오 말고 다른 도구도 가능합니다.

저는 현업이나 대부분의 개발자 분들이 많이 사용하시는 비주얼 스튜디오로 실행해보고자 합니다.

 

 

비주얼 스튜디오를 열어서 File 탭 안의 Open Folder를 누릅니다.

 

 

방금 터미널에서 설치한 경로대로 들어와서 boiler-plate 폴더에 진입하여 폴더 선택을 누릅니다.

 

 

폴더 선택을 누르면 package.json 파일이 생성된 것을 볼 수 있고 누르면

터미널에 설정했던 값들이 들어가있는 파일이라는 것을 확인할 수 있습니다.

 

 

 

(5) index.js 생성

New File을 눌러 index.js 를 입력하고 js 파일을 생성합니다.

index.js 는 시작점 파일이라고 보면 될 것 같습니다.

 

 

 

(6) Express.js 설치

Express.js 를 설치하는 것은 처음에 만졌던 터미널 환경에서도 설치할 수 있지만 비주얼 스튜디오에서 자체적으로 제공하는 터미널 환경에서도 설치할 수 있습니다.

저는 자체 터미널 에서 설치해보도록 하겠습니다.

View 탭을 누르고 항목 중에 Terminal을 눌러 위의 사진처럼 터미널 환경을 호출합니다.

 

 

npm install express --save 명령어를 입력하여 Express.js를 설치해줍니다.

 

 

설치를 완료한 이후에 설정값들이 들어가있는 package.json 파일을 확인해보면,

dependencies 라는 설정값에 express 라고 하는 라이브러리가 추가된 것을 볼 수 있습니다.

앞서 설치하면서 명령어에 --save 키워드를 붙여주었는데 express 라이브러리를 추가하여 저장하겠다는 의미입니다.

 

 

또한 설치되면 왼쪽에 node_modules 라는 폴더가 추가되면서 많은 기능들이 추가된 것을 볼 수 있습니다.

다운 받은 dependencies들은 다 이 node_modules 폴더에서 관리되게 됩니다.

 

 

 

(7) index.js 에서 기본적인 Express.js 앱 만들어 테스트 해보기

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

Express "Hello World" example

위의 사이트에 들어가서 간단한 테스트를 위해 Express.js 도큐멘트를 확인합니다.

 

 

공식 사이트에 들어가면 간단한 테스트 코드가 있는데, 이것으로 테스트 해봅니다.

 

 

index.js에 복사한 코드들을 붙여넣습니다.

 

 

const express = require('express')  => 설치한 express dependency를 불러와서 express 변수를 생성합니다.

const app = express()  =>  express 변수를 function을 적용하여 app 이라는 앱으로 생성합니다.

const port = 3000  =>  실행한 서버의 포트 번호를 3000 번으로 지정합니다.

app.get('/', (req, res) => {

   res.send('Hello World!')

})  => '/' 루트 디렉토리에 요청을 보내고 응답을 받겠다고 설정합니다.

app.listen(port, () => {

   console.log('Example app listening on port ${port}')

})  => app을 3000번 포트에서 실행하여 콘솔 로그를 찍겠다!

 

 

 

앞서 설정값들이 저장되어있는 package.json 파일에 가서 scripts 항목에 "start" 를 추가하고 내용은 "node index.js"를 입력합니다.

해당 start 스크립트를 호출하게 되면 index.js 파일을 실행하게 됩니다.

 

 

package.json 과 index.js 에 전부 내용을 입력했으면 터미널에 npm run start 를 입력하여 실행해봅니다.

여기서 start는 앞서 package.json 파일에서 생성한 script 안에 있는 start 항목을 말합니다.

따라서 start 내용인 node index.js 가 실행되게 되고 index.js 안에 있는 내용이 실행되어 Example app listening on port 3000 이라는 문구가 뽑힌 것을 확인할 수 있습니다.

 

 

브라우저 상에서 localhost:3000 을 입력하면 index.js 파일 내부에 있는 Hello World 값이 응답되게 됩니다.

 

app.get('/', (req, res) => {

   res.send('Hello World!')

})

자세하게 설명하면 위의 내용이 실행되어 브라우저에 출력된 것인데, localhost:3000/ 를 주소창에 입력을 하게 되면

3000번은 설정한 포트번호를 의미하고, 맨 뒤의 / 기호를 넣음으로써 루트 디렉토리로 요청하겠다는 의미가 됩니다.

req는 요청값을 말하는데 현재 아무런 요청값을 보내지 않습니다.

따라서 요청값이 아무것도 없는 상태에서 res 응답값만을 반환받게 됩니다.

res 응답값으로는 Hello World!를 보내겠다라고 설정해주었기 때문에 브라우저에 해당 문구가 찍히게 됩니다.

 

 

 

이것으로 Node.js 와 Express.js 설치 방법과 초기 설정, 비주얼 스튜디오로 간단하게 앱을 실행하는 것까지 해보았습니다.