면접대비-1. 웹페이지가 브라우저에 렌더링되는 과정, 2. Restful API

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

 

1. DOM(Document Object Model), CSSOM(CSS Object Model) 생성.

첫번째로 서버로부터 받은 HTML, CSS 리소스를 다운받습니다. 그리고 HTML과 CSS파일은 각각 DOM tree와 CSSDOM으로 만들어집니다. 

 

2. Render Tree생성

순수한 요소들의 구조와 텍스트만 존재하는 DOM Tree와는 달리 Render Tree에는 스타일 정보가 설정되어 있으며 실제 화면에 표현되는 노드들로만 구성됩니다.

 

3. Layout

브라우저의 뷰포트 내에서 각 노드들의 정확한 위치와 크기를 계산합니다. 

 

4. Paint

Layout 계산이 완료되면 요소들을 실제 화면에 그리게 됩니다. 이전 단계에서 이미 요소들의 위치와 크기, 스타일 계산이 완료된 Render Tree를 이용해 실제 픽셀 값을 채워넣게 됩니다. 이 때 텍스트, 색, 이미지, 효과등이 모두 처리되어 그려집니다.

 

 

 

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

REST란? (Representational state transfer)

1. HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고,
2. HTTP Method(POST, GET, PUT, DELETE, PATCH 등)를 통해
3. 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미합니다.

REST는 다음과 같은 3가지로 구성이 되어있다. 

1. 자원(Resource) : HTTP URI
2. 자원에 대한 행위(Verb) : HTTP Method
3. 자원에 대한 행위의 내용 (Representations) : HTTP Message Pay Load

REST의 특징

1. Server-Client(서버-클라이언트 구조)
2. Stateless(무상태)
3. Cacheable(캐시 처리 가능)
4. Layered System(계층화)
5. Uniform Interface(인터페이스 일관성)

 

RESTful API란 REST의 원리를 따르는 시스템을 기반으로 만들어진 API 에서도 REST API의 설계 규칙을 올바르게 지킨 시스템을 말합니다. 모든 CRUD 기능을 POST로 처리 하는 API 혹은 URI 규칙을 올바르게 지키지 않은 API는 REST API의 설계 규칙을 올바르게 지키지 못한 시스템으로, REST API를 사용하였지만 RESTful 하지 못한 시스템이라고 할 수 있습니다.

RESTful API의 URI 설계규칙은

• 소문자 사용 (최소한 대소문자 구분)
• 하이픈(-, hypen)사용 : 공백 제거
• 확장자 사용 지양 : 헤더에 값을 넣는다
• CRUD는 URI에 사용해선 안 된다.

HTTP메소드는 GET, POST외에도 데이터 삭제의 기능을 하는 DELETE와 수정기능을 하는 PATCH, PUT이 있습니다.

RESTful API 규칙

 

 

 

reference: http://www.incodom.kr/REST#h_565e9294ea899706609e2ae2e849f76e

생물정보 전문위키, 인코덤

https://hangem-study.readthedocs.io/en/latest/front_interview/browser-rendering/

Browser Rendering - Front Study

https://khj93.tistory.com/entry/%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-REST-API%EB%9E%80-REST-RESTful%EC%9D%B4%EB%9E%80