웹?

웹. 그니까 내가 아는 웹 사이트다. 인터넷 상의 웹 브라우저로 접속하는 사이트.

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

요청

HTTP 요청은 사용자가 어떤 데이터를 필요로 하는지를 서버에게 알려준다.
즉, 요청은 어떤 사용자가, 어떤 데이터를 필요로 하는지를 담고 있다.

응답

HTTP 응답은 HHTP 요청에 해당하는 데이터를 전달한다.
즉, 응답은 사용자가 요청한 데이터와, 어떤 데이터가 전송되는지를 담고 있다.

SPA

Single Page Application 의 약어이다. 단일 페이지로 구성된 어플리케이션이다. (SPA !== CSR)

장점

페이지에 처음 진입시에 모든 데이터를 다운로드 한다. 페이지의 특정 부분이 바뀐다고 해서
모든 것을 다시 로드하는게 아니라 필요한 부분만 서버로부터 받아서 화면을 업데이트 한다.
필요한 부분만 갱신하기 때문에 네이티브 앱에 가까운 자연스러운 페이지 이동과 사용자
경험을 제공한다.

단점

한번에 받기때문에 초기 진입하는 속도가 느리다. (webpack 의 code splitting 이 있다고
하지만 완벽한 해결책이 되지는..)
검색 엔진 최적화가 어렵다. (SSR 로 해결..!)

MAP

Multi Page Application 의 약어이다. 여러개의 페이지로 구성된 어플리 케이션이다.
주로 SSR 을 사용한다.
페이지의 다른 링크를 클릭할 때마다 새롭게 HTML 을 서버에 요청하고, 매번 그 결과물을 받아야한다.

장점

검색 엔진 최적화가 유리하다. 완성된 형태의 HTML 파일을 서버로부터 전달 받기 때문에 검색엔진이 페이지를 크롤링하기에 적합하다.
초기 진입시 사용자에게 보여주는 최초 화면이 굉장히 빠르게 나타난다. 서버에서 이미 렌더링해서 보여주기 때문이다.

단점

JS파일을 모두 다운로드 하고, 적용하기 전까진 상호작용하지 않는다.
새로운 페이지로 이동하면 깜빡임 현상이 발생한다.
매 페이지 요청마다 리로딩, 전체 페이지 리렌더링한다.
SPA에 비해 개발이 복잡해질 수 있다.

CSR

클라이언트 쪽에서 view를 그리기 때문에 상대적으로 느리게 느껴질 수 있다.
하지만 모두 그려진 후에는 즉각적으로 인터렉션이 가능하다. 서버에 HTML 을 요청하고 받고, js까지
다운 받아야 한번에 보여지고, 인터렉션 되는 것이기 때문이다.

또한 인터렉션으로 사용자의 요청이 발생 시에는 SSR 과 달리 일부 필요한 리로스만 주고 받으면서
동적으로 페이지를 불러오는 것이다.

SSR

사용자 입장에서 초기 진입 시 속도가 빠르게 느껴진다. 서버에서 view 를 모두 렌더한 채로 전달 되기 때문이다.
그러나 js 를 다운받고, 적용하는 시간까지가 추가로 있어야 하기 때문에 인터렉션 되기까지는
좀 더 시간이 필요하다.

또한 인터렉션으로 사용자의 요청이 발생 시에는 새로운 html 을 서버에 요청한다. 그러니까 매번
새로운 html 을 서버에 요청하다보니 반응속도가 느려지고 전체적인 리렌더링이 일어나는 것이다.

클라이언트 요청 -> html 리소스 서버에 전달 -> 서버 처리 -> html 클라에 전달 -> 클라이언트 표시

express

웹 프레임워크는 웹 서비스에 필요한 기능들을 제공해주는 다양한 도구들의 모음이라고 할 수 있다. Express는 Node.js의 웹 프레임워크에서 정말 유명한 웹 프레임워크다.

const express = require('express'); // npm으로 설치
const app = express(); // app객체는 Express.js의 기능을 담은 객체다. 모든 동작은 app객에에 정의된다.

// middleware를 사용하기 위한 함수다.
app.use()

// http서버를 생성해주는 함수다.
app.listen()

// app에서 사용할 공통 상수다. Express.js에선 global 변수를 선언하지 않고 이 값을 사용할 수 있다.
app.locals()

라우팅

Express.js는 다양한 방식의 라우팅을 제공한다. 크게 app 라우팅과 Express.Router 라우팅이 있다.

app 라우팅

app 객체에 직접 get, post, put, delete 함수를 사용해서 HTTP method로 라우팅이 가능하다.
첫 번째 인자가 라우팅을 실행할 URL이다. ('/') 는 기본 메인페이지.
두 번째 인자가 라우팅을 실행했을 때 작동하는 함수다.

app.get('/', (req, res) => {
  res.send('GET /');
});
app.post('/', (req, res) => {
  res.send('POST /');
});
app.put('/', (res, res) => {
  res.send('PUT /');
})
app.delete('/', (res, res) => {
  res.send('DELETE /');
})
// HTTP method에 상관없이 라우팅 가능하다.
app.all('/all', (res, res) => {
  res.send('ANY /');
})

app 라우팅은 그룹화를 지원해주지 않기 때문에 Express.Router를 살펴보자.

Express.Router

router 객체에도 app처럼 get, put, post, delete 함수가 사용 가능하다.
첫 번째 인자가 라우팅을 실행할 URL이다.
두 번째 인자가 라우팅을 실행했을 때 작동하는 함수다.
라우터는 보통 모듈로 만들어서 사용한다.

// ./routes/users
const express = require('express');
const router = express.Router();

router.get('/', (req, res, next) => {
  res.send('라우터 동작중');
});

module.exports = router;

// ./app.js
const express = require('express');
const userRouter = require('./routes/users');
const app = express();

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

path parameter

path parameter를 사용하면, 주소의 일부를 변수처럼 사용할 수 있다. 라우팅에 적용되는 함수를 Request Handler라고 하는데, 설정된 라우팅 경로에 해당하는 요청이 들어오면 Request Handler 함수가 실행된다.

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

Request와 Response 객체

Request

HTTP 요청의 path parameter, query parameter, body, header 등을 확인할 수 있다.

// /path/:id 에서 :id를 뽑아올 수 있다.
req.params
// /path?page=2 에서 page를 뽑아올 수 있다.
req.queries.page
// POST 요청의 요청 데이터를 담고 있다.
req.body
// HTTP Request의 헤더 값을 가져올 수 있다.
// req.get('Authorization')
req.get('')

Response

HTTP 응답을 처리하는 객체로, 데이터를 전송하거나 응답 상태 및 헤더를 설정 가능하다.

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