2023.05.30) 랜더링 & Restful API

1. 웹페이지가 브라우저에 랜더링되는 과정을 설명해주세요.

• 렌더링의 기본적인 동작 과정

• HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. (Parsing)
• 두 Tree를 결합하여 Rendering Tree를 만든다. (Style)
• Rendering Tree에서 각 노드의 위치와 크기를 계산한다. (Layout)
• 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다. (Paint)
• 레이어를 합성하여 실제 화면에 나타낸다. (Composite)

Parsing

브라우저가 페이지를 렌더링하려면 가장 먼저 받아온 HTML 파일을 해석해야한다.

Parsing 단계는 HTML 파일을 해석하여 DOM(Document Object Model) Tree를 구성하는 단계이다.

파싱 중 HTML에 CSS가 포함되어 있다면 CSSOM(CSS Object Model) Tree 구성 작업도 함께 진행한다.

 

Style

Parsing 단계에서 생성된 DOM Tree와 CSSOM Tree를 매칭시켜서 실제로 화면에 그려질 Tree인 ender Tree를 구성한다.

예를 들면 Render Tree를 구성할때 visibility: hidden은 요소가 공간을 차지하고,

보이지만 않기 때문에 Render Tree에 포함이 되지만, display: none 의 경우 Render Tree에서 제외된다.

 

Layout

Render Tree를 화면에 어떻게 배치해야 할 것인지 노드의 정확한 위치와 크기를 계산한다.

루트부터 노드를 순회하면서 노드의 정확한 크기와 위치를 계산하고 Render Tree에 반영한다.

만약 크기 값을 %로 지정하였다면, Layout 단계에서 % 값을 계산해서 픽셀 단위로 변환한다.

 

Paint

Layout 단계에서 계산된 값을 이용해 Render Tree의 각 노드를 화면상의 실제 픽셀로 변환한다.

이때 픽셀로 변환된 결과는 하나의 레이어가 아니라 여러 개의 레이어로 관리된다.

당연한 말이지만 스타일이 복잡할수록 Paint 시간도 늘어난다.

예를 들어, 단색 배경의 경우 시간과 작업이 적게 필요하지만, 그림자 효과는 시간과 작업이 더 많이 필요하다.

 

Composite

Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타낸다.

우리는 화면에서 웹 페이지를 볼 수 있다.

---

2. Restful API에 대해 설명해주세요. GET,POST 외에 알고있는 메소드와 그 기준을 설명해주세요. RESTful API 가 아닌 것들은 어떤게 있나요?

RESTful API 구분

RESTful이란? REST의 설계규칙을 올바르게 지킨 시스템을 RESTful하다 말할 수 있으며,

모든 CRUD 기능을 POST로 처리하는 API 혹은 URI규칙을 지키지 않은 API.

즉, REST API의 설계 규칙을 올바르게 지키지 못한 시스템은 RESTful하다고 말할 수 없다.

 

RESTful API에는 다음과 같은 주요 구성요소를 포함하는 요청이 필요하다.

 

고유 리소스 식별자

서버는 고유한 리소스 식별자로 각 리소스를 식별한다.

REST 서비스의 경우 서버는 일반적으로 URL(Uniform Resource Locator)을 사용하여 리소스 식별을 수행한다.

URL은 리소스에 대한 경로를 지정한다. URL은 웹페이지를 방문하기 위해 브라우저에 입력하는 웹 사이트 주소와 유사하다.

URL은 요청 엔드포인트라고도 하며 클라이언트가 요구하는 사항을 서버에 명확하게 지정한다.

메서드

개발자는 종종 Hypertext Transfer Protocol(HTTP)을 사용하여 RESTful API를 구현한다.

HTTP 메서드는 리소스에 수행해야 하는 작업을 서버에 알려준다.

 

4가지의 일반적인 HTTP 메서드

1) GET

• 클라이언트는 GET을 사용하여 서버의 지정된 URL에 있는 리소스에 액세스한다.
• GET 요청을 캐싱하고 RESTful API 요청에 파라미터를 넣어 전송하여 전송 전에 데이터를 필터링하도록 서버에 지시할 수 있다.

2) POST

• 클라이언트는 POST를 사용하여 서버에 데이터를 전송한다.
• 여기에는 요청과 함께 데이터 표현이 포함된다.
• 동일한 POST 요청을 여러 번 전송하면 동일한 리소스를 여러 번 생성하는 부작용이 있다.

3) PUT

• 클라이언트는 PUT을 사용하여 서버의 기존 리소스를 업데이트한다.
• POST와 달리, RESTful 웹 서비스에서 동일한 PUT 요청을 여러 번 전송해도 결과는 동일하다.

4) DELETE

• 클라이언트는 DELETE 요청을 사용하여 리소스를 제거한다.
  DELETE 요청은 서버 상태를 변경할 수 있다. 하지만 사용자에게 적절한 인증이 없으면 요청은 실패한다.

HTTP 헤더

요청 헤더는 클라이언트와 서버 간에 교환되는 메타데이터이다.

예를 들어, 요청 헤더는 요청 및 응답의 형식을 나타내고 요청 상태 등에 대한 정보를 제공한다.

데이터

REST API 요청에는 POST, PUT 및 기타 HTTP 메서드가 성공적으로 작동하기 위한 데이터가 포함될 수 있다.

파라미터

RESTful API 요청에는 수행해야 할 작업에 대한 자세한 정보를 서버에 제공하는 파라미터가 포함될 수 있다.

 

파라미터 유형예시

• URL 세부정보를 지정하는 경로 파라미터.
• 리소스에 대한 추가 정보를 요청하는 쿼리 파라미터.
• 클라이언트를 빠르게 인증하는 쿠키 파라미터.