Basic of node.js with express (1)

package.json

package.json은 node.js의 관련 정보를 담고 있는 파일이라고 생각하면 된다
이 파일은 정말 단순히 그냥 text들이기 때문에 뭘 넣어도 상관없고 대부분의 것은 지워도 Error가 발생하지 않는다
그 안에는 name, version, description 등이 있는데 그 중에 눈여겨 봐야 할 것은 개인적으로
scripts와 (dev)dependencies다

1. scripts

scripts는 npm의 명령어를 만드는 것이라고 이해할 수 있다
예를들어

"scripts": {
	"dev": "node index.js"
}

이라고 script를 만들었으면 npm run dev로 index.js파일을 실행할 수 있게 된다

보통 나는 한번 실행하면 계속해서 우리의 파일의 변화를 감시해주고 파일이 수정되면 자동으로 restart를 해주는 nodemon과 modern javascript를 node.js가 이해할 수 있도록해주는 javascript compiler인 babel을 사용하여

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

위와 같이 연동하여 사용하는 편이다

babel을 사용하기 위해서는 --save-dev로 설치를 한 후 babel.config.json이라는 설정파일을

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

위와 같이 만들어주면 된다

2. dependencies

dependencies는 프로젝트가 작동하기 위해 필요한 package들이다
그래서 기본적으로 누군가의 프로젝트를 다운받아서 npm i를 터미널에 입력하면 자동으로 이 dependencies에 있는 package들이 다운 받아진다

그리고 이 설치된 module들은 node_modules라는 폴더에 저장된다

npm i package-name과 npm i package-name --save-dev의 차이는

--save-dev를 하게되면 package.json파일에 dependencies가 아닌 devDependencies에 저장이 되는데 이는 개발과정에서만 필요한 module들의 목록이라고 이해하면 된다
따라서 해당 목록(devDependencies)안에 있는 module들은 사용자가 다운받아 npm i을 할 때 다운받아지지 않는다

운전으로 예를 들면 dependencies는 핸들, 기름등 실질적으로 꼭 필요한 것들이고
devDependencies는 음악, 내비등 운전을 할 때 내가 편하려고(혹은 좋으려고) 필요한 것들
이라고 이해하면 좋을 것 같다

Create server and routes

server란 무엇일까? 쉽게 말하면 그냥 인터넷이 연결된 24시간 항상 켜져있는 컴퓨터라고 할 수 있다
이 컴퓨터는 request를 listening한다

여기서 request는 우리가 서버에게 요청하는 것들이다
예를들어 내가 google.com을 browser 주소창에 입력하면 이 것이 일종의 request인 것이다

그래서 express를 사용해서 server를 만들고

import express from "express"; //from "node_modules/express"이지만 npm이 알아서 경로를 찾아준다

const PORT = 4000; //backend의 관습상 4000을 사용해준다
const app = express(); //server를 만들어준다고 생각하면 될 것 같다

request를 listening할 수 있도록

//해당 PORT에 접속하면 console에 메세지가 출력 됨
app.listen(PORT, () => console.log(`Server listening on port http://localhost:${PORT}`)); 

위와 같이 작성해 주었다
근데 이 상태로 browser에 localhost:4000을 입력해 접속을 하면 Cannot GET /이라는 문구가 나온다

GET은 http에서 사용되는 method이고 browser가 기본적으로 해주는 일이고
이를 통해 website가 보여지는 것이다

실제로 우리가 website에 방문하는 것이아니고 browser가 website를 우리에게 데려와 준다
라는 개념으로 이해하도록 하자

이는 위 그림과 같이 server가 동작해야 하지만 우리의 server는 request를 listening했지만 response를 해주지 않아서 나오는 문구다

그래서 우리도 response를 할 수 있도록 하면 되는데 server가 건물이라고 상상해보자
url들은 건물 안에 있는 각 문들이다(ex. 101호, 203호 등)
기본적인 건물의 입구는 /이다 그래서 우리는 홈페이지가 /로 끝난다(ex. https://www.naver.com/)
그리고 로그인을 하고싶으면 /login으로 웹툰을 보고싶으면 /webtoon으로 각 방을 들어가듯이 들어가면 되는 것이다 (실제 네이버는 이렇게 동작하지는 않는다)

우리는 이런 url들을 routes라고 부른다
이제 const app과 app.listen사이에 response할 내용들을 만들어보도록 하자

const handleHome = (req, res) => { //req = reqeust, res = response
  return res.send('<h1>Hello world!</h1>`);
};

app.get("/", handleHome); //첫 arg는 route이고 두번째 arg는 handler 함수이다

위와 같이 작성하고 localhost:4000에 접속하면 Hello world!가 보일 것이다

위에서 나온 handleHome같은 handler들을 express에서는 controller라고 부른다

이 controller는 3가지 argument를 갖고 있는데 req, res, next다
이를 사용하여 다양한 기능의 controller를 만들 수 있는 것이다

middleware

middleware는 단어 자체에 의미가 내포되어 있다

express에서의 middleware는 controller와 같지만 배치되어 있는 위치가 중간단계이기 때문에 middleware라는 별칭으로 부르는 것 뿐이다

middleware를 사용하기 위해선 next()와 use()에 대한 이해가 필요하다

next()

next()는 말그대로 이 후에 실행해야되는 controller가 있다는 것을 알려주는 함수이다

const logger = (req, res, next) => {
  console.log("i'm logger");
  next();
}

const handleHome = (req, res) => {
  return res.send('<h1>Hello world!</h1>`);
};

//client가 /에 접속하면 logger가 실행되고 그 후에 handleHome이 실행 된다
app.get("/", logger, handleHome); 

이렇게 chainning을 할 때 next()가 사용된다

use()

만약에 많은 페이지가 있고 그 모든 곳에 middleware로 logger를 사용하고 싶으면 어떻게 해야할까?

const logger = (req, res, next) => {
  console.log("i'm logger");
  next();
}

const handleHome = (req, res) => {
  return res.send('<h1>Hello world!</h1>`);
};

app.get("/", logger, handleHome);
app.get("/login", logger, handleHome);
app.get("/music", logger, handleHome);
app.get("/contact", logger, handleHome);

위와 같이 해도 되겠지만 나는 게으르기때문에 개발자가 되기로 마음을 먹었다
반복이 싫고 굉장히 귀찮은게 많은 성격이라 개발자가 되기로 마음먹었다는 말이다
그래서 위와 같은 방법대신 use()를 사용해보도록 하자

const logger = (req, res, next) => {
  console.log("i'm logger");
  next();
}

const handleHome = (req, res) => {
  return res.send('<h1>Hello world!</h1>`);
};

app.use(logger); //모든 request에 logger가 실행 됨
app.get("/", handleHome);
app.get("/login", handleHome);
app.get("/music", handleHome);
app.get("/contact", handleHome);

위와 같이 use()를 사용해주면 모든 페이지마다 자동으로 logger를 거쳐가게 될 것이다

reference

nomadcoders
express documentation