- scale up : 사양 확대
- scale out : 무한으로 확대시킬 수 없으므로 복제한다. 수평으로 확장
- state full : 백엔드 컴퓨터가 꽉 찬 상태
state full 이면 state less 하게 만들어야한다.
▶︎ database 테이블에 정보를 저장한다.
▶︎ Token Table로 옮긴다.-
데이터베이스로 부화가 분산이 안되면 데이터베이스도 분산시킨다.
• 수직 파티셔닝(Vertical Partitioning)
• 수평 파티셔닝(샤딩): 테이블을 두개로 나눈다.
JWT(JSON Web Token)
Token(알 수 없는 숫자)에 데이터를 저장하는 기술.
토근에서 처리가 된다면 데이터베이스까지 가지 않아도 된다.
- JWT 토큰 받아오기(로그인 했을 때)
- 어떤 API를 요청하던 간에 JWT 토큰을 포함해서 요청하기(createProduct에 같이)
- 변수에 JWT 토큰을 저장한다.
- 백엔드에서 JWT토큰을 열어본다. 로그인 정보를 확인하고 데이터베이스에 가서 상품 등록을 허용해준다.
문제점
1. 데이터베이스 없이 토큰만 가지고 정보 교환은 해킹 위험성이 높다. JWT 토큰만 가지고 있으면 토큰을 가지고 있다면 무조건 허용해줘야한다,
2. 로그인 정책이 바뀌어서 중복 로그인이 안된다.
키: 백엔트 컴퓨터에서 서명 검증
서명: 위조불가능
페이로드: 데이터 들어가는 부분
헤더: 어떤 알고리즘으로 만들어졌는가
단방향 암호화(Hash): 복호화 불가능. 비밀번호를 새로 입력
양방향 암호화: 복호화 가능
복호화: 부호화(encoding)된 정보를 부호(code)화되기 전으로 되돌리는 처리 방식Bearer: Bearer + accessToken 규칙, 토큰을 가지고 인증할 때 토큰이라고 표시해주는 규칙
로그인 처리는 프론트엔드에서 로그인해서 받은 accessToken 가지고서 Api 요청할 때, HTTP Request 보낼 때, HTTP의 Header에 authorization 의 Bearer 타입으로 accessToken을 첨부해서 보낸다.
CSR(Client Side Rendering)
- 최초 요청시에 HTML을 비롯해 CSS, JS 등 각종 리소스를 받는다. 이후에는 모든 것을 클라이언트 사이드에서 렌더링하는 방식이다.
- 서버에서 아무 내용이 없는 빈 HTML를 보내면 클라이언트에서 동적으로 태그들과 스타일을 생성하여 페이지를 채운다. 최초에 HTML를 받는 것 외에는 페이지 렌더링을 위해서 별도의 HTTP 통신을 할 필요가 없다.
- 처음 한번 렌더링을 하기 때문에 페이지 이동시 SSR보다 빠른 페이지를 전환 하지만 초기 요청 때는
SSR보다 많은 리소스를 요청하기 때문에 처음에는 SSR보다 느리다. - SEO 취약
SPA(Single Page Application)
- 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 그린다. 즉, 하나의 페이지(html)에서 모두 처리하는 방식이다(하나의 페이지 안에 여러개의 페이지).
- HTML, 자바스크립트, CSS 등 필요한 모든 코드는 하나의 페이지로 불러오거나, 적절한 자원들을 동적으로 불러들여서 필요하면 문서에 추가한다.
- CSR(Client Side Rendering) 방식으로 렌더링한다.
- SPA와 CSR이 같은건 아니다.
- SPA이 등장하게 된 큰 이유는 모바일 환경에서의 UX경험때문이다. 모든 페이지를 렌더링 하여 받는 것이 데이터도 많이 소모하게 하고 속도도 컴퓨터에 비해 빠르기 어려웠으며 새로고침되는 과정이 번거롭다. 하지만 요즘엔 모바일 기기기 컴퓨터 수준이라..
SSR(Server Side Rendering)
- 서버에서 렌더링 작업을 하는 것을 의미한다.
- 브라우저가 서버에 페이지를 요청하면 서버가 필요한 데이터로 HTML을 구성하여 브라우저에 전송한다. 그러면 브라우저에서 응답으로 받은 HTML을 그대로 렌더링한다.
- 처음부터 서버에서 모든 컨텐츠를 로드하여 전달하기 때문에 SEO가 쉽다.
- 서버에서 매 번 동적으로 페이지를 렌더링하기 때문에 서버 부하가 발생 수 있으며 비용도 많이들고 페이지를 생성하는데 시간이 소요된다.
Next.js
- Vercel에서 만든 SSR, SEO 등을 하기 위한 React Framework
사용자가 처음 접속한 경우 SSR 방식으로 렌더링 될 HTML을 보내줌으로써 SEO 최적화가 되어 검색 엔진에 노출되게 한다. 이 후 CSR방식으로 브라우저에서 처리함으로써 SPA방식으로 운영한다.
SEO(Search Engine Optimization)
- 검색 엔진 최적화는 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있도록 하는 작업을 말한다.
- 검색엔진 봇들은 JavaScript를 해석하기 힘들기 때문에 HTML에서 크롤링을 한다. CSR 방식은 Client 측에서 페이지를 구성하기 전에 빈 HTML이므로 데이터를 수집하지 못하기 때문에 검색엔진에 노출이 어렵다.
SSG(Static Site Generation)
- 모든 사용자에게 항상 동일하게 보이는 페이지는 매번 동적으로 생성할 필요가 없다. 한 번만 생성한 이후에 CDN으로 어딘가 저장해두고 필요할 때 마다 로드한다.
- Build 할 때 정적인 HTML파일들이 서버에 생성된다.
- 이미 생성된 파일이 있기때문에 HTML만 반환하면 되므로 초기 렌더링 속도가 빠르다.
