[wetube] #2.2~#2.5

6mn12j·2020년 8월 24일

WeTube

목록 보기

3/12

+ 이 글은 노마드 코더의 [유튜브 클론 코딩] 내용을 담고 있습니다.

NPM(Node Package Manager)

NPM 이란 중앙 집중화의 개념으로 node.js 와 관련된 package 들을 모아놓은 world 로 npm install 이란 명령어를 통해서 다양한 프로그램들을 받고,업데이트가 가능하다.
https://www.npmjs.com/

node.js 다운받을때 npm은 같이 다운로가 된다.

package manager로 npm 사용하기

$ npm init

package name
version
description
entry point
test command
git repository
keywords
author:
license:

여러가지 질문에 답하고 나면 json.package 파일이 만들어진다

$ npm install express

expres설치 시 package.json 이 있는 폴더에 설치해줘야 한다.
node_modules 폴더와 package-lock.json 파일이 추가됨

dependencies
프로젝트가 생존하는 방식?
패키지의 배포 시 포함될 의존성 모듈을 지정하는것 . 이 프로그램을 사용하려면 express 프로그램이 필요.

Your First Express Server

const express = require('express')

require 은 node module을 어딘가에서 가져오는 역할.
express파일을 내 파일에서 찾는다 없다면 node_modules에서 찾아서 가져온다.

Express js

$ npm install express

프로젝트에서 express를 쓰는 방법은 간단하게

express 를 호출 파일에서,node_modules 에서 import 해온다
app 변수를 이용해서 express를 실행
app에게 포트번호(4000번)을 listen 해준다

const express = require('express'); //ES6 import express from "express";
const app = express(); //app변수에 express를 실행

const PORT = 4000;

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

app.listen(PORT,handleListening);

Handling Routes with Express

GET
POST

기본적으로 웹사이트에 접속 할때 브라우저는 GET method를 통해서 브라우저가 페이지를 읽어온다 웹사이트에 로그인하게 되면 POST method를 통해서 브라우저가 웹사이트에게 로그인 정보를 POST request를 만들어서 전달한다.

우리가 정보를 얻고자 할때 (누가 페이지를 요청했는지, 어떤 종류의 데이터가 페이지로 전송됐는지) request object를 이용할 것이다.아이디와 패스워드를 이 URL에 POST 방식으로 보낸다면, 서버에서는 request object로 그 정보를 얻을 수 있는 것이다.

그리고 res.send로 GET request에 대한 응답을 할 수 있다.

나중에는 console.log가 아닌 다양한 route를 통해서 html, css 파일을 보내야 한다.

const handleHome = () => console.log("Hi from home");

app.get("/",handleHome);//main url

console.log 는 메시지를 출력 했지만 사이트는 계속 Loading 중이다.
->request는 있는데 그에 대한 response가 없는 경우 Loading이 계속 뜸(내가 만든 서버로 응답을 하거나,에러를 띄어줘야함)

2가지를 호출 request object ,response object

import express from "express";
const app = express(); //app변수에 express를 실행

const PORT = 4000;

function handleListening(){
    console.log(`Listening on : http://localhost:${PORT}`);
}
function handleHome(req, res) {
     console.log(req);
     res.send('Hello from home'); 
}

function handleProfile(req,res){
    res.send("Hello Profile");
}

//route 생성
app.get("/",handleHome);//main url

app.get("/profile",handleProfile);

app.listen(PORT,handleListening);

ES6 on NodeJS using Babel

Babel은 최신의 JavaScript 코드를 예전의 JavaScript 코드로 변환해준다.
Babel은 많은 Loader가 있어 여러가지 방법으로 사용이가능하다. 우리는 Babel node를 사용 한다.

$npm install @babel/node

babel 엔 여러 stage가 있다.만약 stage3의 babel 을 이용한다면 브라우저는 절반정도 받아 들인다.stage0의 경우엔 완전 실험적인 코드를 얻을 것이다.사용할 수 있는 많은 Preset이 있는데 우리가 사용할 것은 가장 최신이지만, 실험적인 수준은 아닌 -env이다.

$ npm install @babel/preset-env

.babelrc 파일을 만들고 node.js와 JS에 관련된 필요한 설정들을 이 파일에 넣는다.어떤 preset을 가질지 정할 것이다.babel이 실행 되기 전 이 파일에서 babel이 어떻게 설정 되어있는지를 이해한다.

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

패키지 설치할때 dependencies와 별개로 설치 하는법

$ npm install nodemon -D

package.json 파일에 devDependencies에 추가된 nodemon 을 볼 수 있다. 프로젝트가 필요한게 아니라, 나 ,개발자가 필요한 경우에 install 뒤에 -D 를 써준다.

 "devDependencies": {
    "nodemon": "^2.0.4"
  }

Nodemon

수동으로 서버를 켜고 끄는게 아니라 저장할때마다 서버가 다시 켜지게 해주는 패키지.
프로그램 실행할때 필요한게 아니라 프로그래머 에게 필요한 패키지로 -D 를 뒤에 붙혀서 install 해주면,dependencies 와 별개의 entrypoint 생성 하여 devDependencies 포함 된다.