[유튜브 클론코딩] 2.8 Express Core : Routing

2.8 Express Core : Routing

새로운 파일을 만든다.(init.js)

• index.js → app.js로 파일 이름을 바꾼다.
• app.js에서 일부분 삭제한다. (왜냐면 저 부분을 init.js에서 작성할거기 때문에)

(↑주석처리된 부분을 지우는 것이다)

 

init.js에서 application을 시작하도록 한다

• 자바스크립트 ES6에는 흥미로운 부분이 있는데, 모듈이라는게 있어서 우리 코드를 공유할 수 있다.다른 파일에서의 코드를 가져다가 사용할 수 있다.
• 예를 들어, app.js에서 express, morgan, helmet 등등을 불러 썼었는데 이것들도 어딘가에서 불러온 것이다.(import)
  • express,morgan,helmet 같은 것들은  node_modules 안에서 찾아온 것

• 이제 우리가 할 것은 init.js에서 app.js가 실행되도록 하는 것이다

    1. app.js에서 export default app; 이라는 코드를 제일 하단에 작성한다.

    2. init.js에서 다음과 같은 코드를 추가한다.

import app from "./app";



const PORT = 4000;

const handleListening = () => console.log(`Listening on: http://localhost:${PORT}`);

app.listen(PORT, handleListening);

application을 app파일(app.js)에서 가져왔기 때문에 이렇게 할 수 있다. (전에 했던 것과 같은 코드이다.)

import app from "./app"; 에서 ./라고 한 이유는 init.js와 app.js는 같은 폴더에 있기 때문에 이걸 사용해준 것이다.

(./는 현재 위치를 뜻하는 것임. 만약 app.js가 상위 폴더에 있으면 ../app.js 이런식으로 쓰고, 구글에 루트 경로 검색해보면 이해가 될 것)

• "./" means from your files

• "app" would be from your node_modules.

  3. 이제 npm start를 init.js로 시작할 것이기 때문에  package.json에서 nodemon을 수정한다.

"scripts": {

    "start": "nodemon --exec babel-node init.js --delay 2"

  },

 

 

***export 관해서!

export default: 파일로 export한다는 것 (전체를 export한다는 것이지)

export const userRouter 처럼 그냥 export만 한 건 오직 이 변수만 export한다는 거지 (그것 말고 다른 변수는 export되지 않음!)

 

 

Router

• router란 route(경로)들의 복잡한 문제를 해결해준다
• router.js 파일을 만든다.

 

Router.js에서 라우터 만들기

• Router.js 파일을 만든다. 여기 라우터를 만들 것이다.

import express from "express";



export const userRouter = express.Router();

userRouter.get("/", (req,res)=> res.send('user index'));

userRouter.get("/edit", (req,res)=> res.send('user edit'));

userRouter.get("/password", (req,res)=> res.send('user password'));

• 그냥 익명함수처럼 적어준 것임 (앞전엔 함수를 선언하고, 함수 이름만 가져와서 콜백함수형식으로 적었다면 이건 함수 안에서 바로 실행되는 익명함수)
• 저것을 app.js에서 사용할 수 있도록 export 해준다.
  • 저것은 default로 export하지 않고 변수 앞에 export해줬기 때문에 저렇게 export한 것은 import { userRouter } from "./router"; 이렇게 import 해준다. (default로 export했을 때랑 import 방법이 다름)

 

app.js에서 라우터 사용하기

app.use ("/user", userRouter);

• 이렇게 use를 사용할건데, use의 의미는 '누군가 /user 경로에 접속하면 이 router 전체를 사용하겠다는 의미이다.'
• 이렇게 하고 저장하고 localhost:4000/user에 들어가면 router.js에 있는 userRouter.get("/", (req,res)=> res.send('user index')); 이 코드에 의해 user index가 뜨는 것을 볼 수 있다.
• localhost:4000/user/edit 랑 localhost:4000/user/password도 마찬가지이다.

 

 

app.use  VS app.get ?

이전에는 app.get("/",handleHome)과 같이 get 메소드를 썼었는데 왜 위에서는 use를 사용하는 것일까? 두가지가 무엇이 다른지 찾아보았다.

• app.use('/index')는 /index 로의 모든 요청에 대해서 동작함. 즉, get이나 post 등 어떤 HTTP method에도 작동한다.
• 그에 반해서 app.get('/index')는 get 요청에 대해서만 동작하는 미들웨어

 

 

내가 원하는 만큼의 router를 만들 수 있다.

userRouter를 만들어도 되고, 원한다면 videoRouter를 만들어도 된다.

이런 것들이 express의 멋진 점이다. 모든걸 엄청 작은 파일들로 쪼개서 사용할 수 있게 해주기 때문이다.

엄청 못생긴 방식("/","/profile",경로를 URL방식으로 하나하나 적어줬던 방식) 말고 router를 이용해서 더 간단하고 편리하게 기능을 분리시킬 수 있다.