11/15 공부정리

WSL

Windows Subsystem for Linux의약자로서

기존의 가상머신의 오버헤드(어떤 처리를 위해 들어가는 간접적인 처리 시간, 메모리) 또는

듀얼 부팅 설정없이 대부분의 명령줄도구, 유틸리티 및 애플리케이션을 비롯한 GNU/Linux 환경을 수정하지 않고 Windows에서 직접 실행할 수 있습니다

Package.json: node.js관련 정보 담는 방법

그냥 텍스트 파일이지만 특정장소(script) 에 입력하면npm i 동작가능

```

"scirpt":{

"dev" : nodemon-L --exc bable-node index.js

}

```

"main" in package.json: the main file of your project

1.

폴더만든후 package.json 파일 만들고

json object로 이름

{

"name":"youtube"

}

2.git repository 만들기

3.npm init 설정하여 npm 으로 package.json 만드는거 돕기

4.npm i express 설치 --> /npm i 로 설치 되는 모든 것들은 nodemodules 파일에 생성됨

npm i 사용시 주의점 !! package.json파일을 꼭 닫고 실행하기 버전충돌이 일어날 수 있음

Dependencies 와 Dev-dependencies

두개 다 node_modules파일에 설치되지만 체계화하기위해서 pakage.json파일에 분리하여 정리함

"Dependencies" :프로젝트가 만들어지기위해 필요한 패키지들

예) express , 설치되는 모든 것들이 nodemodule 폴더로 저장됨

//nodemodule파일은 파일이 크기때문에 .gitignore파일에 /node_modules로 저장 npm i 만 하면 자동으로 설치됨

"Dev-dependecies" : 개발자가 필요한 패키지들

예) babel(최신문법을 이용할 수 있게 도와주는 패키지, bable.config.js 필요), nodemon(파일이 수정되는 걸 감지하여 자동으로 재시작)

Dev-dendencies 설치하기

1.https://babeljs.io/setup#installation node.js용 바벨 설치

[Babel · The compiler for next generation JavaScript

The compiler for next generation JavaScript

babeljs.io](https://babeljs.io/setup#installation)

해당 문서가 시키는 대로 설치, 설정

1-1. npm install --save-dev @babel/core

1-2. Create babel.config.json configuration file

In order to enable the preset you have to define it in your babel.config.json file, like this:

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

1-3. npm install @babel/preset-env --save-dev**

2. babel에 nodemon설치

2-1. npm install @babel/core @babel/node --save-dev

2-2. npm i nodemon --save -dev

2-3. "scirpts": {
"dev": "nodemon --exec babel-node src/server.js" 적어주기
},

Node.js 서버만들기

1.불러온 뒤 express application 만들기

import express from "express" // 자동으로 node_modules/express/index.js 찾아줌const app = express( ); //express application 만들어줌

2.application listen app.listen( 어떤 port를 listen 할지 숫자, listening이 시작되면 호출되는 함수 (callback함수))예) app.listen(4000, homehandle);

server는 항상 켜져있는 인터넷으로 request를 listen한다.google.com 에간다면 google.com으로 브라우저가 request한것 google.com/login

서버를 시작했으면 보통 localhost를 통해 접속한다. localhost:4000(portNumber)

nodemon & 서버 종료 Ctrl +c

----------------------------------

3.서버에온 request를 respond하는 법

cannot Get /(서버의 root 또는 첫페이지를 말함 google.com = google.com/ )

http method(get,post) http : 서버와 소통하는 방법

express application 생성

application 설정 가운데 위치

listen , 외부개방

application 설정

app.get("route",handler) //누군가가 route로 get request를 보내면 hanlder사용

app.get("/", handlehome) app에 rootpage로 getRequest 보내는 함수 동작

const handlehome = (req, res) = > console.log("") //한줄의 중괄호가 없는 화살표함수는 return 안적어도 됨 express에서 받은 인자 , 자바스크립트 이벤트리스너 함수인자 event처럼

브라우저가 request 보내면 우리는 response를 return한다.return. res.end();return res.send("hi");

req,res는 express로 부터 주어지는 것 express가 request object제공하고 그 안에는 누가 웹사이트를 request하는지 

cookies,브라우저 정보, ip주소 같은 request 와 관련된 정보가 있음 

5.middleware express 설계와 관련

software in the middle

request response 사이에 있음

                       3가지 인수를 가지고있음 next는 다음 함수 호출

const handlehome = (req, res, next) => {

next( );

}

app.get("/" handleshome, handle) //hanldehome 실행 후 handle실행

6.app.use() //global middleware 만들 수 있게 해줌 

어느 URL(모든 Route)에도 동작하는 middlewrae

순서는 app.get 위에 사용해야 함

app.use(); // global middleware 만들어 줌 

app.get();

 

 

7.서버 // request listening함

브라우저 통해서 웹사이트에게 하는 모든 상호작용 request 행동을 listening하고있음

컴퓨터 전체를 listen 할 수 없음 port가 있어야함

port 4000 리슨 지정 해놓으면 4000만 리슨

url로 request전달

8.모든 controller req, res 갖고잇다. express 로부터 함수에게 전달되어 받음

arrow function{}이 없고 한 줄 일때 return 생략가능

응답은 항상 필 수 file, redirect,text,statucode 등 안해주면 브라우저 계속 로딩

마지막 contorller 에는 next(); 안적음

controller: URL called 사용되는function

method : 클래스내 function

morgan:  HTTP request logger middleware for node.js ,

npm i morgan

설치후 import morgan from "morgan"

const logger = morgan("dev"); //dev, common,short,combined

app.use(logger);