차근차근 공부해보자!

npm

npm is a package manager for the JavaScript programming language.
node.js로 만들어진 package(module)를 설치하고 관리하는 툴이다.

• npm install --g webpack
  번들링?
• npm init
  모듈의 의존성을 한번에 관리
  --force 명령어를 추가하면 package.json 파일을 자동으로 생성해준다.

package.json

json은 프로그래머가 파일에 정보를 저장하기 위해 만든 방식 중 하나이다.

프로그램을 만들면서 다양한 module을 설치 및 삭제하는 데, 코드 실행을 위해 어떠한 module이 필요한 지 package.json 파일을 통해 확인할 수 있다.

• "scripts"
  run 명령을 통해서 실행할 것들을 기재한다

"scripts":{
	"start" : "node app.js",
	"test" : "node test.js"
}

npm test를 입력하면 test.js파일을 node에서 실행시키라는 의미이다.
npm run start

• "dependencies"
  프로그램 실행을 위해 필요한 모듈들이 기재되어 있다.

프로젝트를 진행할 때 다른 팀원으로부터 전달받은 파일에서 package.json에 기재된 모듈은 자동설치 되지 않기 때문에 npm install 명령어를 터미널에 입력하는 작업이 필요하다.
npm i (package.json 파일을 꼭 닫고 실행한다.)명령어로 npm이 package.sjon을 보고 dependencies를 찾아서 그 안에 있는 모듈들을 알아서 설치해준다.

package-lock.json은 개발자들이 동일한 node_module 트리를 생성해서 같은 dependencies를 설치할 수 있도록 보장해준다.

node_modules 폴더가 깃허브에 올라가지 않게 숨기기 위해서는
.gitignore 파일 생성 후 /node_modules 입력

• "devDependencies"
  개발자에게 필요한 dependencies이다.

BabelJs

최신문법을 가진 코드를 작성할 수 있도록 도와준다.

1. npm install --save-dev @babel/core
2. babel.config.json 파일 생성 후 입력

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

3. npm install @babel/preset-env --save-dev
4. npm install -g @babel/node --save-dev
5. package.json에 다음과 같이 추가

"scripts":{
	"dev":"babel-node index.js"
}

Nodemon

파일 수정을 감시해주는 패키지로, 파일이 수정되면 nodemonm이 알아서 재시작해주기 때문에 매번 npm run dev를 실행할 필요가 없다.

1. npm i nodemon --save-dev
2. package.json 파일에 다음과 같이 수정한다.

"scripts": {
    "dev": "nodemon --exec babel-node index.js"
  }

3. npm run dev로 실행한다

---

디렉터리 구조

• src(source)
  코드와 로직을 가지고 있는 모든 파일들을 src 안에 넣는다.

---

express

node로 웹서버 환경 구축 시 사용하는 프레임워크이다. express로 라우팅 설정에 따라 서버를 동작시킬 수 있다.

const express = require('express'); // express 모듈 추가
const app = express();
const port = 3000;

app.get('/', function(req, res){
	res.send("야호");
});

app.listen(port, functoin(err){
	console.log("Connect port at ${port}")
}); //방법1

---

import express from "express";

const PORT = 4000;
const app = express(); //step1. express application을 생성한다.

//GET, POST 요청 등등 사용되는 부분.

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

//step2. applisten()으로 서버와 상호작용하는 모든 일들을 서버는 listening 해야 한다.
// 서버에게 어떤 port를 listening할 건지 알려주고 callback 함수를 인자로 준다.
app.listen(PORT, handleListening);

Route는 다음과 같은 구조를 가진다

app.METHOD(PATH, HANDLER)

app은 express의 instance.
METHOD는 HTTP request method.
PATH는 서버에서의 경로.
HANDLER는 Route가 일치할 때 실행되는 함수.

HTTP method

웹사이트에 접속할 때 브라우저는 서버에게 페이지를 request하고 서버는 거기에 응답한다.(브라우저 안에 웹페이지 존재)

• app.use
  globla middleware를 만들 수 있게 해준다.
  use 하는 게 먼저오고 그 다음에 URL의 get이 와야한다.

  express는 모든 걸 위에서 아래 순으로 실행시킨다.

• app.get

const handleHome = (req,res)=>{
    console.log("Somebody is trying to go home");
}

app.get('/', handleHome);
// home으로 get request가 오면 express는 handleHome에다가 req, res를 보낸다. 

• app.listen

• app.post

• app.put

• app.delete

Middleware

request와 response 사이에 있다. 모든 controller(handler)는 middleware가 될 수 있다.
controller는 세개의 argument가 있다. request, response, next

const middleWare = (req, res, next)=>{
    console.log("I'm in the middle");
    next();
}

const handleHome = (req, res)=>{
    return res.end();
}

app.get('/', middleWare, handleHome);

• morgan
  node.js 용 request logger middleware이다.
  HTTP method, path, status code, 응답시간의 정보를 가지고 있다.

import morgan from "morgan";

const logger = morgan("dev");

app.use(logger);

---

Router

const app = express();

const userRouter = express.Router();
const handleEditUser = (req, res)=> res.send("");
userRouter.get("/edit", handleEditUser);

app.use("/user", userRouter);
//누군가가 /user로 시작하는 url에 접근하면 userRouter에 있는 컨트롤러를 찾게 한다.

export

export defualt userRouter; //한개를 export
<- 이렇게 보내면 import에 {} 안 붙여도 된다.
export const trending ~; //여러개를 export
<- 이렇게 보내면 반드시 import에 object{} 붙여야 한다. 반드시 동일한 변수명을 기재해야 한다!

정규식(Regular Expression)

• 숫자만 선택하는 정규식
  videoRouter.get("/:id(\\d+)",see);

---

Pug

템플릿 엔진.
템플릿을 이용해서 뷰를 만드는 것을 돕는다.
app.set("view engine", "pug"); //express에게 이제부터 사용할 뷰 엔진은 pug라고 말해준다.
express는 기본적으로 현재 작업 디렉터리에서 views라는 디렉터리를 찾도록 설정되어 있기 때문에((process.cwd()) + '/views')
따라서 다음의 코드를 추가해 주어야 한다.
app.set("views", process.cwd()+"/src/views");
package.json이 node.js.를 실행하고 있기 때문에 package.json 파일이 있는 곳이 현재 작업 디렉터리가 된다.

• pug에서 변수를 사용하는 방법
  #{}
• Inheritance
  레이아웃(HTML)의 베이스. 모든 파일들이 그 베이스에서부터 확장해나갈 수 있다.
  extends 한다는 것은 베이스가 되는 파일을 가져다가 그대로 쓰는 것이다.
• block
  창문과 같은 개념. 특정 부분을 지정해서 해당하는 부분을 바꿀 수 있다.

  h1 pageTitle -> "pageTitle" 이라는 text
  h1=pageTitle -> pageTitle이라는 variable
  h1 #{pageTitle} -> variable을 text와 함께 사용할 때

template

1. Conditionals

2. Iteration
3. Mixins

   똑똑한 partial이다. 데이터를 받을 수 있는 일종의 미리 만들어진 HTML block 이라고 볼 수 있다.

partial이긴 한데 데이터를 받을 수 있는 partial을 의미한다.
parital: HTML의 한 조각을 나타내고, 데이터를 받진 못한다.

+!!
extends
include
block

유튜브는 썸네일, 제목, 조회수가 보이는 비디오 component를 여러 페이지에서 재사용한다.

MVC

Divdie&Conquer

1. Model

2. View
   유저가 보는 대상

3. Controller

기본 라우팅

Routing refers to determining how an application responds to a client request to a particular endpoint, which is a URL(or path) and a specific HTTP request method(GET, POST, and so on).

• Restful API?