엘리스 27일차 화요일 온라인강의 express.js

치즈말랑이·2022년 5월 11일
엘리스
0

엘리스

목록 보기
28/47
post-thumbnail

00

NPM 설명
1) NPM이란 Node.js 프로젝트를 관리하기 위한 도구이다.
2) 다양한 라이브러리 및 도구 설치나 프로젝트의 의존성을 관리하기 위한 명령어를 제공한다.
3) npm install [package-name] --global명령어를 이용해 패키지를 전역 패키지 디렉퇴에 내려받을 수 있다.
4) NPX를 이용하면 NPM 패키지를 설치하지 않고 사용할 수 있다.

Express.js 설명
1) Node.js의 웹프레임워크로 필요에 따라 유연한 구조 설정이 가능하다.
2) 다양한 미들웨어를 통해 필요한 기능을 간단하게 추가할 수 있다.
3) 모든 동작이 명시적으로 구성되기 때문에 웹 프레임워크의 동작 방식을 이해하기 좋다.
4) app 라우팅 혹은 Express.Router와 같은 방식으로 라우팅을 제공한다.

01

NPM

Node Package Manager

Node.js 프로젝트를 관리하는 필수적인 도구 -> 온라인 저장소 + 커맨드라인 도구
필요한 라이브러리나 도구를 손쉽게 검색 가능

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

npm init
프로젝트 디렉토리를 생성하고 해당 디렉토리 안에서 npm init명령어를 사용하면 package.json 파일이 생성되고 이 디렉토리는 Node.js 프로젝트가 된다.
npm init -y 하면 모든 질문 yes 디폴트값

package.json

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

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

프로젝트가 실행되기 위해 라이브러리에 의존하기 때문에 이런 라이브러리들을 dependency라고 함
라이브러리

  • 특정 기능을 수행하는 코드의 묶음.
  • 복잡한 기능을 직접 작성하지 않고 다른사람이 구현한 것을 사용
  • Node.js에서는 패키지라고 부름

npm install or npm i

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

npm install [package-name]
필요한 패키지를 프로젝트에 추가할 수 있음
추가된 패키지는 package.json의 dependencies안에 추가되며 node_modules 디렉토리에 저장됨

install [package-name] --save-dev
npm은 개발용 의존성을 분리하여 관리할 수 있음
개발용 의존성: 배포 전까지만 사용하는 의존성 ex) 유닛 테스트 라이브러리
개발용 의존성은 package.json의 devDependencies에 추가됨

package-lock.json

프로젝트에 의존성을 추가하면 package-lock.json이라는 파일 생성됨
package.json에는 자동으로 ^최신버전으로 추가되는데, 의존성버전이 그렇게 변경되면 에러가날수도있어서 현재 설치된 버전을 기록하는 용도로 사용한다. 그래서 npm install하면 이 파일을 기준으로 설치함

의존성 버전 표기법
npm install [package-name]@[version]으로 패키지 버전을 지정할 수 있다
ex)
~1.13.0 : 1.13.x 버전 설치
^1.13.0 : 1.x.x 버전 설치, 가장 왼쪽의 0이 아닌 버전을 고정
0.13.0 : 0.13.0 버전 설치

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

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

npm install --production
프로젝트를 배포할때는 개발용 의존성을 포함할 필요가 없음
package.json의 dependecies만 node_modules에 내려받음

npm install [package-name] --global
패키지를 전역 패키지 디렉토리에 내려받음
주로 프로젝트에 종속되지 않는 커맨드라인 도구들을 전역패키지로 추가해서 사용
ex) exxpress-generator

프로젝트 의존성이 package.json내에 명시적으로 선언되어있는 것이 프로젝트 관리의 좋은 방향이다.

npm remove [package-name]
의존성 패키지를 삭제할 수 있음

스크립트 실행하기

간단한 동작을 수행하는 코드
package.json의 scripts에 선언된 스크립트를 npm run [script-name] 명렁어로 실행할 수 있음

run을 제외하고 사용할 수 있는 주요 스크립트들이 있다.
test - 코드 유닛 테스트 등에 사용
start - 프로젝트 실행
stop - 프로젝트 종료

NPX

npm패키지를 설치하지 않고 사용할 수 있게 해주는 도구
프로젝트에 추가하거나 전역패키지로 추가하지 않고 바로 실행

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

npx를 사용하면 Node.js의 특정 버전을 사용하여 js 파일을 실행할 수 있음
프로젝트의 Node.js 버전 별 실행환경을 확인할 때 유용

모듈

코드를 분리하는 방법
패키지: 모듈의 모음
npm 패키지: 많은 모듈을 포함하고 있는 코드 모음

Node.js의 기본 제공 모듈 - console

브라우저에서 제공되는 console과 유사한 디버깅 도구
log, warn, error 함수로 로그 레벨 표시
time, timeLog, timedEnd 함수로 시간 추적

Node.js의 기본 제공 모듈 - process

현재 실행프로세스 관련 기능 제공
arch, argv, env 등 실행 환경 및 변수 관련 값 제공
abort, kill, exit 등 프로세스 동작 관련 함수 제공

Node.js의 기본 제공 모듈 - fs

readFile, writeFile 함수로 파일 읽기, 쓰기

  • Sync 함수 제공, 동기 동작
    watch로 파일/디렉토리 변경 이벤트 감지

Node.js의 기본 제공 모듈 - http

http 서버, 클라이언트를 위해 사용
createServer 함수로 서버 생성
Request 함수로 http 요청 생성

모듈 작성과 사용

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

// 표현법 1
module.exports = {
	name,
  	age,
  	nnationality,
}

// 표현법 2 named-module
exports.name = name;
exports.age = age;
exports.nationality = nationality;

// 표현법 3 function-module
module.exports = (name, age, nationality) => {
	return {
    	name,
      	age,
      	nationality,
    }
}
-------------------------------------
  const student = require('./elice');
//  student 출력값: {name: 'elice', age: 5, nationality: 'korea'}

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

require 함수를 통해 모듈을 load할 수 있음
C에서 include, Java에서 import와 유사
require 할때 모듈 코드가 실행됨
첫 require시에 cache, 두번 실행되지 않음
여러번 실행되려면 함수모듈로 작성

ES Module

Es6에서 등장한 자바스크립트의 공식 표준 모듈
원래는 자바스크립트에서 모듈 제공하지않았고 node.js에서 common.js라는 독자적인 방식을 통해 모듈을 지원하고 있었다.
ES module과 commonjs는 문법과 기본적인 동작 방식이 달라서 잘사용안한다

02 웹과 express.js

계층적 구조의 라우터를 사용할 때 라우터의 선언시
Router({mergeParams: true}) 를 사욯애야 이전 라우터에서 전달된 path parameter를 사용할 수 있다.

웹 서비스는 기본적으로 HTTP 요청과 응답의 반복으로 이루어짐
요청: 어떤 데이터가 필요한지 서버에게 알림
응답: 요청에 해당되는 적절한 데이터 전달

CSR: Client-Side-Rendering 프론트엔드에서 사용자가 페이지에서 보는 동적인 부분을 대부분 처리하는 방식
SSR: Server-Side-Rendering 백엔드에서 페이지 대부분의 영역을 처리해서 프론트엔드로 전달하는 방식

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

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

라우팅

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

HTML Templating

SSR을 구현하기 위한 방법 제공
미리 페이지의 뼈대 작성

Express.js - Node.js의 가장 유명한 웹 프레임워크
Koa.js - 현대적인 JavaScript적극적으로 사용
Nest.js - TypeScript를 사용하며 고정된 구조 사용

express.js

다양한 미들웨어를 통해 필요한 기능을 간단하게 추가 가능
모든 동작이 명시적으로 구성되기 때문에 웹프레임워크의 동작 방식을 이해하기 가장 좋은 프레임워크

  1. npm init으로 시작
    1) npm init
    2) npm i express
  2. express-generator
    프로젝트 생성기: 기본구조를 자동으로 생성해줌 -> 빠르게 프로젝트를 시작하기 좋음
    1) npm i -g express-generator
    2) express myapp
    3) cd myapp
    4) npm i
    5) npm start
    npx를 써도 된다

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.ejs

app.js

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

app.use(): 미들웨어를 사용하기 위한 함수
app.listen(): http 서버를 생성해주는 함수
app.locals: app에서 사용할 공통 상수

라우팅

app 라우팅

app 객체에 직접 get, post, put, delete 함수를 사용하여 HTTP method로 라우팅 할 수 있음
첫번째 인자가 라우팅을 실행할 URL, 마지막 인자가 이 라우팅이 실행될때 작동하는 함수
all 함수를 사용하면 http method에 상관없이 라우팅
app.get, app.post, app.put, app.delete, app.all

Express.Router

app 라우팅은 라우팅의 핵심인 그룹화를 지원하지 않음
Express.Router를 통해 라우팅을 모듈화 할 수 있음
app라우팅이랑 생긴거랑 기능 다 똑같음
작성한 라우터 모듈을 app.use에 연결해서 쓴다.

path parameter

Express.js 라우팅은 path parameter제공

Request Handler

라우팅에 적용되는 함수를 Request Handler라고 부름
HTTP 요청과 응답을 다룰 수 있는 함수로 설정된 라우팅 경로에 해당하는 요청이 들어오면 Request Handler 함수가 실행됨


profile
치즈말랑이
공부일기
이전 포스트

엘리스 26일차 월요일 실시간강의 Node.js

다음 포스트

엘리스 28일차 수요일 실시간강의 express.js, mongodb

0개의 댓글