개발 과정 리뷰 -1-

#1 package.json 내부의 scripts

 

scripts key내부에는 사용자 지정 명령어같은 느낌의 value들을 선언할 수 있다.

"scripts": {
    "dev": "nodemon --exec babel-node index.js"
},

 

위와 같은 식으로 작성되어 있을 때, 콘솔에 npm run dev 를 입력하면 dev의 우측의 내용 script를 입력하는 것과 같은 실행을 보여준다는 뜻이다.

 

 

#2 babel과 Nodemon 의 사용

1) babel

babel은 현재 프로젝트의 JS버전을 통일해주는 개발자 툴이다.

개발자가 JS의 최신 문법을 마구 사용해도, 현재 프로젝트의 버전에 맞는 JS문법으로 자동으로 컴파일해주게 된다.

 

babel.config.json 파일에서 어떤 babel기능을 쓸 것인지 적어두고, 해당 기능이 라이브러리에 추가되어 있다면 자동으로 사용되는 방식이다.

 

2) nodemon

nodemon은 파일이 수정되는지 감시해주는 패키지이다. 파일 실행시 함께 실행해주면 백엔드를 껏다켰다해야하는 불편함을 줄여준다.

 

위 두 설정을 마친 script가 다음과 같다

"scripts": {
    "dev": "nodemon --exec babel-node index.js"
}

 

 

#3 Js에서 require() 메소드

express를 사용할 때, require를 사용하기도 하고

const express = require("express");

 

babel을 JS 코드로 사용할 때도 아래와 같이 require를 사용하기도 한다.

require("@babel/core").transform("code", {
    "presets": ["@babel/preset-env"]
})

 

따라서 require 메소드에 대해서 간단히 정리하자면, 외부의 모듈을 가져오는 메소드이다.

 

인자로 "express"를 입력하면 express.js 파일을 읽는다.

 

 

#4 Request Respond 정리

Http란 결국 서버와 소통하는 방법론이다.

Http request는 브라우저를 통해 웹사이트에 접속하고 서버에 정보를 보내는 방식이다.

Get은 페이지를 Request하는 Method 중 하나인 셈.

 

express에서는 이러한 Method의 처리를 서버를 시작하기 전 모두 선언해주고, 서버를 시작하는 구조를 가지고 있다고 생각하면 된다.

import express from "express";

const PORT = 4000;
const app = express();

//app을 선언하고, app.listen으로 request를 받기 시작하는 코드 사이에,
//Method들을 만들어준다.


function handleRequest(){
    console.log(`Server listening on port localhost:${PORT}`);
}

app.listen(PORT, handleRequest);

 

또한 기본적으로 브라우저는 Request에 대한 Response가 없으면 무한 로딩에 빠진다는 사실을 알고 있어야 한다.

 

 

+추가

req나 res에 무슨 값이 있는지 보고 싶으면 그대로 출력해보자.

function handleHome(req, res){
    console.log(req);
}

app.get("/", handleHome);

 

 

[request를 끝내는 여러가지 방법]

1. res.end() 반환(return)

2. res.send("메세지") 반환

 

등등

아래 주소에서 모든 API들 확인할 수 있다.

https://expressjs.com/en/4x/api.html#app

Express 4.x - API Reference

 

 

#5 Middleware 이해하기

 

간단하게 요약하자면, request와 response 사이에 있는 software이다.

MVC모델에서 Controller가 될 수 있는 함수들은 모두 Middleware가 될 수 있기도 하다.

(정확히는 이들을 포괄하는 용어는 handler이다)

app.get("/",testMiddleWare, handleHome);

 

위 예시에서 두개의 handler 중 testMiddleWare가 middleWare, handleHome이 Controller가 된다

 

handler들은 기본적으로 req, res 말고도 next라는 인자를 가지고 있는데,

handler 내부에서 next(); 를 사용하면 해당 handler를 호출한 Method에서 다음 인자로 주어진 Callback함수 handler를 부르게 된다.

 

그렇게 부르는 handler가 Middleware, 마지막에 불리게 되서 response를 보내서 req를 끝내주는 handler가 진짜 Controller가 된다.

 

#6 app.use를 사용한 global Middleware 만들기

app.use(testMiddleWare);
app.get("/", handleHome);

위와 같은 구조로 사용한다.

 

이렇게 되면 testMiddleWare는 모든 라우터에 대해서 동작한다.>

 

 

#7 External Middleware 이해하기

MiddleWare 라이브러리인 morgan에 대해서 알아보려고 한다., 

npm i morgan

 

간단하게 import하고 사용하는 방식은 다음과 같다

 

import morgan from "morgan";

const morganMiddleWare = morgan("dev");

app.use(morganMiddleWare);

 

기능은 method, route, statuscode 와 응답시간을 콘솔에 찍어주는 기능이다.

 

morgan은 인자로 5가지의 string을 받을 수 있는데

dev, combine, common short, tiny 이다.

 

각각 출력해주는 정보의 종류가 다르다.

 

next가 라이브러리에 내장되어있는 식이고, 이러한 특정 기능을 가지고 있는 외부 middleware들을 가져다 쓸 수 있다.