ansui

REST APIREST 원칙을 적용하여 서비스 API를 설계한 것 REST(REpresentational State Transfer)전반적인 웹 어플리케이션에서 상호작용하는데 사용되는 웹 아키텍쳐 모델자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것HTTP URI를 통해 자원을 명시하고 HTTP 메서드(POST, GET, PUT: 전체 교체, PATCH: 부분 교체, DELETE)를 통해 해당 자원에 대한 CRUD를 적용하는 것 구성요소자원(Resource) : HTTP URI자원에 대한 행위(Verb) : HTTP Method자원에 대한 행위의 내용 (Representations) : HTTP Message Pay Load - 전송되는 데이터 내용 REST의 특징Server-Client(서..

요약1. URL을 웹 브라우저의 주소창에 입력한다.- 웹 브라우저가 URL을 해석하고, 문법에 맞지 않으면 기본 검색엔진으로 검색한다.- 문법에 맞으면 URL의 호스트 부분을 인코딩한다.2. HSTS 목록을 확인하고 있으면 HTTPS로, 없으면 HTTP로 요청한다.3. DNS(Domain Name Server) 조회 후 해당 도메인에 해당하는 IP를 돌려준다. - 브라우저/로컬 캐시 확인 → OS 캐시를 확인 → 라우터 캐시 확인 → ISP 캐시 확인4. TCP 소켓을 열고 3-way handshake로 연결을 설정한다.- HTTPS 요청이라면 TLS(Transport Layer Security) handshake 과정을 통해 세션키를 생성한다.5. 세션이 유지되는 동안 서버에게 요청하고 응답을 받는 과..

HTTPHyperText Transfer Protocol데이터를 주고받기 위해 정의한 통신 프로토콜웹을 기준으로 브라우저와 서버 간에 데이터를 주고받기 위항 방식으로 HTTP 프로토콜을 사용하고 있다. HTTP 프로토콜의 특징1️⃣상태가 없는(stateless) 프로토콜이다.즉, 데이터를 주고 받기 위한 각각의 데이터 요청이 서로 독립적으로 관리가 된다.이전에 보냈던 데이터 요청과 다음에 보낼 데이터 요청이 서로 관련이 없다는 의미이다.즉, 서버는 세션과 같은 별도의 추가 정보를 관리하지 않아도 되고, 다수의 요청 처리 및 서버의 부하를 줄일 수 있다.  2️⃣ 일반적으로 TCP/IP 통신 위에서 동작하며 기본 포트는 80번이다.  3️⃣ 클라이언트 서버 구조 4️⃣ HTTP 메시지를 통해 통신, 단순함..

브라우저 저장소: 웹 애플리케이션에서 데이터를 저장하기 위한 방법 브라우저 저장소 - Web Storage, CookieWebStorage - Local Storage, Session Storage 브라우저 저장소 - Web Storage, Cookie  1️⃣웹 스토리지(Web Storage): 데이터를 클라이언트에 저장하기 위해 만들어진 ‘key : value’ 형식의 저장소HTML5에 포함되어 있는 스펙으로 기존의 저장소로 사용되었던 Cookie의 몇 가지 단점을 개선한 스펙이다.스토리지는 데이터가 클라이언트단에 저장만 되어있을 뿐 서버로의 전송은 이루어지지 않는다.용량 제한이 쿠키에 비해 넉넉하다.만료일자를 따로 정하지 않는다. (영구 / 비영구)스토리지는 단순한 문자열을 넘어서 객체 정보를 저장..

Single Page Application: 하나의 페이지로 구성된 웹 애플리케이션: 일반적으로 CSR로 렌더링 → 웹 애플리케이션에 필요한 정적 리소스를 한꺼번에 모두 다운로드하고, 새로운 페이지 요청이 왔을 때 필요한 데이터만 전달받아 클라이언트에서 필요한 페이지를 갱신하기 때문예) 카테고리를 선택하면 헤더는 고정되어 있는 상태로 메인화면 혹은 클릭한 부분만 바뀐다. Multi Page Application: 탭을 이동할 때마다 서버로부터 새로운 HTML을 새로 받아와서 페이지 전체를 렌더링 하는 전통적인 웹 페이지 구성 방식: 일반적으로 SSR로 렌더링→ 새로운 페이지 요청이 왔을 때마 이미 렌더링된 정적 리소스를 전달 받아오기 때문예) 카테고리를 선택하면 새로운 페이지로 이동한다.Client Si..

1. HTML 파싱 → DOM 트리 구조 구축 2. CSS 파싱 → CSSOM 트리 구조 구축 3. JS 실행 *HTML 중간에 스크립트가 있다면 HTML 파싱이 중단된다.* 4. DOM과 CSSOM을 조합하여 렌더트리 구축 5. Layout 단계: 뷰포트를 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산한다. (Reflow)6. Paint 단계: 계산한 위치/크기를 기반으로 화면에 그린다. (Repaint) [참고] 브라우저의 렌더링 원리 브라우저의 렌더링 단계를 보면 Reflow는 Repaint를 선행한다.→ 즉, Repaint만 일어날 수 있지만 Reflow는 Repaint를 동반한다. - 생성된 DOM 노드의 레이아웃 수치(너비, 높이, 위치 등) 변경 시 영향받은 모든 노드(자신..

HTML, CSS, JS 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정 - 브라우저마다 다르지만, 브라우저는 렌더링을 수행하는 렌더링 엔진을 가진다.예) 크롬 - 블링크 (Blink) / 사파리 - 웹킷 (Webkit) / 파이어폭스 - 게코 (Gecko) = 중요 렌더링 경로- 브라우저가 HTML, CSS, JS를 화면에 픽셀로 변화하는 일련의 단계예) DOM (Document Object Model), CSSOM (CSS Object Model), 렌더트리, 레이아웃 - 목적: 가능한 빠르게 웹페이지를 렌더링 하는 것방법 1) CSS, JS의 최소화 및 압축: 파일의 크기를 줄여 빠르게 로딩방법 2) 인라인 CSS와 JS의 사용 최소화: 중요하지 않은 스타일이나 스크립트를 외부 파일로 분리하여..