[엘리스] 6주차-1 복습 정리 2

Hyejis·2023년 2월 3일
node.js엘리스
0

엘리스

목록 보기
10/11

Node.js와 MongoDB

2. Express

1) 웹

World Wide Web, 인터넷 상에서 동작하는 모든 서비스
∨ 웹 브라우저로 접속해서 이용하는 서비스, 웹 사이트

웹 서비스 동작 방식

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

  • HTTP 요청: 사용자가 어떤 데이터가 필요한지를 서버에게 알리는 역할
    어떤 사용자가 어떤 데이터를 필요로 하는지 담고 있다.

  • HTTP 응답: HTTP 요청에 해당하는 적절한 데이터를 전달하는 역할
    사용자가 요청한 데이터와 어떤 데이터가 전송되는지 등을 담고 있다.

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

  • 프론트엔드
    사용자가 직접 사용하게 되는 웹페이지를 주로 담당 = 클라이언트

  • 백엔드
    사용자에게 보이지 않는 데이터 가공 등의 기능을 주로 담당 = 서버

웹 종류

  • 정적 웹: Web1.0
    사용자와 상호작용하지 않는 페이지 - 단방향 통신
    Link를 통한 페이지 이동 정도만 가능하며 일반적으로 변하지 않는 html 파일로 제공

  • 동적 웹: Web2.0
    사용자와 상호작용 - 양방향 통신
    사용자가 다양한 기능을 수행할 수 있으며 프론트와 백이 유기적으로 통신하며 동작
    현대적인 웹은 대부분 동적 웹

동적 웹 구현 방법

  • CSR(Client-Side-Rendering)
    프론트엔드에서 사용자가 페이지에서 보는 동적인 부분을 대부분 처리하는 방식
    프론트가 대부분의 리소스를 가지고 페이지를 표현
    백과 API 통신으로 데이터만 교환, 빠른 반응이지만 페이지의 내용은 API 호출이 완료된 후에 보여진다.
    복잡한 프로젝트 구성, 큰 개발 사이즈

  • SSR(Server-Side-Rendering)
    백엔드에서 페이지 대부분의 영역을 처리해서 프론트로 전달하는 방식
    프론트는 HTTP 응답을 받아 화면에 표시, 백엔드에서 HTML 파일을 작성해 프론트엔드로 전달
    백에서 필요한 데이터가 포함된 페이지를 만들어 HTTP 응답에 전달, 상대적으로 로딩이 느림
    페이지 이동 시 재로딩하므로 페이지 깜빡임
    쉬운 구성, 작은 개발 사이즈

웹 서비스는 HTTP 요청과 응답으로 동작
클라이언트 -> HTTP 요청 -> 서버, 서버 -> HTTP 응답 -> 클라이언트
프론트엔드: 클라이언트 담당, 백엔드: 서버 담당
CSR: 동적웹을 클라이언트에서 주로 담당
SSR: 동적웹을 서버에서 주로 담당

2) 웹 프레임워크

웹 서비스에 필요한 기능들을 제공해주는 다양한 도구들의 모음
프레임워크를 사용해 정형화된 부분을 간단하게 구현
-> 필요한 부분만 집중해서 개발 가능

웹 프레임워크 기본 구성요소

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

  • HTTP 요청 처리: 어떤 사용자로부터 어떤 데이터에 대한 요청이 수신되었는지 처리

  • HTTP 응답 처리: 응답 데이터가 어떤 형식이며, 응답 상태가 정상적인지 처리

  • 라우팅: HTTP 요청에 따라 알맞은 응답을 보내주는 경로를 설정
    HTTP 요청을 분기하는 방법으로 HTTP 요청 URL에 해당하는 알맞은 응답의 경로를 미리 설정

  • HTML Templating: SSR을 구현하기 위한 방법을 제공
    SSR에서 응답으로 보낼 HTML을 서버에서 작성하기 위해 미리 페이지의 뼈대 작성 가능

node.js의 웹 프레임워크

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

웹 프레임워크: 웹서비스를 빠르게 구성하기 위해 사용하며
HTTP 요청, 응답, 라우팅, HTML Templating 등의 기능 제공

3) Express.js

Node.js의 웹 프레임워크 중 가장 유명한 웹 프레임워크로 필요에 따라 유연하게 구조 설정 가능
다양한 미들웨어를 통해 필요한 기능을 간단하게 추가 가능
모든 동작이 명시적으로 구성 -> 웹 프레임워크의 동작 방식을 이해하기에 가장 좋다.

Express.js 시작하기

npm i express: Express.js를 처음부터 작성할 수 있는 방법으로 직접 모든 구조를 작성해야 한다.

mkdir mine
cd mine
npm init
npm i express
// index.js
const express = require('express')'
const app = express();
app.get('/', (req, res) => {
  res.send("hello express");
});
app.listen(3000, () => {
  console.log("SERVER STARTED");
})
// package.json
{
  "scripts":{
    "start": "node inedx.js",
  },
}
npm start
// 브라우저에 localhost:3000 입력
  • express-generator: 프로젝트의 기본 구조를 자동으로 생성
npm i -g express-generator
express myWeb
cd myWeb
npm i
npm start // 브라우저에 localhost:3000 입력

Express.js는 espress-generator라고 하는 프로젝트 생성기를 제공
빠르게 프로젝트를 시작할 수 있으며 npm start로 실행 가능 하다.

  • npx + express-generator: 설치하지 않고 바로 사용 가능
npx express-generator myWeb
cd myWeb
npm i
npm start

express-generator는 프로젝트 생성 이후엔 사용되지 않으므로 npx 사용도 좋은 방법이다.

5) Express.js의 구조

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

6) Express.js 동작 방식

express-generator로 만들어진 프로젝트 디렉터리에 접근하여 npm start로 express.js 프로젝트를 실행할 수 있다.
localhost:3000에 접속해 Welcome to Express 페이지를 확인할 수 있다.

  • 개요
    브라우저에서 localhost:3000 접속 시
    app.js에서 app.use('/', indexRouter);가 실행되어
    routes/index.js에서 router.get('/',...) -> res.render('index',...) 실행
    views/index.jade 파일이 실행된다.

app.js

express()로 생성되는 app 객체를 확인

var express = require('express');

var app = express();

app 객체는 express.js의 기능을 담은 객체로 express.js의 모든 동작은 app 객체에 정의된다.

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

라우팅

  • app 라우팅: app 객체에 직접 get, post, put, delete 함수를 사용해 HTTP method로 라우팅
    그룹화를 지원하지 않는다.
app.get('/', (req, res) => {	// app 라우팅을 실행할 URL
  res.send('GET /');		// app 라우팅이 실행될 때 작동하는 함수
});
// get자리에 post, put, delete, all(any)가 들어갈 수 있다.

all 함수 사용 시 HTTP method에 상관없이 라우팅 가능하다.

app.all('/all', (req, res) => {	// app 라우팅을 실행할 URL
  res.send('ANY /');		// app 라우팅이 실행될 때 작동하는 함수
});
  • Express.Router: get, put, post, delete 함수를 사용할 수 있다.
    라우팅을 모듈화할 수 있다.
const express = require('express');
const router = express.Router();

router.get('/', (req, res, next) => {	// 라우팅될 URL
  res.send('res');		// 라우팅 시 실행될 함수
});
module.exports = router;	// 라우터는 일반적으로 모듈로 만들어 사용

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

// 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;

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

  • path parameter
    Express.js 라우팅은 path parameter를 제공 -> 주소의 일부를 변수처럼 사용 가능
    /users/:id/: /users/123, /users/456 등으로 접속했을 때 라우팅 적용
    /messagaes/:from-:to: /message.123-456등으로 접속했을 때 라우팅 적용

Request handler

라우팅에 적용되는 함수, 요청 확인 및 응답을 보내는 역할
HTTP 요청과 응답을 다룰 수 있는 함수로 설정된 라우팅 경로에 해당하는 요청이 들어오면 Request Handler 함수가 실행

router.get('/:id', (req, res) => {
  const id = reqs.params.id
  res.send(`hello ${id}`);
});
// router나 app의 HTTP method 함수의 가장 마지막 인자로 전달되는 함수

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

  • Request 객체: HTTP 요청 정보를 가진 객체
    HTTP 요청의 path parameter, query parameter, body, header 등을 확인 가능

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

  • Response 객체: HTTP 응답을 처리하는 객체
    HTTP 응답의 데이터를 전송하거나 응답 상태 및 헤더를 설정가능

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

express.js는 app 객체를 시작으로 모든 동작이 이루어진다.
app 객체나 express.Router를 사용해 라우팅을 구현할 수 있다.
Request Handler를 통해 HTTP 요청과 응답을 처리할 수 있다.

profile
Hyejis
프론트를 시작으로 풀스택을 걸쳐 모든 분야를 아우르고 싶은 야망이 살짝 있는 아기 개발자입니다.
이전 포스트

[엘리스] 6주차-1 복습 정리

다음 포스트

[엘리스] 6주차-2 복습 정리

0개의 댓글