Youtube Clone Coding (1. INTRODUCTION TO EXPRESS)

LeeJaeHoon·2021년 10월 25일
0
post-thumbnail

what is node.js → 브라우저 밖에서 돌아가는 js

  • npm init → package.json 만들어짐
  • git remote add origin 깃허브주소
  • package.json에서 "script": {"win": "node index.js"} → npm run win
  • npm i express → nodemodule파일 생기고 package.json에 "dependencies": {"express": "^4.17.1"} 생김
  • package.json에 "dependencies"가 있으면 npm i 했을때 npm이 package.json에 있는 "dependencies"을 보고 다운해줌
  • npm i —save-dev 설치할것 이러면 설치한것이 package.json안에
    • "devDependencies": {"설치한것: "^7.15.8"}라고 들어감.
    • dependencies: 프로젝트가 돌아가는데 필요한것
    • deDependencies: 개발자를 위해 필요한것
  • babel/nodemon 설정
    • npm i @babel/core @babel/node @babel/preset-env nodemon —save-dev

    • teminal에 touch babel.config.json

      파일안에 {"presets": ["@babel/preset-env"]} 적기

    • "script": {"dev": "nodemon —exec babel-node index.js"}

  1. 사용자가 http프로토콜을 사용하여 요청하는 것을 Get 요청이라고 한다.

  2. 주소 표시줄에 URL을 입력하고 페이지가 로드되면 실제로 서버에 GET 요청을 보내고 응답을 받고 브라우저에 응답을 표시한다.

  3. express 서버 만들기

    import express from "express";
    
    const app = express();
    
    const PORT = 4000;
    
    app.get("/", (req, res){
    	return res.send("Hello World);
    });
    
    app.listen(PORT, () ⇒ 
    	console.log(`✅ Server listening on port http://localhost:${PORT} 🔥`);)
  4. app.METHOD(PATH, Handler)

    1. METHOD는 HTTP요청 메소드
    2. PATH는 서버에서의 경로
    3. Handler 라우트가 일치할 때 실행되는 함수
  5. app.use(middleware 함수)

    모든 router의 미들웨어가 된다.

    const logger = (req, res, next) => {
      console.log(`${req.method} ${req.url}`);
      next();
    }
    const handleHome = (req, res) => {
      return res.send("<h1>i still love you</h1>");
    }
    app.use(logger);
    app.get("/", handleHome);

    app.use()는 app.get()보다 앞에 있어야 실행됨

    → express는 js이니깐 위에서부터 코드가 실행됨. 만약 app.use()가 app.get()보다 뒤에 위치하면 app.get()가 먼저 실행되어 return되니 app.get()은 실행이 안됨.

  6. middleware

    미들웨어 함수는 요청 오브젝트(req), 응답 오브젝트 (res), 그리고 애플리케이션의 요청-응답 주기 중 그 다음의 미들웨어 함수 대한 액세스 권한을 갖는 함수입니다. 그 다음의 미들웨어 함수는 일반적으로 next라는 이름의 변수로 표시됩니다.

    미들웨어 함수는 다음과 같은 태스크를 수행할 수 있습니다.

    • 모든 코드를 실행.
    • 요청 및 응답 오브젝트에 대한 변경을 실행.
    • 요청-응답 주기를 종료.
    • 스택 내의 그 다음 미들웨어를 호출.

    현재의 미들웨어 함수가 요청-응답 주기를 종료하지 않는 경우에는 next()를 호출하여 그 다음 미들웨어 함수에 제어를 전달해야 합니다. 그렇지 않으면 해당 요청은 정지된 채로 방치됩니다

    const gossipMiddleware = (req, res, next) => {
      console.log("I'm in the middle");
      next();
    } 
    
    const handleHome = (req, res) => {
      return res.send("<h1>i still love you</h1>");
    }
    
    app.get("/", gossipMiddleware, handleHome);
  7. npm middleware

    1. morgan → GET / 304 6.648 ms - -

      npm i morgan, import morgan from "morgan", app.use(morgan("dev");
    2. app.use(express.urlencoded({extended: true}));

      • form을 우리가 사용할 수 있는 javacript object 형식으로 바꿔줌.
      • 위의 코드로 인해 req.body를 사용 할 수 있음.
      • input에 name이 있어야 req.body에 값이 들어감!
  8. init.js

    • Database를 사용할때 Database관련 코드들은 server.js에 저장하면 가독성이 떨어지니 init.js를 만든후 Database 관련 내용 저장하는게 나음.

    • init.js

        import "./db";
        import "./models/Video"; 
        import app from "./server";

        const PORT = 4000;

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

        app.listen(PORT, handleListening);
  • server.js
      import express from "express";
      import morgan from "morgan";
      import globalRouter from "./routers/globalRouter";
      import videoRouter from "./routers/videoRouter";
      import userRouter from "./routers/userRouter";

      const app = express();
      const logger = morgan('dev');

      app.set("views", `${process.cwd()}/src/views`);
      app.set("view engine", "pug");
      app.use(logger);
      app.use(express.urlencoded({extended: true}));
      app.use("/", globalRouter);
      app.use("/videos", videoRouter);
      app.use("/users", userRouter);

      export default app;
  1. req.query
  2. res .locals
    • res.locals를 이용하며 render을통해 pug에 변수를 주지 않아도 변수를 사용 할 수 있다.
      const localMiddleware = (req, res, next) => {
      	res.locals.변수이름 =;
      }
      app.use(localMiddleware);
    • pug에서 이용하기
      if (변수이름 ===)
        li 
          a(href="/logout") Log Out

0개의 댓글