웹페이지가 사용자에게 보여지는 순서
URL 접속 → HTML 불러오기, HTML 파싱, DOM 생성 →
CSS불러오기 , CSS 파싱 → 렌더 트리 생성, 레이아웃 계산(layout), 화면에 그리기(paint) → JS 파싱, AST 생성, Reflow (DOM API로 DOM, CSSOM 변경 후 다시 렌더트리로 결합), Repaint
-> JS파일이 레이아웃 수치 계산을 포함하지 않을 경우 Repaint만
CORS
- CORS: 다른 출처의 자원에 접근할 수 있는 권한 부여.
(※ 브라우저는 보안을 위해, 서버에서 허용한 출처에 대해서만 접근 권한을 부여함.)
→ 브라우저 스펙
- 대응법:
- 서버/ 응답 헤더의 Access-Control-Allow-Origin에 접근을 허용할 출처를 적어줌
- 프론트엔드/ webpack-dev-server에서 제공하는 proxy 기능을 설정하여 우회
RESTfulAPI
RESTful / REST는 HTTP 통신을 하기 위한 통신 규약입니다. RESTful / REST API는 통신 규약을 지킨 API를 의미합니다
6단계 원칙까지 존재하는데, 보통 3단계까지 지키면 RESTful 하다고 표현함,
개별 리소스에 맞는 엔드포인트를 사용하고, 용도에 맞는 http 메서드를 사용하는 원칙만 지켜도 2단계
Endpoint란
API가 서버에서 자원(resource)에 접근할 수 있도록 하는 URL입니
POST, GET, PUT, DELETE와 같은 HTTP Method를 통해 서버에 요청을 보내면 서버는 리소스를 확인하여 응답
GET / POST
GET은 서버로부터 데이터를 받아오기 위한 Method,
URI queryString에 key=value 형식으로 요청 데이터 전송,
header에 포함하여 전송
캐싱이 가능 (재요청 시 빠르게 접근하기 위해 데이터를 저장시켜 놓는 것)
멱등성을 가지고 있어 동일한 요청에 대해 보내는 횟수와 무관하게 결과를 가져옴
POST는 서버에 데이터를 전송하기 위한 Method,
HTTP body 영역에 데이터를 담아 전송
post 요청의 경우엔 리소스를 새로 생성하거나 업데이트하므로 서버에게 동일한 요청을 해도 응답은 항상 다를 수 있습니다.
URL에 데이터가 노출되지 않으므로 캐싱 불가
