교육/엘리스 SW 학습 내용

[엘리스sw] 6주차 1일 - npm과 모듈, Express

꼽파 2024. 1. 28. 20:29

◆ Npm과 모듈

◆ Express

Npm과 모듈

NPM 이해하기

 

NPM

· Node.js 프로젝트를 관리하는 필수적인 도구 (Node Package Manager)

   (온라인 저장소 + 커맨드라인 도구)

 

NPM 온라인 저장소

· 수많은 오픈소스 라이브러리와 도구들이 업로드되는 저장소

· 필요한 라이브러리나 도구를 손쉽게 검색 가능

· Node.js의 인기로, 거대한 생태계를 보유함.

 

커맨드라인 도구

· 프로젝트 관리를 위한 다양한 명령어를 제공

  • 저장소에서 라이브러리, 도구 설치
  • 프로젝트 설정 / 관리
  • 프로젝트 의존성 관리

NPM 사용해보기

NPM을 사용한다는 것은?

· NPM 커맨드라인 도구의 사용법을 익히는 것

· 프로젝트의 생성부터 다양한 기능을 사용하는 법까지 학습

 

프로젝트 생성하기

npm init

·  프로젝트 디렉터리를 생성하고, 해당 디렉터리 안에서 npm init 명령어를 사용하면

·  몇 번의 질문을 통해 package.json이라는 파일을 만들어주고

·  이 디렉터리는 Node.js 프로젝트가 됨

 

package.json

· 프로젝트 관련 정보들이 저장되는 파일

· 이 파일을 직접 수정하거나 npm 명령어를 사용하여 프로젝트 정보를 수정할 수 있음

key value
version 프로젝트의 버전
name 프로젝트의 이름
description 프로젝트 설명
scripts npm run [script name]으로 실행할 수 있는 사용자 작성 스크립트
dependencies 의존성 패키지들
devDependencies 개발환경에서만 사용하는 의존성 패키지들
.
.
.

 

의존성 관리하기

·  프로젝트 내에서 사용하는 라이브러리를 관리하는 방법

·  프로젝트가 실행되기 위해 라이브러리에 의존하기 때문에 이러한 라이브러리들을 dependency(의존성)라고 함.

 

라이브러리

·  특정 기능을 수행하는 코드의 묶음

·  복잡한 기능을 직접 작성하지 않고, 다른 사람이 구현한 것을 사용하는 방법

·  Node.js에서는 패키지라고도 부름.

 

npm install 명령어

· npm install 명령어를 통해 프로젝트 의존성을 관리할 수 있음

· npm install 명령어는 사용방법에 따라 여러 용도로 사용 가능

  (npm i 를 축약형으로 사용 가능)

  • 의존성 추가
  • 의존성 내려받기
  • 개발용 의존성 추가
  • 전역 패키지 추가

 

프로젝트에 의존성 추가하기

npm install [package-name]

·  필요한 패키지를 프로젝트에 추가할 수 있음.

·  추가된 패키지는 package.json의 dependencies 안에 추가되며, node_modules 디렉터리에 저장됨.

 

dependendices와 devDependencies

npm install [package-name] --save-dev

·  npm은 개발용 의존성을 분리하여 관리할 수 있음.

·  개발용 의존성 : 배포 전까지만 사용하는 의존성, 개발 이후 실행환경에서 사용 X (ex. 유닛 테스트 라이브러리)

·  --save-dev 옵션을 이용하면 개발용 의존성을 추가할 수 있음.

·  개발용 의존성은 package.json의 devDependencies에 추가됨.

 

프로젝트에 의존성 내려받기

npm install
  • 기본적으로 node_modules 디렉터리는 코드 관리나 배포 시에 업로드 하지 않음.
  • 의존성이 많아지면 용량이 너무 커지는 것과, 운영체제별로 실행되는 코드가 다른 경우가 존재하기 때문임.
  • npm install 명령어를 아무 옵션 없이 사용하면 package.json에 정의된 dependencies와 devDependencies의 의존성을 node_modules 디렉터리에 내려받음.

 

개발용 의존성을 제외하고 내려받기

npm install --production

프로젝트를 배포할 때에는 개발용 의존성을 같이 포함할 필요가 없음.

package.json의 dependencies만 node_modules에 내려받음.

 

의존성 버전 표기법

npm install [package-name]@[version]
~1.13.0 1.13.x 버전 설치 ~ : 가장 오른쪽 소수점을 제외하고 나머지는 고정
^1.13.0 1.x.x 버전 설치 ^ : 가장 왼쪽의 0이 아닌 버전(1.~~)을 고정
0.13.0 0.13.0 버전만 설치  

 

package-lock.json

· 프로젝트에 의존성을 추가하면

- package-lock.json이라는 파일이 생성됨.

- 자동으로 '^최신버전'으로 추가가 됨

→ 이때, 의존성 버전이 갑자기 변경되지 않도록, 설치된 버전을 고정하는 역할을 함.

 

전역 패키지 추가

npm install [package-name] --global

· 패키지를 전역 패키지 디렉터리에 내려받음

· 커맨드라인 도구들을 주로 전역 패키지로 추가해서 사용 ex) express-generator.pm2

 

로컬 패키지와 전역 패키지

  • 로컬 패키지 : package.json에 선언되어 있고, node_modules에 저장된 패키지
  • 전역 패키지 : npm install -g를 통해 내려받아, 전역 패키지 저장소에 저장된 패키지
  • 전역 패키지도 프로젝트에서 사용할 수 있으나, 프로젝트의 의존성이 package.json 내에 명시적으로 선언되어 있는 것이 프로젝트 관리의 좋은 방향

의존성 삭제하기

nm remove [package-name]

·  의존성 패키지를 삭제할 수 있음.

·  package.json의 dependencies와 devDependencies에서 삭제하고 node_modules에서도 삭제

 

스크립트 실행하기

· 스크립트 : 간단한 동작을 수행하는 코드

· package.json의 scripts에 선언된 스크립트를 npm run [script-name] 명령어로 실행할 수 있음.

{
	...
	"scripts" : {
    	"say-hi" : "echo \"hi"\"
    },
	...
}
npm run say-hi
"hi"

 

npm script를 사용하는 이유

npm script 내에선 의존성 패키지를 사용할 수 있음

"scripts" : {"test" : "node_modules/.bin/tap test/\*.js"}
"scripts" : {"test" : "tap test/\*.js"}

 

자주 사용되는 스크립트

npm 스크립트엔 run을 제외하고 사용할 수 있는 주요 스크립트들이 있음

  • test : 코드 유닛 테스트 등에 사용
  • start : 프로젝트 실행
  • stop : 프로젝트 종료

run을 제외하고 사용할 수 있을 뿐, npm 내부적으로 코드를 제공해주는 것은 아님.

 

npm 요약

명령어 npm init 프로젝트 생성
npm install 의존성 추가
npm remove 의존성 삭제
npm run 스크립트 실행
주요
파일
/디렉터리		 node_modules 프로젝트 의존성 저장 디렉터리
package.json 프로젝트 관리 (버전, 의존성, 스크립트, ...)
package-lock.json 의존성 버전 확인

NPX

NPX란?

npm 패키지를 설치하지 않고 사용할 수 있게 해주는 도구

프로젝트에 추가하거나 전역 패키지로 추가하지 않고, npx를 이용하여 바로 실행할 수 있음.

npm i cowsay -g
cowsay hi
npx cowsay hi

 

NPX - Node.js 특정 버전으로 실행

npx를 사용하면 Node.js의 특정 버전을 사용하여 js 파일을 실행할 수 있음.

프로젝트의 Node.js 버전 별 실행환경을 확인할 때 유용함.

npx node@12 index.js
npx node@14 index.js

 

npx - github gist 코드 실행

gist는 github에 등록된 간단한 코드

npx를 이용하면 gist 코드를 다운받지 않고 바로 실행 가능

git이 설치되어 있어야 함.

온라인상의 코드는 어떤 위험이 있을지 모르므로 코드를 잘 확인하고 실행해야 함.

npx https://gist.github.com/zkat/4bc19503fe9e9309e2bfaa2c58074d32

Node.js 모듈

모듈

모듈 : 코드를 분리하기 위한 방법을 제공해주는 것

간단한 프로그램이라면 파일 하나로도 가능하지만 프로젝트가 커지면 기능에 맞게 코드를 분리하는 것이 중요함.

 

모듈과 패키지

패키지는 모듈의 모음 (모듈 ⊂ 패키지)

npm 패키지들은 많은 모듈을 포함하고 있는 코드 모음

 

Node.js의 기본 제공 모듈

Node.js는 다양한 모듈을 기본적으로 제공함.

기본 제공 모듈은 직접 작성하기 매우 어렵거나 복잡한 로직을 포함한 모듈이 있음.

→ 자주 사용되는 기본 제공 모듈을 학습해야함.

console · 브라우저에서 제공되는 console과 유사한 디버깅 도구
· log, warn, error 함수로 로그 레벨 표시
· time, timeLog, timeEnd 함수로 시간 추적
process · 현재 실행 프로세스 관련 기능 제공
· arch, argv, env 등 실행 환경 및 변수 관련 값 제공
· abort, kill, exit 등 프로세스 동작 관련 함수 제공
fs · 파일 입출력을 하기 위해 사용
· readFile, writeRile 함수로 파일 읽기, 쓰기
· -Sync 함수 제공. 동기 동작
· watch로 파일/디렉터리 변경 이벤트 감지
http · http 서버, 클라이언트를 위해 사용
· createServer 함수로 서버 생성
· Request 함수로 http 요청 생성
url · url 파싱
os · 운영체제 정보 (cpu, memory, type ...)
Path · 디렉터리 string 관련 작업
· 서로 다른 운영체제 간 공통된 로직
crypto · 암호화, hash 관련 함수 제공

https://nodejs.org/dist/latest-v14.x/docs/api/

 

Index | Node.js v14.21.3 Documentation

 

nodejs.org

모듈의 작성과 사용

모듈의 기본적인 작성법

// elice.js
const name = 'elice';
const age = 5;
const nationality = 'korea';

module.exports = {
	name,
    age,
    nationality,
};

---
const student = require('./elice');
// student 출력값 { name: 'elice', age: 5, nationality: 'korea' }

 

모듈이 load될 때 사용될 값을 module.exports로 내보냄.

 

변수명으로 export하는 모듈 작성법

// elice.js
const name = 'elice';
const age = 5;
const nationality = 'korea';

exports.name = name;
exports.age = age;
exports.nationality = nationality;

---
const student = require('./elice');
// student 출력값 { name: 'elice', age: 5, nationality: 'korea' }

모듈을 object로 만들고, 각 key-value를 지정해서 내보냄.

 

함수를 export하는 모듈 작성법

// elice.js
module.exports = (name, age, nationality) => {
	return {
    	name,
        age,
        nationality,
    };
}

---
const student = require('./elice');
// student 출력값 { name: 'elice', age: 5, nationality: 'korea' }

모듈을 함수로 만들어서 모듈 사용 시에 값을 정할 수 있게 내보냄

 

모듈의 사용 방법

· require 함수를 통해 모듈을 load할 수 있음.

· C에서 include, Java에서 import와 유사함.

· 의존성 패키지, 직접 작성한 모듈 사용 가능함.

 

모듈 사용 방법 - require 동작의 이해

· require 할 때 모듈 코드가 실행됨.

· Node.js의 모듈은 첫 require 시에 cache, 두번 실행하지 않음.

· 모듈 코드를 여러 번 실행하기 위해선 함수 모듈로 작성

 

모듈 사용 방법 - npm 패키지

· 의존성 패키지들은 require('package-name')로 load 할 수 있음.

· 패키지를 사용하려면 node_modules에 내려받아져 있어야 함.

const dayjs = require('dayjs');
console.log(dayjs());

 

모듈 사용 방법 - 직접 작성한 모듈

직접 작성한 모듈은 현재 파일과의 상대 디렉터리로 load

  • my-module이 .js 파일인 경우 : 해당 파일 load
  • my-module이 디렉터리인 경우 : my-module/index.js 파일 load
const myModule = require('./my-module');
console.log(myModule);

 

모듈의 사용 방법 - 함수형 모듈

· 함수형 모듈은 load한 경우 모듈이 바로 실행되지 않음.

· 필요한 시점에 load된 함수를 실행하여 모듈을 사용할 수 있음.

const myFunctionModule = require('./my-function-module');
console.log(myFunctionModule(name, age, nationality));

 

모듈의 사용 방법 - json 파일

· require로 json 파일도 load 가능, object로 자동파싱

// my-data.json을 가지고 있음
const myData = require('./my-data');
console.log(myData);

 

모듈의 작성과 사용 요약

  • module.exports를 사용하여 모듈을 작성할 수 있음.
  • require를 사용하여 의존성 패키지, 모듈, json 파일을 사용할 수 있음.
  • 모듈은 첫 require 시에만 실행하고 cache 되므로 여러 번 실행할 모듈은 함수형으로 작성해야 함.
  • 파일 확장자를 생략하게 되면 해당 경로에서 .js 파일 → .json 파일을 호출하게 됨.

ES Module

ES Module

· ES6에서 등장한 JavaScript의 공식적인 표준 모듈
· JavaScript는 기본적으로 '모듈'을 제공하고 있지 않았음.
· Node.js는 독자적인 방식을 통해 모듈을 지원하고 있었음(commonjs).
· ES Module의 등장으로 Node.js에서는 두 가지 모듈을 지원할 필요가 생김.

ES Module과 commonjs
· ES Module과 commonjs는 문법과 기본적인 동작 방식이 다름.
· commonjs는 module.exports와 require로 모듈을 만들고 사용
· ES Module은 export와 import로 모듈을 만들고 사용

어떤 모듈을 사용해야 할까?
· 현재 ES Module은 Node.js에서 기본적으로 사용하기에 제약이 많음.
  (프로젝트 타입을 module로 변경, commonjs 모듈 import 시에 문제 발생 등)

Express

웹의 이해

웹

사전적 의미 : World Wide Web, 인터넷 상에서 동작하는 모든 서비스

일반적 의미 : 웹 브라우저로 접속해서 이용하는 서비스, 웹 사이트

 

웹 서비스 동작 방식

웹 서비스는 기본적으로 HTTP 요청과 응답의 반복으로 이루어짐

HTTP 요청은 사용자가 어떤 데이터가 필요한지를 서버에게 알리는 역할

HTTP 응답은 HTTP 요청에 해당하는 적절한 데이터를 전달하는 역할

  1. 브라우저가 인터넷을 통해 HTTP 요처을 서버에 전달
  2. 서버는 사용자의 HTTP 응답을 브라우저로 전송
  3. 브라우저는 HTTP 응답을 사용자에게 적절한 화면으로 노출

HTTP 요청 예시

GET / HTTP / 1.1
Host: localhost:3000
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:93.0)
Accept: text/html
Accept-Language: ko-KR
Accept-Encoding: gzip, deflate
Connection: keep-alive

HTTP 요청은 사용자가 어떤 사용자가, 어떤 데이터를 필요로 하는지 등을 담고 있음.

 

HTTP 응답 예시

HTTP / 1.1 200 OK
X-Powered-By: Express
Content-Type: text/html; charset=utf-8
Date: Mon, 25 Oct 2021 14:10:25 GMT
Connection: keep-alive
Keep-Alive: timeout=5

HTTP 응답은 사용자가 요청한 데이터와, 어떤 데이터가 전송되는지 등을 담고 있음.

웹 서비스 동작 방식

백엔드와 프론트엔드

  • 프론트엔드 : 사용자가 직접 사용하게 되는 웹 페이지를 주로 담당 = 클라이언트
  • 백엔드 : 사용자에게 보이지 않는 데이터 가공 등의 기능을 주로 담당 = 서버

 

정적 웹과 동적 웹
정적 웹

  • 사용자와 상호작용하지 않는 페이지 (단방향 통신, WEB 1.0)
  • Link를 통한 페이지 이동 정도만 가능
  • 일반적으로 변하지 않는 html 파일로 제공

동적 웹

  • 사용자와 상호작용을 함 (양방향 통신, WEB 2.0)
  • 구글 맵, 웹 채팅, elice.io 등 사용자가 다양한 기능을 수행할 수 있음
  • 프론트엔드와 백엔드가 유기적으로 통신하며 동작
  • 현대적인 웹은 대부분 동적 웹

 

CSR
· Client-Side Rendering
· 프론트엔드에서 사용자가 페이지에서 보는 동적인 부분을 대부분 처리하는 방식

· 프론트엔드가 대부분의 리소스를 가지고 페이지를 표현, 백엔드와 API 통신으로 데이터만 주고받음.

CSR의 특징

  • 사이트가 변하는 부분들을 프론트엔드에서 처리
  • 프론트엔드 코드에 페이지 리소스들이 미리 정의되어 있음.
  • 서버와의 통신은 API 통신을 이용
  • 빠른 반응이지만 페이지의 내용은 API호출이 완료된 후에 보여짐
  • 복잡한 프로젝트 구성, 큰 개발 사이즈


SSR
· Server-Side Rendering
· 백엔드에서 페이지 대부분의 영역을 처리해서 프론트엔드로 전달하는 방식

· 프론트엔드는 HTTP 응답을 받아 화면에 표시, 백엔드에서 필요한 데이터가 포함된 페이지를 만들어서 HTTP응답에 전달

 

SSR 특징

  • 사이트가 변하는 부분들을 백엔드에서 처리
  • 백엔드에서 HTML 파일을 작성해서 프론트엔드로 전달
  • CSR에 비해 쉬운 구성, 작은 개발사이즈
  • 로딩이 완료되면 페이지와 데이터가 한번에 표시됨.
  • 상대적으로 사용자가 보기엔 로딩이 느려보임.
  • 페이지 이동할 때마다 다시 로딩하기 때문에 페이지가 깜빡임.

https://velog.io/@vagabondms/%EA%B8%B0%EC%88%A0-%EC%8A%A4%ED%84%B0%EB%94%94-SSR%EA%B3%BC-CSR%EC%9D%98-%EC%B0%A8%EC%9D%B4

 

[ 기술 스터디 ] SSR과 CSR의 차이

자강두천

velog.io

https://thetombomb.com/posts/rendering-options-on-the-web

 

Rendering Options on the Web: Server, Client, Static

Thomas Desmond Sitecore Developer Advocate August 24, 2021

thetombomb.com

 

웹 서비스 동작 방식 정리

  • 웹 서비스는 HTTP 요청과 응답으로 동작함.
  • 클라이언트는 서버로 HTTP 요청을, 서버는 클라이언트로 HTTP 응답을 보냄.
  • 프론트엔드는 클라이언트를 담당, 백엔드는 서버를 담당함.
  • 현대적인 많은 웹은 동적 웹으로 구현되어 있음.
  • 동적 웹을 클라이언트에서 주로 담당하는 것을 CSR라고 하며, 서버에서 주로 담당하는 것을 SSR이라고 함.

웹 프레임워크

웹 프레임워크

· 웹 : 웹 서비스에 필요한 기능들을 제공해주는 
· 프레임워크 : 다양한 도구들의 모음

 

 

웹 프레임워크를 사용하는 이유
·  웹 서비스를 구성하기 위해서는 매우 많은 기능이 필요하여 직접 만드는 것에는 너무나 큰 비용이 발생함.
·  웹 서비스는 많은 부분들이 정형화되어 있음.
·  프레임워크를 사용하여 정형화된 부분을 간단하게 구현, 필요한 부분만 집중해서 개발할 수 있음.

 

웹 프레임워크의 기본 구성요소
웹 서비스의 정형화된 구성을 많은 웹 프레임워크가 기본적으로 제공함.

  • HTTP 요청 처리
  • HTTP 응답 처리
  • 라우팅
  • HTML Templating


웹 프레임워크 - HTTP 요청 처리

  • 웹 프레임워크는 HTTP 요청을 처리할 수 있음.
    어떤 데이터를 필요로 하는지, 어떤 사용자로부터 요청이 수신되었는지 등
  • 웹 프레임워크는 HTTP 응답을 처리할 수 있음.
    응답 데이터가 어떤 형식인지, 응답 상태가 정상적인지 등


웹 프레임워크 - 라우팅
· 웹 프레임워크는 HTTP 요청을 분기하는 방법을 제공함
· HTTP 요청 URL에 해당하는 알맞은 응답의 경로를 미리 설정

요청 A ---> 라우터 ---> 응답 A

 

HTTP 요청에 따라 알맞은 응답을 보내주는 경로를 설정해주는 일

웹 프레임워크 - HTML Templating
· 웹 프레임워크는 SSR을 구현하기 위한 방법을 제공함
· SSR에서 응답으로 보낼 HTML을 서버에서 작성하기 위해, HTML Template를 통해 미리 페이지의 뼈대를 작성 가능

Node.js의 웹 프레임워크
Node.js에는 다양한 웹 프레임워크가 있음.

  • Express.js : Node.js의 가장 유명한 웹 프레임워크 
  • Koa.js : 현대적인 JavaScript를 적극적으로 사용하는 웹 프레임워크
  • Nest.js : TypeScript를 사용하며, 고정된 구조를 제공하는 웹 프레임워크
  • 기타 : Hapi, Sails.js, Meteor.js 등

 

웹 프레임워크 정리

  • 웹 서비스를 빠르게 구성하기 위해 웹 프레임워크를 사용할 수 있음
  • 웹 프레임워크는 HTTP 요청, 응답, 라우팅, HTML Templating 등의 기능을 제공함.

Express.js 시작하기

Express.js를 사용하는 이유

· Express.js는 Node.js의 웹 프레임워크 중 가장 유명한 웹 프레임워크

· 필요에 따라 유연하게 구조 설정 가능

· 다양한 미들웨어를 통해 필요한 기능을 간단하게 추가 가능

· 모든 동작이 명시적으로 구성되기 때문에, 웹 프레임워크의 동작 방식을 이해하기 가장 좋은 프레임워크

 

npm init으로 시작하기

·  Express.js를 처음부터 작성할 수 있는 방법

·  직접 모든 구조를 작성해야 하기 때문에, Express.js를 처음 접하는 사용자에겐 쉽지 않음.

mkdir my-web
cd my-web
npm init
npm i express
const express = require('express')
const app = express()

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

app.listen(3000);

 

express-generator 사용하기

· Express.js는 express-generator라고 하는 프로젝트 생성기를 제공함.

· express-generator를 사용하면 프로젝트의 기본구조를 자동으로 생성해줌

· 빠르게 프로젝트를 시작하기 좋은 방법

· 생성된 프로젝트는 npm start로 실행 가능함.

npm i -g express-generator
express my-web
cd my-web  // 해당 디렉토리로 이동
npm i
npm start

 

npx + express-generator 사용하기

· npx를 사용하여 express-generator를 설치하지 않고, 바로 사용 가능.

· express-generator는 프로젝트 생성 이후엔 사용되지 않기 때문에, npx를 사용하는 것도 좋은 방법임.

npx express-generator my-web
cd my-web
npm i
npm start
// require함수로 express 모듈 호출
const express = require('express');

// app 객체 생성
const app = express();

// get 라우팅 생성
app.get('/', (req, res) => {
	res.send("hello express");
});

// 3000번 포트에 서버를 열어둠.
// 서버가 열린 후 console이 실행됨.
app.listen(3000, () => {
	console.log("SEVER STARTED");
})

Express.js의 구조

기본구조 알아보기

my-web

app.js Express.js의 가장 기본이 되는 파일, 웹 어플리케이션의 기능을 정의
bin/www Express.js 실행 부분을 담당, 포트와 실행 오류 등을 정의
package.json 프로젝트 의존성 및 스크립트 정의
public 코드를 통하지 않고, 직접 제공되는 파일 디렉터리
routes 라우팅 파일 디렉터리
views HTML Template 디렉터리

Express.js의 동작 방식

Express.js 동작 시켜보기

express-generator로 만들어진 프로젝트 디렉터리에 접근하여,

npm start로 Express.js 프로젝트를 실행할 수 있음.

localhost:3000에 접속하여 Welcome to Express 페이지를 확인할 수 있음.

 

Express.js 동작 따라가기

  1. 브라우저에서 localhost:3000 접속
  2. app.js → app.use('/', indexRouter);
  3. routes/index.js → router.get('/',...
  4. routes/index.js → res.render('index', ...
  5. views/index.jade

 

app.js

· app.js에서는 express()로 생성되는 app 객체를 확인할 수 있음.

· app 객체는 Express.js의 기능을 담은 객체

· Express.js의 모든 동작은 app 객체에 정의됨.

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

 

app객체 - 주요 기능

app.use()  middleware를 사용하기 위한 함수
app.listen() http 서버를 생성해주는 함수
express-generator를 사용하면 http.createServer를 사용하는데 app.listen 함수로 대체할 수 있음.
app.locals app에서 사용할 공통 상수
Express.js에서는 global 변수를 선언하지 않고, 이 값을 사용할 수 있음.

 

라우팅

· Express.js는 다양한 라우팅 방식을 제공함.

→ 크게 app 라우팅과 Express.Router를 통한 라우팅으로 나누어짐.

 

app 라우팅

· app 객체에 직접 get, post, put, delete 함수를 사용하여 HTTP method로 라우트 할 수 있음.

· HTTP method 함수의 첫 번째 인자가 이 라우팅을 실행할 URL

· 마지막 인자가 이 라우팅이 실행될 때 작동되는 함수

· all 함수를 사용하면 HTTP method에 상관없이 라우팅 가능

app.get('/', (req, res) = {
	res.send('GET /');
});
app.post('/', (req, res) = {
	res.send('POST /');
});
app.put('/', (req, res) = {
	res.send('PUT /');
});
app.delete('/', (req, res) = {
	res.send('DELETE /');
});
app.all('/all', (req, res) = {
	res.send('ANY /');
});

 

Express.Router

· app 라우팅을 통해서는 라우팅의 핵심인 그룹화를 지원하지 않음.

· Express.Router를 통해 라우팅을 모듈화 할 수 있음.

 

Express.Router 모듈

· router 객체에도 app객체처럼 get, put, post, delete 함수를 사용할 수 있음.

· app의 함수와 동일한 동작을 하는 함수로 첫 번째 인자가 라우팅 될 URL이고, 마지막 인자가 라우팅 시 실행될 함수

· 라우터는 일반적으로 모듈로 만들어서 사용함.

const express = require('express');
const router = express.Router();

router.get('/', (req, res, next) => {
	res.send('respond with a resource');
});

module.exports = router;

 

Express.Router 사용

· 작성된 라우터 모듈을 app에 use함수로 연결하여 사용할 수 있음.

· router 객체에도 하위 라우터를 use 함수로 연결하여 사용할 수 있음.

Router({ mergeParams: true })
--- ./app.js
const userRouter = require('./routes/users');
const app = express();

app.use('/users', userRouter);

--- ./routes/users.js
const petRouter = require('./pets');
const router = express.Router();

router.use('/pets', petRouter);

module.exports = router;

 

라우팅 - path parameter 사용

· Express.js 라우팅은 path parameter를 제공

· path parameter를 사용하면, 주소의 일부를 변수처럼 사용할 수 있음.

 

ex)

/users/:id : /users/123, users/456 등으로 접속했을 때 라우팅 적용

/messages/:from-:to : /message/123-456 등으로 접속했을 때 라우팅 적용

 

Request Handler

· 라우팅에 적용되는 함수를 Request Handler라고 부름.

· HTTP 요청과 응답을 다룰 수 있는 함수로, 설정된 라우팅 경로에 해당하는 요청이 들어오면 Request Handler 함수가 실행됨.

· router나 app의 HTTP method 함수의 가장 마지막 인자로 전달되는 함수

· 설정된 라우팅 경로에 해당하는 요청이 들어오면 Request Handler 함수가 실행됨.

· 요청을 확인하고, 응답을 보내는 역할을 함.

router.get('/:id', (req, res) => {
	const id = req.params.id
    res.send(`hello ${id}`);
});

 

Request Handler - Request 객체

· HTTP 요청 정보를 가진 객체

· HTTP 요청의 path parameter, query parameter, body, header 등을 확인 가능

 

Request Handler - Request 객체의 주요 값 및 함수

req.params URL 표현 중 /path/:id 에서 :id를 req.params.id로 사용할 수 있음.
req.queries URL 표현 중 /path?page=2 에서 page 부분을 req.queries.page로 사용할 수 있음.
req.body 일반적으로 POST 요청의 요청 데이터를 담고 있음.
req.body에 요청 데이터가 저장되어 들어옴.
req.get('') HTTP Request의 헤더값을 가져올 수 있음.
req.get('Authorization') 등으로 값을 가져옴.

 

Request Handler - Response 객체

· HTTP 응답을 처리하는 객체

· HTTP 응답의 데이터를 전송하거나, 응답 상태 및 헤더를 설정할 수 있음.

res.send() text 형식의 HTTP 응답을 전송함.
res.json() json 형식의 HTTP 응답을 전송함.
res.render() HTML Template을 사용하여 화면을 전송함.
res.set() HTTP 응답의 헤더를 설정함.
res.status() HTTP 응답의 상태 값을 설정함.

 

Express.js 동작방식 정리

·  Express.js는 app 객체를 시작으로 모든 동작이 이루어짐.

·  app 객체나 Express.Router를 사용하여 라우팅을 구현할 수 있음.

·  Request Handler를 통해 HTTP 요청과 응답을 처리할 수 있음.

 

728x90