콘텐츠로 건너뛰기
Home » Blog » REST API, 브라우저 렌더링

REST API, 브라우저 렌더링

  • web

REST API

  • RESTful한 API를 말하며 일련의 특징과 규칙 등을 지키는 API를 일컫는다.
  • 2000년에 Roy Thomas Fielding이 쓴 논문에서 처음으로 등장한 개념

REST API의 특징

1. Uniform-Interface

  • API에서 자원들은 각각 독립적인 인터페이스를 가지며 각각의 자원들이 url 자원식별, 표현을 통한 자원조작, Self-descriptive messages, HATEOAS 구조를 가지는 것을 말한다.
  • 독립적인 인터페이스라는 것은 서로 종속적이지 않은 인터페이스를 말한다.
    • 예를들어 웹페이지를 변경했다고 웹 브라우저를 업데이트하는 일은 없어야 하고 HTTP 명세나 HTML 명세가 변경되어도 웹페이지는 잘 작동해야 하듯..
  • url 자원 식별
    • identification of resources를 말한다. 자원은 url로 식별되어야 한다.
  • 표현을 통한 자원조작
    • manipulation of resources through representations은 url과 GET, DELETE 등 HTTP 표준메서드 등을 통해 자원을 조회, 삭제 등 작업을 설명할 수 있는 정보가 담겨야 하는 것
  • Self-descriptive messages
    • HTTP Header에 타입을 명시하고 각 메세지(자원)들은 MIME types에 맞춰 표현되어야 한다.
    • 예를들어 json을 반환한다면 application/json으로 명시해주어야한다.
    • MIME types는 문서, 파일 등의 특성과 형식을 나타내는 표준이다.
    • IETF의 RFC6838에 정의 및 표준화되어 있다. (’font/ttf’, ‘text/plain’, ‘text.csv’ 등)
    • 예를 들어 json타입의 데이터를 보낼 때는 헤더의 ‘Content-Type’ = ‘application/json’을 명시해야 함을 말한다.

2. Stateless

  • 이 규칙은 HTTP 자체가 Stateless이기 때문에 HTTP를 이용하는 것만으로도 만족된다.
  • 그리고 이는 REST API를 제공해주는 서버는 세션(session)을 해당 서버 쪽에 유지하지 않는다는 의미이다.

3. Cacheable

  • HTTP는 원래 캐싱이 된다. (아무런 로직을 구현하지 않더라도 자동적으로 캐싱이된다.)
  • 새로고침을 하면 304가 뜨면서 원래 있던 js와 css이미지 등을 불러오는 것을 볼 수 있다.
  • 이는 HTTP 메서드 중 GET에 한정되며 Cache-Control:max-age=100 이런 식으로 한정된 시간을 정할 수 가 있으며 캐싱된 데이터가 유효한지를 판단하기 위해 ‘Last-modified’dhk ‘Etag’라는 헤더값을 쓴다.
  • ‘Etag’는 전달되는 값에 태그를 붙여서 캐싱되는 자원인지를 확인해주는 것

4. Client-Server 구조

  • 클라이언트와 서버가 서로 독립적인 구조를 가져야 한다.
  • 물론 이는 HTTP를 통해 가능한 구조이다.
  • 서버에서 HTTP 표준만 지킨다면 웹에서는 그에 따른 화면이 잘 나타나게 된다.
  • 서버는 그저 API를 제공하고 그 API에 맞는 비즈니스 로직을 처리하면 된다.
  • 마찬가지로 클라이언트에서는 HTTP로 받는 로직만 잘 처리하면 되는 것

5. Layered System

  • 계층구조로 나누어져 있는 아키텍쳐를 뜻한다.
  • WEB기반 서비스를 하면 보통 이러한 시스템을 구축하게 된다.

REST API의 URI규칙

  • 자원을 표기하는 URI의 아래 6가지 규칙을 적용해야 한다.
  1. 동작은 HTTP 메서드로만 해야 하고 url에 해당 내용이 들어가면 안된다.
    1. 수정 = put, 삭제 = delete, 추가 = post, 조회 = get을 이용해야 한다.
    2. 예를 들어 /boos/delete/1 이렇게 표기하면 안된다는 것
  2. .jpg, .png 등 확장자는 표시하지 말아야 한다.
  3. 동사가 아닌 명사로만 표기해야 한다.
    1. 유저가 책을 소유한다는 것을 표현한다면 ‘유저/유저아이디/inclusion/책/책아이디’로 표현
    2. 유저가 소유한 아파트를 조회한다면 ‘/user/{userid}/aparts
  4. 계층적인 내용을 담고 있어야 한다.
    1. ex) ‘/집/아파트/전세’
  5. 대문자가 아닌 소문자로만 쓰며 너무 길 경우에 바를 써야할 경우 언더바_가 아닌 그냥 바-를 쓴다.
  6. HTTP 응답 상태코드를 적재적소에 활용한다. 성공시에는 200, 리다이렉트는 301 등

쿼리스트링과 혼합한 url

  • REST API는 / 를 기반으로만 구축되는 것도 있지만 적절히 쿼리스트링을 혼재해서 쓰기도 한다.
  • 검색, 페이지네이션, 정렬 등 매개변수가 많거나 복잡할 때 쿼리스트링을 쓰는게 좋다.
  • 실제 워드프레스에서 제공하는 REST API
    • post의 2번째 결과물을 나타냄
      • /wp/v2/posts?page=2
      • api를 설정할때 /v2 /v1 으로 버전을 명시해놓는게 좋다. 이를 통해 현재 버전을 사용하다가 새 버전이 안정되면 자체적으로 마이그레이션을 할 수 있다.
  • 실제 KAKAO API
    • /oauth/token?grant_type=refresh_token&client_id=${REST_API_KEY}
  • 바벨이 필요한 운동정보를 가져온다.
    • /api/v1/workouts?equipment=barbell
  • 모든 운동정보를 생성날짜 기준으로 내림차순으로 가져온다면
    • /api/v1/workouts?sort=-createdAt

브라우저 렌더링

  • 브라우저는 다음과 같이 브라우저 엔진, 렌더링엔진, 네트워크 통신부, 자바스크립트 해석기, UI 백엔드, 자료저장소로 이루어져 있다.
  • 이 중 렌더링엔진이 브라우저 렌더링을 관장하며 다음과 같은 과정으로 이루어진다.
  • DOM 트리 CSS 파서 등을 기반으로 렌더트리를 구축해 결과적으로 우리가 보는 화면을 구축하는 과정을 의미한다.

1. DOM 트리와 CSSOM트리 구축

DOM트리 구축

  • 하나의 html 페이지는 div, span 등의 요소를 가진다. 이러한 요소들이 HTML 파서에 의해 “구문분석”된다.
  • 요소는 하나하나가 노드로 설정이 되어 트리 형태로 저장되는데, 이를 DOM 트리라고 한다.

CSSOM 트리 구축

  • 각각의 노드는 CSS 파서에 의해 정해진 스타일 규칙이 적용되어 있다.
  • span.color = “red”는 노드의 색깔이 빨간색이다. → 이러한 것들을 기반으로 CSSOM이라는 트리가 만들어진다.
  • 이 과정은 DOM트리 구축과 동시에 일어난다.

2. 렌더트리와 렌더레이어 생성

  • DOM 트리와 CSSOM 트리가 합쳐져 렌더객체(Render Object)가 생성된다.
  • 이들이 모여 병렬적인 렌더트리가 생성된다.
  • 이때 display:none이 포함된 노드는 지워지고 font-size 등 상속적인 스타일은 부모노드에만 위치하도록 설계하는 등의 최적화를 거쳐 렌더레이어가 완성된다.
  • 참고로, display:none은 렌더트리에서는 삭제되지만 visibility: hidden의 경우에는 요소를 보이지않게 하나 요소는 여전히 레이아웃에서 공간을 차지한다.
  • 이 때 렌더레이어가 완성될 때 GPU에서 처리되는 부분(CSS3D / video & canvas / filter / animation/ transform : translateZ(0) 등)이 있으면 이 요소들은 각각 강제적으로 그래픽 레이어로 분리된다.

3. 렌더레이어를 대상으로 Layout 설정

  • 이 때 좌표는 보통 부모를 기준으로 설정된다.
  • Global Layout은 브라우저 사이즈가 증가하거나 폰트 사이즈가 커지면 변경된다.

4. 렌더레이어를 대상으로 칠하기 (paint)

  • 픽셀마다 점을 찍듯 칠한다.
  • 이를 레스터화라고도 한다.

5. 레이어 합치기(composite layer) 및 표기

  • 각각의 레이어로부터 비트맵이 생성되고 GPU에 텍스쳐로 업로드된다.
  • 그 다음 텍스쳐들은 서로 합쳐져 하나의 이미지로 렌더링되며 화면으로 출력된다.

자주 묻는 면접질문!

  • 렌더트리와 DOM 트리는 1:1 대응인가?
    • 아니다. DOM트리 > 렌더객체 > 렌더트리가 되는 과정에서 display:none으로 사라지는 렌더 객체(노드)들이 있을 수 있기 때문에 1 : 1 대응이 아니다.