[TIL] SSR & CSR

👉 서버사이드 렌더링 & 클라이언트 사이드 렌더링

모바일의 시대에 등장한 클라이언트사이드렌더링 Single Page Application(SPA)
SPA는 최초 한번 페이지 전체를 로딩한 후 데이터만 변경하여 사용할 수 있는 애플리케이션
전통적인 웹 방식(SSR)은 서버사이드 렌더링 방식이다. 즉, 브라우저에 나타나는 형태 그대로를 HTML로 만들어 제공하고, 브라우저는 HTML을 표시하는 방식이었다. 요즘은 웹에서 제공되는 정보가 많기 때문에 전통적인 방식은 성능문제에 이슈를 낳았다.
클라이언트 사이드 렌더링은 사용자의 행동에 따라 필요한 부분만 다시 읽어들이기 때문에 서버측에서 렌더링하여 전체 페이지를 다시 읽어들이는 것보다 빠른 인터렉션을 기대할 수 있다. 서버는 단지 JSON파일만 보내주고, html을 그리는 역할은 자바스크립트를 통해 클라이언트 측에서 수행
트래픽을 감소시키고, 사용자에게 더 나은 경험을 제공

👉 Express

1. Philosophy
   : http 서버를 위한 작지만 강력한 툴을 제공하는 프레임워크

2. Middleware
   : 중간 단계 함수?
   middleware next 인자 --> 다음 미들웨어함수 연결 ( 전 단계 판별 )
   .use() 메서드

3. Router
   : 라우팅은 어떤 네트워크 안에서 통신 데이터를 보낼 경로를 선택하는 과정.
   URI 및 특정한 HTTP 요청 메소드 (GET, POST 등)인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것
   < 서버는 클라이언트가 요청 할 수 있도록 요청경로를 만들어야 한다. >

   // node.js router 방식
   if(path === '/a'){
       res.send('aa');
   }else if(path === '/b'){
       if(req.age < 20){
           res.status(400).send('no')
       }else{
           res.send('b')
       }
   }
   
   // express router 방식
   router.get('/a', (req,res) => {
       res.send('aa');
   })
   router.get('/b', (req,res) => {
       if(req.age < 20){
           return res.status(400).send('no')
       }
       res.send('b')
   })

   // 기본구조
   var express = require("express");
   var app = express();
   app.METHOD(PATH, HANDLER);	 

   • app은 express의 인스턴스
   • METHOD는 HTTP 요청 메소드
   • PATH는 서버에서의 경로
   • HANDLER는 라우트가 일치할 때 실행되는 함수

   app.get('/', function (req, res) {
     res.send('Hello World!');
   });
   
   app.post('/', function (req, res) {
     res.send('Got a POST request');
   });
   
   app.put('/user', function (req, res) {
     res.send('Got a PUT request at /user');
   });

• app.route()
  : 라우트 경로에 대하여 체인 가능한 라우트 핸들러를 작성할 수 있다. 경로는 한 곳에 지정되어 있으므로, 모듈식 라우트를 작성하면 중복성과 감소하여 도움이 된다.

  app.route('/book')
    .get(function(req, res) {
      res.send('Get a random book');
    })
    .post(function(req, res) {
      res.send('Add a book');
    })
    .put(function(req, res) {
      res.send('Update the book');
    });

👉 Cors

Cross Origins Resource Sharing : cross origin에서 리소스를 요청한다
보안상의 이유로 브라우저에서 cross origin 도메인 요청은 기본적으로 제한

const defaultCorsHeaders = {
    'access-control-allow-origin' : '*',
    'access-control-allow-methods': 'GET, POST, PUT, DELETE, OPTIONS',
    'access-control-allow-headers': 'content-type, accept',
    'access-control-max-age' : 10 //seconds
}

• 모든 도메인( * )을 허용
• 메소드는 GET POST PUT DELETE OPTIONS만 허용
• 헤더에는 content-type과 accept만 쓸 수 있다
• preflight request는 10초까지 허용
  --> 허용 설정 코드