7/19(수) 데일리 과제

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

1. DNS 탐색 : 해당 페이지에 대한 자원을 탐색하고 서버에서는 IP주소를 보내줍니다.

2. TCP 핸드셰이크 : IP주소를 알고난 후 브라우저는 서버와 TCP 3방향 핸드셰이크를 통해 연결을 설정합니다.

3. TLS 협상 : HTTPS를 이용한 보안성있는 연결을 위해 통신 암호를 설정을 통해 안전한 연결을 요청합니다.

===============================================================================

4. DOM트리 구축 : HTML을 처리하여 DOM트리를 생성합니다. 

5. CSS 파싱 : CSS를 처리하고 CSSOM트리를 구성합니다. CSSOM은 웹페이지의 스타일 정보를 표현하는 트리 구조입니다.

6. Render트리 구축 : DOM과 CSSOM을 합쳐 렌더 트리를 만듭니다. Render 트리는 실제로 화면에 표시되는 요소들을 포함하고 있습니다. 일부 요소는 숨겨지거나 레이아웃에 영향을 주지 않는 스타일이 적용되어 제외될 수 있습니다.

7. 레이아웃 : 브라우저는 Render트리의 각 요소들의 위치와 크기를 계산하여 화면에 배치합니다. 처음 노드의 사이즈와 위치가 결정되는 것을 레이아웃 이라고 부릅니다. 이후에 노드의 크기와 위치를 다시 계산하는 것은 리플로우 라고 부릅니다. 

8. 페인팅 : 브라우저는 화면에 표시해야 할 요소들을 실제로 그립니다. 브라우저는 레이아웃 단계에서 계산한 위치와 크기에 따라 픽셀 단위로 색상과 텍스트 등을 그려 화면에 표시합니다.

9. 반응성 유지: 브라우저는 사용자의 입력이나 스크롤 등의 이벤트에 실시간으로 응답하기 위해 반응성을 유지합니다. 이를 위해 브라우저는 렌더링 과정을 여러 단계로 분할하여 일부 작업을 우선 처리하고, 다른 작업을 뒤로 미루는 등의 최적화를 수행합니다.

 

**자바스크립트가 로딩되는 시점은 언제인가요??

HTML이 파싱되는 시점에서 스크립트를 만나면 HTML파싱이 중단되고 스크립트의 해석 및 실행이 됩니다.

 

**Reflow와 Repainting의 차이점은 무엇인가요??

Reflow : 어떠한 요소의 크기나 위치가 변경이 될 때 노드의 크기와 위치를 다시 계산하는 것 => 너무 많은 reflow는 웹 성능에 문제가 생길 수 있음

Repainting:  컬러나 폰트의 크기가 변경되는 경우 => reflow보다는 웹성능에 영향을 많이 주지는 않음

=> 성능과 비용이 keyword!!!

 

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

Restful API란 Representational State Transfer(REST)는 API 작동 방식에 대한 조건을 부과하는 소프트웨어 아키텍쳐 스타일을 따르는 API를 말합니다. 즉 HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE, PATCH 등)를 통해 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미합니다.

 

REST 아키텍쳐의 원칙

1. 균일한 인터페이스 : 정보가 표준 형식으로 전송되도록 하기 위한 구성 요소 간 통합 인터페이스

2. 무상태 : GET요청 간의 클라이언트 정보가 저장되지 않으며, 각 요청이 분리되어 있고 서로 연결되어 있지 않음

3. 계층화 시스템 : 요청된 정보를 검색하는 데 관련된 서버(보안, 로드 밸런싱 등)의 각 유형을 클라이언트가 볼 수 없는 계층 구조로 체계화 하는 계층화된 시스템

4. 캐시 가능성 : 클라이언트 - 서버 상호 작용을 간소화 하는 캐시 가능 데이터

5. 온디맨드 코드 : 요청을 받으면 서버에서 클라이언트로 실행 가능한 코드를 전송하여 클라이언트 기능을 확장할 수 있는 기능

 

REST의 구성 요소

1. 자원(Resource) : HTTP URI

2. 자원에 대한 행위(Verb) : HTTP Method

3. 자원에 대한 행위의 내용 (Representations) : HTTP Message Payload

 

REST의 Method

- GET : 서버에 지정된 URL에 있는 리소스에 엑세스 합니다.

- POST : 서버에 데이터를 전송합니다.

- PUT : 서버의 기존 리소스를 업데이트 합니다.

- DELETE : 리소스를 제거합니다.

- PATCH : PUT와 달리 리소스의 부분만 수정합니다.

 

RESTful API 이외의 아키텍쳐 패턴 예시

- SOAP (Simple Object Access Protocol): SOAP은 웹 서비스 통신을 위한 프로토콜입니다. XML 기반의 메시지 교환을 통해 클라이언트와 서버 간의 통신을 처리합니다. SOAP은 WSDL (Web Services Description Language)을 사용하여 서비스 인터페이스를 설명하고, 서비스 요청 및 응답은 SOAP 메시지로 전송됩니다.

=> Graphql, SOAP(xml 기반)의 api통신은 restful api라고 하지 않는다