0. Returning HTML - 우리는 지금까지 HTML을 return 할때 controller에서 res.send()를 사용했음 - 한줄 정도의 HTML을 보내는건 상관없으나 한 페이지 전체를 보낼 경우 매번 많은 내용을 작성해야함 - 이 부분을 개선하기 위해 Template Engine을 사용할 것임 1. Pug - Template을 이용하여 View 만들기를 돕는 Engine - https://github.com/pugjs/pug/tree/master/packages/pug#syntax pug/packages/pug at master · pugjs/pugPug – robust, elegant, feature rich template engine for Node.js - pugjs/puggithu..

1. Route Tree - 사용자의 마인드가 되어 웹사이트이 구조를 어떻게 만들지를 구상해야 함 - globalRouter에 login search Router 만들기# Global/ -> Home/join - Join/login -> Login/search -> Search# User/user/:id -> See profile/user/logout -> Log out/user/edit -> Edit my profile/user/delete -> Delete my profile# Videos/videos/:id - > See watch video in my channel/videos/:id/edit -> Edit video/videos/:id/delete -> Delete video/videos/up..

1. Router 추가 생성// globalRouter.jsimport express from "express";const globalRouter = express.Router();const handleHome = (req, res) => res.send("Home");const handleJoin = (req, res) => res.send("Join");globalRouter.get("/", handleHome);globalRouter.get("/join", handleJoin);export default globalRouter;// userRouter.jsimport express from "express";const userRouter = express.Router();const handleEdi..

1. Routerhttps://expressjs.com/en/api.html#router Express - Node.js web application framework expressjs.com - Router는 Controller와 URL을 관리 - You can think of it as a “mini-application”  - 작업중인 주제를 기반으로 URL을 그룹화# URL# Global/ -> Home/join - Join/login -> Login/search -> Search# User/user/edit -> Edit User/user/delete -> Delete User# Videos/videos/watch - > Watch vidoo/videos/edit -> Edit video/vid..

const handleHome = (req, res) => { return res.send("what the?");};const handleLogin = (req, res, next) => { next(); console.log(1); return res.send("login");};app.get("/", handleHome);app.get("/login", handleLogin, handleHome); - 복습하던 도중 middleware를 이렇게 만들어봄 - localhost/login으로 이동하면 정상적으로 what the? 라는 p태그의 내용이 출력됐지만 콘솔에 1과 함께 에러가 발생 - 해당 에러는 서버가 클라이언트에게 2개 이상의 응답을 보낼 때 발생한다고 함 - next()를 호출하면..

1. Middleware - 브라우저가 request하면 서버는 응답을 하는데 그 사이에 있는게 middleware - middleware는 handler일 수 있고 반대가 될 수도 있음   - handler는 정확히는 controller라고 함// 기존 controller를 수정const handleHome = (req, res, next) => { next();};app.get("/", handleHome); - app.get("/", handleHome, "함수가 없는 상태");const gossipMiddleware = (req, res, next) => { console.log("middle"); next();};const handleHome = (req, res, next) => { r..

1. localhost - / 는 root 혹은 첫 페이지   - google.com 접속하면 google.com/ 이라는 것 - GET은 HTTP의 많은 method 중 하나   - HTTP는 유저와 서버 또는 서버간 소통하는 방법을 말함   - 유저가 naver.com에 접속을 하면 브라우저가 대신해서 HTTP request를 만들어 줌   - 즉 HTTP request는 웹사이트에 접속하고 서버에 정보를 보내는 방법   - 브라우저는 유저를 대신해 웹사이트를 request하고 페이지를 가져다 줌   - Bring(GET) me that page 같은 느낌 2. Request - 유저가 뭔가를 요청하거나, 보내거나, 유저에게 어떤 행동을 하는 것 - 현재의 경우 브라우저가 서버의 home으로 GET ..

1. 시작 - src폴더를 통해 모든 application들을 구분 - 기존의 index.js를 삭제하고 src폴더에 server.js 생성// server.js// 유저가 node_modules/express 할 필요없이 npm이 추적import express from "express";// express application 생성(express 설계를 위한 룰)// express function을 사용하면 생성// app이 listen 할 수 있게 해야함const app = express();// listen에는 callback이 있음const handleListening = () => console.log("Server listening on port 4000");app.listen(4000, ha..

1. 명령어를 모를 때# CLI 어디서든 명령어를 모를땐 help를 사용$ help$ git help$ git commit help$ git commit -help 2. Github에 업로드 하기- M(Changes not staged for commit) : 파일이 변경되었으며 아직 스테이지에 올라가지 않음 - U(Untracked files) : git이 파일을 관찰하지 않고 있으며 아직 git에 등록되지 않음# 파일을 스테이지 영역에 올리기# 파일 전체를 올릴려면 파일명에 .$ git add 파일명# 스테이지 영역의 상태 확인$ git status# Git에 저장하기# 모든 Commit에는 메세지가 필요$ git commit -m "내용"# Commit 이력 확인$ git logHEAD -> mai..

1. Git - Git은 Version Control System(VCS) 즉 버전 관리 시스템 - 파일의 변경사항을 추적하고 유저 간 해당 파일들의 작업을 조율하기 위한 스냅샷 스트림 기반의 분산 버전 관리 시스템 - 어떠한 파일 집합의 변경사항을 지속적으로 추적하기 위해 사용 - Git은 CLI(Command-Line Interface 또는 Character User Interface) 2. Github - The complete developer platform to build, scale, and deliver secure software.  - 유저가 만든 Git 파일과 Git의 변경사항들을 업로드 하는 곳 - GUI(Graphical User Interface)의 Github Desktop을 ..