[wetube] #2.6~2.8

+ 이 글은 노마드 코더의 [유튜브 클론 코딩] 내용을 담고 있습니다.

nodemon 패키지를 통해서 파일이 저장될때마다 서버가 재시작 되도록 설정 하였다.
여기엔 문제점이 하나 있는데, 서버가 두번 재 시작 되는 문제가 있다.

파일을 저장하면서 서버가 한번 재시작되고, Babel이 코드를 변환시키기 때문에 서버가 한번 더 재시작하게 된다.이러한 문제는 delay를 통해서 해결 할 수 있다.
Babel이 코드를 변환할때까지 delay를 줘서 해결 한다.

"scripts": {
    "start": "nodemon --exec babel-node index.js --delay 2"
  }

Express Core: Middlewares

웹사이트에 접속하려고 할때 시작되면 index파일을 실행하고 route(/)가 존재하는지 살펴본다.
home을 요청하는 것을 알고,home을 찾고 handleHome 함수를 실행한다.handleHomde은 응답을 전송 한다.

app.get("/",handleHome);//main url

보통 흐름들은 간단하지않고, 유저와 마지막 응답 사이의 중간에 무엇인가가 있게 되는데 이것을 middleware라고 한다.express의 모든것은 middleware가 될 수 있다.

const handleHome = (req, res) => res.send("Hello from home!");
const betweenHome = (req, res, next) => {
console.log("Between");
next();

#### app.get("/", betweenHome, handelHome);

유저가 home을 요청하고("/") betweenHome과 handelHome 두개의 함수를 가지게 된다.유저의 home(/)요청과 handelHome 사이에 있는 betweenHome이 middleware가 된다.
express의 모든 route들 , connection을 다루는 것들은 request,response 그리고 next를 가지고 있다.

handelHome은 마지막 함수이기 때문에 nexr가 없지만 middleware인 beweenHomde은 next를 가지고 있다.여러 middleware를 거친 마지막 함수가 유저에게 무엇인가를 반응 해준다. 위의 코드는 home에 대한 route에 대해서만 실행 된다.

middleware는 언제 사용할까?

• 유저의 로그인 여부를 체크할 때
• 파일을 전송할때 중간에서 가로채 upload가능
• 모든 접속에 대해 로그를 남길 수도 있다.
• 주소를 체크하는 middleware를 통해 ip를 체크해 접속을 취소할 수도 있다.

아래의 코드는 기본적으로 웹사이트에서 일어나는 모든 것에 대해서 middleware가 반응 한다.
순서가 중요.app.use 와 app.get 사이에 많은 middleware를 두면 된다. 여러 middleware를 둔 다음에 route를 처리.

const handleHome=(req, res) => res.send('Hello from home'); 

const betweenHome = (req,res,next)=>{
    console.log("Between");
    next();
}
app.use(betweenHome); //midleware

app.get("/",handleHome); //home url

app.get("/profile",handleProfile);

Morgan

유용한 midleware 중 Morgan을 설치 해보자.morgan은 로깅(loggin)에 도움을 준다.

$ npm install morgan

여러 인자를 받을 수 있는데 dev 옵션을 쓰면 GET /profile 304 4.701 ms - - 같이 GET 정보와 ,status를 알 수 있다.

Helmet

Helmet 은 NodeJS사용시 보안에 도움을 준다.보안을 위해서 설치하는게 좋은 버릇

npm install helmet

미들웨어로 연결을 끊는 예제
만약 미들웨어가 response를 보낸다면 연결이 끊긴다.next 함수 대신 res.send 함수를 실행한다면

app.use(morgan("dev"));
app.unsubscribe(helmet());

const middleware = (req, res, next) => {
    res.send("not happeing");
}

app.get("/",handleHome);//main url

Body Parser

$ npm install body-parser

cookie와 body를 다루는 것을 도와주는 middleware.
서버를 통해서 데이터를 받았을때 그데이터를 갖고 있는 request object에 접근할 수 있게 해주는 body-parser

Cookie Parser

$ npm install cookie-parser

seesion을 다루기 위해서 유저정보를 저장하는 cookie를 이용하여,body로부터 정보를 얻을 수 있게 해주는 cookie-parser
위에서부터 아래로 작동하는 순서를 기억해둘 것

app.use(cookieParser());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended : true})); //form
app.use(helmet());
app.use(morgan("dev"));

app.get("/",handleHome);//main url

app.get("/profile",handleProfile);

app.listen(PORT,handleListening);

Express Core: Routing

시작 할때 init.js에서 application을 호출하게 만들기.
->app.object를 init.js에서 사용 할 수 있어야 함.

//init.js
import app from "./app";

const PORT = 4000;

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

app.listen(PORT,handleListening);
 

//app.js
import express from "express";
import morgan from "morgan";
import helmet from "helmet";
import cookieParser from "cookie-parser";
import bodyParser from "body-parser";
import{userRouter} from "./router";

const app = express(); //app변수에 express를 실행

const handleHome=(req, res) => res.send('Hello from home'); 

const handleProfile=(req,res) => res.send("Hello Profile");

app.use(cookieParser());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended : true})); //form
app.use(helmet());
app.use(morgan("dev"));

app.get("/",handleHome);//main url
app.get("/profile",handleProfile);


export default app;

ES6에 추가된 기능인 module을 이용해서 코드를 공유할 수 있다.다른 파일에서의 코드를 가져다 사용 할 수있게 된것.
express,morgan,helmet 등등은 node_modules 에서 불러와서(import) 사용한다.

init.js에서 app.js를 사용하기 위해서는
export default app; 을 app.js에 적어준다 누군가 app.js를 불러올때 app object를 주겠다는 뜻이다.

init.js에서는 import app from "app";을 적어준다.마치 init.js 가 app을 갖고 있듯이 해준다.

index.js 파일이 아닌 init.js 파일을 처음에 찾도록 package.json을 수정 한다.

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

routes에 대해 얘기해보자.rputer란 rpute들의 복잡함을 쪼개주는데 사용할 수 있다.예를 들면 /user/edit, /user/changepassword등등 이런 경우에 사용 한다.router 파일을 통해서 route들을 쪼개븜.

//router.js
import express from "express";

export const userRouter = express.Router();

userRouter.get("/",(req, res) => res.send('user index'));
//http://localhost:4000/user
userRouter.get("/edit",(req, res) => res.send('user edit'));
//http://localhost:4000/user
userRouter.get("/password",(req, res) => res.send('user password'));
//http://localhost:4000/password

app.get("/",handleHome);//main url
app.get("/profile",handleProfile);

app.use("/user",userRouter); //누군가 /user로 접속하면 이 router 전체를 사용 하겠다

export default app;

router는 많은 route들이 담긴 파일.

하나의 route가 아닌 router 전체를 사용하기 위해서 router.js에 export const userRouter 추가하여 router를 내보내준다

default로 export 하면 import app form"./app"; default가 아닌 경우(위의경우) import {userRouter} from "./router"