#3.7 각 프로그램의 역할 정리 & setup 코드 정리

이원규·2022년 6월 2일
0

Itube

목록 보기
8/46
post-thumbnail
post-custom-banner

-express: 서버를 만들기 위해 꼭 필요한 utility
-nodemon: server.js가 저장될 때마다 command를 재시작해줌.
-babel: 우리가 적은 최신 JS코드를 node가 알아들을 수 있는 코드로 재해석해서 node에게 알려줌. 따라서 어떤 버전의 코드를 적어도 node가 이해할 수 있음. -> babel.congig.json에 plug in(코드 작성)을 해줘야함.

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

-Dependencies & Devdependencies 차이: 전자는 프로그램을 돌리는 데 꼭 필요함(서버 만들기 등) . but 후자는 개발자의 개발을 돕는 것임. 없어도 되는데 있으몀 편한 것임.

package.json code

{
  "name": "nomad-wetube",
  "version": "1.0.0",
  "description": "The best way to watch videos.",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/WKlee0607/wetube-reloaded.git"
  },
  "scripts": {
    "dev": "nodemon --exec babel-node src/server.js"
  },
  "author": "WonKyu",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/WKlee0607/wetube-reloaded/issues"
  },
  "homepage": "https://github.com/WKlee0607/wetube-reloaded#readme",
  "dependencies": {
    "express": "^4.18.1"
  },
  "devDependencies": {
    "@babel/core": "^7.18.2",
    "@babel/node": "^7.17.10",
    "@babel/preset-env": "^7.18.2",
    "nodemon": "^2.0.16"
  }
}

server.js code

import express from "express";// 혹은 "node_modules/express"

const PORT = 4000;

const app = express(); //express application(server:24시간 내내 온라인에 연결된 켜져있는 컴퓨터)생성 -> 이제 app이 request(누군가 서버에 연결할 때 이를 허가하도록 요청하는것.)를 listen할 수 있도록 해줘야함.

const logger = (req,res,next) => {
    console.log(`${req.method} ${req.url}`);
    next();
};//middleware

const handleHome = (req, res) => {
    return res.send({message:"hihihi"});
};//route handler에는 세 개의 object가 있음. 1.requests(req) 2.response(res) 3.next / but next는 middleware에 쓰임.


app.get("/",logger,handleHome);//누군가가 어떤 route로, 이 경우엔 home 즉 root page("/")으로 get requests를 보낸다면, 반응하는 call back을 보낼 것임. addEventlistener와 같은 것임. app.get(root, CallBack(function))


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


app.listen(PORT, handleListening);//port:서버에 들어갈 수 있는 문이나 창문 같은 거.(숫자는 상관 없음, 보통 높은 숫자가 비어있음) callback: 서버가 시작될 때 작동하는 함수. app.lsten(port,function)
profile
github: https://github.com/WKlee0607
post-custom-banner

0개의 댓글