cloning Youtube with VanillaJS and NodeJS
-
npm init으로 package.json 설정 초기화
-
npm install express로 서버위한 Express 모듈 추가. (dependency)
-
package.json의 Script항목으로 단축 명령어 작업할 수 있다. --> npm start로 입력하면, node index.js로 치환되어 실행된다. "scripts": { "start" : "node index.js" }
-
app.listen(4000); 으로 브라우저가 접속하기를 기다린다.
-
app.get("/", handle )으로 들어온 브라우저에게 응답을 한다. function handleHome(req, res){ // req : 서버입장에서 브라우저가 어떤 정보들을 보냈는지 확인가능한다. // res : 어떻게 응답할 지 명세할 수 있다. res로 .html과 .css를 보냄으로써 접속한 상대에게 화면을 보여줄 수 있다. console.log(req); res.send("Hello from home"); } app.get("/", handleHome);
-
npm install nodemon -D 로 -D를 붙여줌으로써 개발할 때만 쓸 수 있다.
-
babel모듈은 JavaScript의 최신 표준 함수를 사용하여도 알아서 브라우저별 규격에 맞게 변경해주는 편리함을 제공한다.
-
Express의 미들웨어(MiddleWare)는 HTTP의 Method 실행전 전처리 함수로 사용한다. --> app.get("/profile", middle, callback)으로 callback 실행할지 말지를 결정지을 수 있다. --> 미들웨어는 다음과 같이 구성된다. const middle = (req, res, next)=>{} --> middle 함수 내부에서 어떠한 조건이 충족되면 next();를 호출하는 방식으로 사용한다. --> const middle = (req, res, next)=>{} 로 next에 또다른 MiddleWare 함수를 넣으면, 콜백체인으로 쓸 수 있다. --> app.use(middle)로 모든 연결에 대해서 중간에 middleWare를 넣어줄 수 있다.
-
추가한 미들웨어는 다음과 같다.
- morgan은 로깅용으로 사용--> app.use(morgan("dev"));로 사용하면 미들웨어로 동작하여 HTTP Method중간에 로그를 기록한다.
- helmet은 보안용으로 사용.
- body-parser : 사용자가 웹사이트로 전달하는 정보들을 검사한다. form, json으로 된 body를 검사한다. 사용자가 보내온 HTTP POST 데이터의 body로 부터 쉽게 정보를 얻을 수 있다. app.use(bodyParser.urlencoded({extended:true})); -> html로 보낸 정보를 읽을 수 있다. app.use(bodyParser.json());-> json으로 보낸 정보를 읽을 수 있다.
- cookie-parser : 쿠키 전달 받아 사용할 수 있다. 사용자 인증등의 정보를 정보를 개인 컴퓨터에 저장한다. 쿠키에 유저 정보를 저장할 수 있다.
-
ES6에서는 모듈을 사용하여 파일간 변수등을 공유할 수 있다. --> Export로 변수를 내보내고, Import로 변수를 받아서 사용할 수 있다. --> export default "변수"; 해주면, 외부에서는 import "변수" from "./path"로 받아온다. 파일 전체를 Export해준다. --> export 변수 해주면, 외부에서는 import {변수} from "./path"로 받아온다.
-
라우팅은 url 요청에 따라서 App이 응답하는 방법을 정의하는 것을 의미한다. --> export const userRouter = express.Router();로 정의하여 app.js에서는 userRouter를 붙여주기만 하면 된다! --> app.use("/user", userRouter); //으로 userRouter는 "http://localhost:4000/user" 이후의 라우트에 대해서 정의할 수 있다. --> 요청 url의 성격에 따라서 .js파일을 분리할 수 있는 장점이 있다.
-
MVC(Model_Data, View_How does the data look, Controller_function that looks for the data) --> 로직 부분들은 Controller에서 수행한다.
-
[프로그램 WrapUp]
- init.js가 시작점이다. ./app에서 import해온 App을 시작한다.(listen..)
- app을 import해오는 시점은 App에서 express()를 받아와 실행시키고, use로 다양한 MiddleWare들(Logger, 쿠키파서, Body파서, 보안(Helmet))을 불러온 다음, Route를 정의한 시점 이후 이다!
- Router는 URL 그룹을 나누는 역할을 한다. 분기처리되어 그룹내의 Url관리를 할 수 있게한다.
-
Pug는 MVC에서 V(View)에 해당한다. View Engine으로서 express로 res.send대신에 실제 HTML을 전달하는 역할을 한다.