node.js_서버 만들기(request), Npm, express, babel

1. npm과 dependencies, devdependencies 의 이해

 

-> dependencies 는 프로젝트를 위한 패키지들의 모임

-> devDependencies 는 개발자의 편의를 위한 패키지들의 모임

 

2. express 프레임워크 사용

 

-> 서버단을 만드는 것을 도와주는 프레임워크

 

3. babel의 이해와 babel 패키지 설치 및 babel.config.json 설정 + nodemon 설치

 

3.1 bable 이란

  -> 최신코드를 Node.js 가 이해 할 수 있게 하고 complie을 도와주는 패키지

  -> 공식 홈페이지 번역본

 Babel은 현재 및 이전 브라우저 또는 환경에서 ECMAScript 2015+ 코드를 이전 버전의 JavaScript로 변환하는 데 주로 사용되는 도구 체인입니다.

 

3.2 @babel 패키지 설치

npm install --save-dev @babel/core @babel/preset-env

 

 -> @babel/core 최신코드를 babel로 변환 작업을 해주는 핵심적인 역할을 함.

 -> @babel/preset-env = babel 플러그인 역할 ( babel.config.json ) 에서 설정을 해주어야한다.

 

 

3.3 babel.config.json 기본 설정

{  
  "presets": ["@babel/preset-env"]
}

3.4 nodemon 이해와 설치 및 package.json 설정

 

공식 홈페이지 번역본
nodemon은 디렉토리의 파일 변경이 감지되면 노드 응용 프로그램을 자동으로 다시 시작하여 node.js 기반 응용 프로그램을 개발하는 데 도움이 되는 도구입니다.

-> nodemon 은 npm run dev 를 통한 개발서버 열기를 수정 할 때마다 매번 하지 않고 저장 한번으로 자동으로 업데이트 해주는 역할, 수정할때마다 개발서버를 닫았다 열었다 하는 번거로움을 없애준다.

설치 : npm install --save-dev nodemon

설치를 완료 하였으면 package.json 에서 script를 변경/설정해준다.

"script" : {
   "dev": "nodemon --exec babel-node /path/index
}

4. 서버 만들기(express)

 

  4.1 설치 npm install express

  4.2 서버는 get(request) 와 post(respones)로 이루어진다. 지금은 get 부분의 request 만 다룬다.

     get(request) 서버에게 홈페이지 좀 주세요! 요청하는 단계

  4.3 최종 코드

import express from "express"

// 서버 만들기

const PORT = 4000

const app = express();

// 페이지 요청 (request)

const handleHome = () => console.log("Somebody is trying to go home")

app.get("/", handleHome)


// 페이지 listing

const handleListining = () => console.log(`Server start on port http://localhost:${PORT}`)

app.listen(4000, handleListining)

 

1. express 를 import 해주고,

2. const app = express();

   express를 실행해준다.

3. app을 이용하여 listen을 해주어 4000번 포트를 사용 할 것을 명시한다.

   콜백으로 handleListing 을 사용했는데 안해도 무방하다.

4. app.listen 을 하였으면 이제 get을 이용해서 서버를 요청해본다.

5. app.get('/') <- 메인 페이지를 의미, 뒤에 handelHome 역시 무시해도 된다.

6. get이 잘 되었으면 http://localhost:4000 홈페이지로 접속하면 계속 로딩이 걸릴 것이다.

   -> 로딩이 걸리는 이유 : get 요청은 하였으나 아직 post(response) 응답을 못해서 로딩이 걸리는 것임. 

 

최종정리

## express 불러오기
import express from "express" 

## app 변수를 만들어서 express 실행
const app = express();

## get('루트경로') 요청
app.get('/')

## 포트 설정
app.listen(4000)