본 자료는 박민 코치님의 자료와 Elice 플랫폼의 자료를 사용하여 정리하였습니다.

웹의 이해

웹이란?

• 사전적 의미 - World Wide Web, 인터넷상에서 동작하는 모든 서비스
• 일방적 의미 - 웹 브라우저로 접속해서 이용하는 서비스, 웹사이트

웹 서비스 동작 방식

• 웹 서비스는 기본적으로 HTTP 요청과 응답의 반복으로 이루어진다.
• HTTP 요청은 사용자가 어떤 데이터가 필요한지를 서버에게 알리는 역할
• HTTP 응답은 HTTP 요청에 해당하는 적절한 데이터를 전달하는 역할
  

HTTP 요청 예시

• 어떤 사용자가, 어떤 데이터를 필요로 하는지 등을 담고있다.
  

HTTP 응답 예시

• 사용자가 요청한 데이터와, 어떤 데이터가 전송되는지 등을 담고 있다.
  

백엔드와 프론트엔드

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

정적 웹과 동적 웹

정적 웹

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

동적 웹

• Web 2.0
• 사용자와 상호작용을 한다. - 양방향 통신
• 사용자가 다양한 기능을 수행할 수 있다.
• 프론트엔드와 백엔드가 유기적으로 통신하여 등장
  $\rarr$ 현대적인 웹은 대부분 동적 웹

동적 웹의 두 가지 구현방법

CSR (Client-Side Rendering)

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

SSR (Server-Side Rendering)

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

CSR의 특징

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

SSR의 특징

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

웹 프레임워크

웹 프레임워크란?

• 웹 서비스에 필요한 기능들을 제공해주는 다양한 도구들의 모음

웹 프레임워크를 사용하는 이유

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

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

• 웹 서비스의 정형화된 구성을 많은 웹 프레임워크가 기본적으로 제공한다.
• HTTP 요청처리, HTTP 응답처리, 라우팅, HTML Templating

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

• HTTP 요청을 처리할 수 있다.
• 어떤 데이터를 필요롤 하는지, 어떤 사용자로부터 요청이 수신되었는지 등

웹 프레임워크 - HTTP 응답처리

• HTTP 응답을 처리할 수 있다.
• 응답데이터가 어떤 형식인지, 응답 상태가 정상적인지 등

웹 프레임워크 - 라우팅

• HTTP 요청을 분기하는 방법을 제공한다.
• HTTP 요청 URL에 해당하는 알맞은 응답의 경로를 미리 설정한다.

웹 프레임워크 - HTML Templating

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

Node.js의 웹 프레임워크

• Express.js
• Koa.js
• Nest.js 등

Express.js 시작하기

Express.js를 사용하는 이유

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

npm init으로 시작하기

• Express.js 설치

  1. npm init
  2. npm install express

• Express.js 시작하기

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

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

app.listen(3000);

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

nodemon으로 자동 실행하기

• 코드를 수정하면 자동으로 재실행된다.
• nodemon 설치
  1. npm init 입력
  2. npm install nodemon 입력
  3. package.json 파일 수정
     • script에 "start": "nodemon ./index.js" 추가
  4. npm start 입력

express-generator 사용하기

• 설치하기
  1. npm install -g express-generator
  2. express my-web
  3. cd my-web
  4. npm install
  5. npm start
     $\rarr$ 프로젝트 자동 작성

Express.js의 구조

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

Express.js 동작방식

동작방식

1. app.js $\rarr$ app.use
2. routes/index.js $\rarr$ router.get
3. routes/index.js $\rarr$ res.render
4. views/index.jade

app.js

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

라우팅

app 라우팅

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

• get, post, put, delete, all 사용가능
• 첫 번째 인자는 라우팅을 실행할 URL
• 마지막 인자는 라우팅이 실행될 때 작동하는 함수

Express.Router

• app라우팅은 그룹화를 지원하지 않는다.
• Express.Router로 라우팅을 모듈화할 수 있다.

// users.js 파일
const router = express.Router();
router.get('/board', (req, res) => {
  res.send('Hello board');
});

module.exports = router;

// index.js 파일
const express = require('express');
const usersRouter = require('./routes/users.js');
const app = express();

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

app.use('/users', usersRouter); // /users URL을 usersRouter로 사용
app.listen(8080);

• app라우팅과 동일한 동작을 한다.

라우팅 - path parameter 사용

• 주소의 일부를 변수처럼 사용 가능하다.

/users/:id   // /users/123, /users/456 등...
/messages/:from-:to    // /messages/123-456 등...

Request Handler

• 설정된 라우팅 경로에 해당하는 요청이 들어오면 Request Handler 함수가 실행된다.
• HTTP 메소드 함수의 마지막 인자

Request Handler - Request 객체

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

Request Handler - Response 객체

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

Tip - http모듈로 Server열기

const http = require('http');
const server = http.createServer((req, res) => {
  console.log(req);
  res.end('Node Server!!');
});
server.listen(8080);