Node.js와 Express.js로 간단한 어플리케이션 만들기

Node.js와 Express.js 의 개념

node.js
: javascript를 서버side에서 사용할 수 있는 언어

express.js
: node.js를 쉽게 이용하게 해주는 프레임워크로,
  node.js 이용 시 express를 사용하면 웹 어플리케이션을 좀 더 쉽게 만들 수 있다.
  별도 설치 필요

 

Node.js 설치  +  패키지 폴더 만들기

1. node.js 설치여부 확인
   - cmd >  node -v 입력
     => 버전 나오면 다운로드 되어있는 것!

 

2. nodejs 다운
   - https://nodejs.org/ko/ 

Node.js

 

3. 앞으로 사용할 폴더 만들기(documents에 만들것임)
  - 해당 위치로 간다 : cmd > cd documents
  - 폴더 만든다 : mkdir 파일명
  ※ cmd 사용하지 않고 직접 만들어도 됨

4. 해당 폴더에 가서 패키지 파일 만들기
  - cmd > cd 파일명
  - % npm init  > 엔터 > 이름 정해주고 엔터

5. 패키지 폴더 제대로 만들어졌는지 확인
  - Visual Studio Code > 해당 폴더에 있는 package.json 파일 연다
  ※ package.json 파일이 있어야 express.js 설치 가능!

6. index.js 파일 만들기
  - Visual Studio Code > 파일 새로 만들기 > index.js 
  ※ express 설치 후 메인 페이지로 사용할 페이지이다.
     서버 구축 후 서버 돌리면 index.js에서 시작하게 만들 것임 (index.js가 시작점)

 

Express.js 설치  +  간단한 어플리케이션 만들기

1. express.js 다운받기
 - Visual Studio Code > Terminal > npm install express --save
   => --save 를 적어줌으로써 package.json에 "express": "버전" 으로 사용 여부 명시
   => 자동으로 express.js 다운됨
   => node_modules 폴더 생성됨 
        (node_moduels 안에 dependency, 라이브러리 들어가있음)

 

2. index.js에서 기본적인 express.js 어플리케이션 만들기
 - express.js 다큐먼트 확인 : https://expressjs.com/en/starter/hello-world.html 
 - 샘플 코드 가져오기 (테스트용)

const express = require('express') //express 모듈 가져온다
const app = express() //express function을 이용해 새로운 express 앱을 만든다
const port = 5000 //port는 원하는걸로 설정
 
app.get('/', (req, res) => {
  res.send('Hello World!')
})
 
app.listen(port, () => {  //5000번 포트에서 앱 실행해서 'Hello World'를 출력하게 
  console.log(`Example app listening at http://localhost:${port}`)
})

require로 express 모듈 가져온다.
port는 어플리케이션 접속할 포트로, 자유롭게 지정 가능하다.
(기본설정 마치고 접속 시 해당 포트로 접속해야 한다)

5번째 줄에 '/'는 경로로 Get 방식으로 접근 시 'Hello World'를 출력하게 했다.
(req, res)는 콜백함수로 req는 request(사용자로부터 받은 요청)를, res는 response(사용자에게 하는 응답)를 의미한다.

3. node 실행 시 시작점 설정(package.json 에서 시작점 설정)
 - package.json > scripts에 시작점 추가해준다

"start": "node index.js"

 start라는 명령어를 입력하면 index.js를 시작점으로 어플리케이션을 실행하겠다는 것을 명시해준다.

4. 실행
 - Visual Studio Code > Terminal 에서 실행
   ( 명령어 :  npm run + 3번에서 명시한 명령어 "start" )
   start는 내가 명시한 명령어로 위에 3번에서 "start"로 시작점을 정했기 때문에
   npm run + start 가 명령어가 된다 

npm run start

Example app listening at http://localhost:5000

  => localhost:5000으로 들어가면 hello world 뜨는것 확인할 수 있음