멋쟁이사자처럼(명지대) 4주차(서버파트수업)

Crmal·2022년 5월 26일
APIRestfulbabelexpresshttpmiddelwarenode.js멋쟁이사자처럼(명지대)
0

멋쟁이사자처럼(명지대) 세션

목록 보기
4/4

4주차

서버

  • 클라이언트와 서버

  • 웹에서의 클라 서버

    • 클라 : 네트워크로 연결된 서버로부터 정보를 제공받는 컴퓨터

    • 서버 : 클라이언트의 요청에 응답하는 컴퓨터나 프로그램

노드의 사용

  • 네이버, 카카오, 넷플릭스, 에어비앤비, 우버, 나사 등

1. 노드

💡  Node.js는 Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임.

JS 런타임 = “ 자바스크립트 실행기 “ = 서버 역할 수행 o = 서버 x

  • 자바스크립트는 웹브라우저에서만 실행되는 언어 (개발자도구 console창, html속 script태그)
    • 노드를 통해 컴퓨터에서도 자바스크립트가 실행될 수 있게 됨.
  • 노드의 장점
    • js 기반 = 하나의 언어로 웹 사이트를 개발할 수 있기 때문에 생산성이 높음

2. 노드 기능

내장객체

  • global, console, 타이머
  • exports, this
  • 모듈, 순환 참조
  • process

내장 모듈

  • os, path
  • url, querystring
  • crypto, util
  • worker_threads
  • child_process

3. 모듈, 패키지, 라이브러리, 프레임워크

모듈

함수들의 집합

라이브러리

패키지들의 집합

패키지

모듈을 모아놓은 폴더, 코드의 집합

프레임워크

기능이 구현된 패키지

  • 프레임워크
    • 반복적으로 어디에서나 등장하는 일들을 처리할때 더 적은 코드 지식으로 더 많은 일을 보다 안전하게 처리할 수 있도록 해주는 기능/ 도구
    • 프레임워크가 미리 정성껏 구현해놓은 기능을 사용하면 웹사이트 개발자는 웹사이트의 개성에 집중할 수 있도록 만들어진 반제품이 프레임워크

4. 패키지 매니저

npm

  • node package manager
  • 패키지 매니징한다는 건 패키지를 설치 또는 버전관리를 할 수 있다는것. 리액트도 하나의 패키지.
  • 외부 라이브러리가 필요하면, 소스코드를 우리의 프로젝트 안에 넣어 놓고 필요한 것은 임포트해서 써야 한다. 라이브러리 패키지들을 관리할 수 있게 도와주는게 npm

npx

  • 원하는 라이브러리를 실행할 수 있게 도와주는 것 즉, npm은 설치, 업데이트라면 npx는 원하는 패키지를 실행할 수 있도록 도와주는 툴

nvm

  • Node Version Manager
  • 협업을 할 때, 또는 다양한 프로젝트를 동시에 진행해야 할 때
    다양한 라이브러리 / 프레임워크 / 개발툴의 버전 호환 문제 해결가능
    - 컴퓨터에 다양한 버전의 Node.js 를 설치할 수 있게 해줌
    - 디폴트 버전을 설정하거나 / 설치한 버전들의 전체 리스트를 확인하거나 / 필요 없는 버전을 삭제하는 등등... 소위 버전 관리가 쉬워짐

yarn

  • 페이스북에서 만든 패키지 매니저
  • npm보다 빠르고 효율적인 캐시 시스템 + 부가 기능 제공

package.json

  • 설치한 패키지의 버전 관리 를 위한 버전 기록용 파일

    • 현재 프로젝트에 대한 정보와 사용중인 패키징 대한 정보를 담은 파일
    • 같은 패키지라도 버전별로 기능이 다를 수 있으므로 버전을 기록해두어야함
    • 동일한 버전을 설치하지 않으면 문제가 생길 수 있음

  • 노드 프로젝트를 시작전에 폴더 내부에 무조건 package.json을 만들고 시작해야함 : yarn init

  • npm, yarn이 package.json을 만드는 명령어 제공

  • entry point

    • 자바스크립트 실행 파일 진입점
    • 보통 마지막으로 module.export를 하는 파일을 지정
    • package.json의 main속성에 저장됨

package.json

파헤치기

패키지를 설치하고, 불러와봅시다.

설치할 패키지 : express, nodemon

package.json이 있는 폴더의 콘솔에서 입력

  • yarn add express
  • yarn add -D nodemon

dependencies

설치한 패키지들이 dependencies속성에 기록됨

devDependencies

설치한 개발용 패키지가 기록됨

실제 배포 시엔 사용되지 않고 개발 중에만 사용되는 패키지

Scripts

scipts태그 안에 실행할 명령어를 넣으면
yarn 으로 파일 또는 노드 프로젝트를 실행할 수 있음

패키지 버전 정보

  • major 하위 호환이 되지않는 변경사항 0이면 초기 개발중. 1부터 정식 버전
  • minor 하위 호환이 되는 변경사항
  • patch 간단한 버그 수정

5. 노드 실행 및 실습

  • 노드 REPL : node
  • 노드 프로젝트 시작 : yarn init
  • 노드 프로젝트 바로 시작 : yarn init -y
  • 노드 파일 실행 : node 파일명
  • 노드 패키지 설치 : yarn add 패키지명
  • 노드 개발용 패키지 설치 : yarn add -D 패키지명
  • 노드 package.json에 작성된 패키지 전체 설치 : yarn install

Nodemon

node monitor, 개발을 편리성을 높여주는 모듈.

  • 이 확장 모듈을 이용하면 노드가 실행하는 파일이 속한 디렉터리를 감시하고 있다가
    개발 중인 노드 애플리케이션의 소스 코드를 수정할 때마다 자동으로 노드 애플리케이션을 재시작하여
    수정 때마다 매번 노드 명령어를 통해 새로 시작할 필요가 없어
    개발할 때 좀 더 편리하게 해주는 확장 모듈

Babel

“ 변 환 “ : 고차 → 저차 js

  • 정의 ECMAScript 2015+ 코드를 현재 및 과거의 브라우저와 같은 환경에서 호환되는 버전으로 변환하는데 주로 사용되는 도구
  • 사용법

    1. 설치 : yarn add -D @babel/core @babel/node @babel/preset-env

    2. 설정 :

      1. 최상단 경로에 .babelrc 생성
      //.babelrc
{
  "presets": ["@babel/preset-env"]
}.

      b. package.json scripts에 추가

      //package.json
...
"scripts": {
    "dev": "nodemon src/index.js --exec babel-node"
  }
...

ES6 이전 import

const 모듈/패키지명 = require("모듈/패키지");

ES6 import

import 모듈/패키지명 from "모듈/패키지";

ES6 이전 export

module.exports 모듈/패키지;

ES6 export

export default 모듈/패키지;

Express

노드 위에서 동작하는 프레임워크

  • 미들웨어
  • Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크
  • 사용이 편리하여 노드에서 가장 보편적으로 사용되는 프레임워크 중 하나
  • node_modules
    • express 가 의존하는 패키지들
    • 의존관계가 복잡하기 때문에 package.json이 필요
    • package.json만 있으면 그대로 설치(yarn, npm)하면 되기 때문에 node_modules는 커밋하지않고, 보관할 필요도 없음
    • yarn install

만들어보자 !

1. HTTP

HTML 을 주고받는 프로토콜

Request 와 Response

Request : 웹 브라우저(클라이언트)를 통해 서버에 요청하는것

Response : 서버에서 웹 브라우저(클라이언트)에 응답하는 것

HTTP 메서드

method의미
GETRead데이터 조회
POSTCreate요청 데이터 처리, 주로 데이터 등록에 사용
PUTUpdate데이터 수정(전체 수정)
DELETEDelete데이터 삭제
PATCHUpdate데이터 수정(부분 수정)

HTTP response code

  • 200번대 : 성공
  • 300번대 : 리다이렉션
  • 400번대 : 클라이언트 에러
  • 500번대 : 서버 에러^^

API

  • 프로그램과 프로그램을 연결시켜주는 매개체

REST (a.k.a RESTful)

2. Express의 미들웨어, 라우터, 모듈화

1) Express 서버 실행

  • 본인 컴퓨터에서 서버를 실행시킨다는건 어떤건지 → 모든 컴퓨터는 서버(Server)의 역할을 할 수 있는 능력을 가지고 있다.
    로컬 서버란 말 그대로 내 컴퓨터에서 프로젝트의 서버 환경을 구성한다는 의미
const express = require("express");

const app = express();
const port = 3000;

app.get("/", (req, res) => {
  res.send("Hello World!");
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);

2) 미들웨어 = 요청과 응답의 중간에 위치한 함수

미들웨어 함수는 요청 오브젝트 (req), 응답 오브젝트(res), 그리고 애플리케이션의 요청-응답 주기 중 그 다음의 미들웨어 함수 대한 액세스 권한을 갖는 함수입니다.

var express = require('express');
var app = express();

app.get('/', function (req, res) {
  res.send('Hello World!');
});

app.listen(3000);
var express = require('express');
var app = express();

app.get('/', function (req, res) {
  res.send('첫 번째 미들웨어');
}, function (req, res) {
	res.send('두번째 미들웨어');
});

app.listen(3000);

그 다음의 미들웨어 함수는 일반적으로 next라는 이름의 변수로 표시됩니다.

  • next를 호출해야하는 경우 : 다음 미들웨어로 넘어가지 않는 경우
  • next = 다음 미들웨어로 넘어가는 함수
var express = require('express');
var app = express();

app.get('/',function(req,res)
{
  res.send('Hello World!');
});

app.listen(3000);

var express = require('express');
var app = express();

app.get('/',function(req,res,next)
{
	console.log("abc");
	next();
});

app.listen(3000);

- 실행

  • app.use(미들웨어) → 모든 요청에서 미들웨어 실행 (주소와 상관없이)
  • app.use(’/abc’, 미들웨어) → abc로 시작하는 ((모든)) 요청에서 미들웨어 실행
  • app.post(’/abc’, 미들웨어) → abc로 시작하는 POST 요청에서 미들웨어 실행

- 에러처리 미들웨어

  • 반드시 매개변수가 네 개
    • 모든 매개변수를 사용하지 않더라도 매개변수가 반드시 네 개
  • 특별한 경우가 아니면 가장 아래에 위치
  • express가 기본적으로 에러처리해주긴함
app.use((err, req, res, next) => {
	console.error(err);
	res.status(500).send(err.message);
});

결론 미들웨어는, 요청과 응답의 중간에 위치한 함수

클라이언트에게 요청이 오고 그 요청을 보내기 위해 응답하려는 중간에 목적에 맞게 처리를 하는, 거쳐가는 함수

- 미들웨어와 라우터의 차이

미들웨어 : 요청과 응답의 중간에 위치한 함수

var express = require('express');
var app = express();

app.get('/', function (req, res) {
  res.send('Hello World!');
});

app.listen(3000);

라우터 : 특정 주소에 들어오는 애를 처리

var express = require('express');
var app = express();

app.get('/', function (req, res) {
  res.send('Hello World!');
});

app.listen(3000);

라우터 분리 예제 실습

실습

힌트

Express basic routing

  • 예시 배열
const movies = [
  {
    id: 1,
    title: 'Avengers',
  },
  {
    id: 2,
    title: 'Spider-man',
  },
  {
    id: 3,
    title: 'Harry Potter',
  },
];
profile
Crmal
이전 포스트

멋쟁이사자처럼(명지대) 3주차 수업

1개의 댓글

comment-user-thumbnail
이재윤
2022년 6월 21일

깔끔하네요

답글 달기