📒 오늘의 공부
1. 기술 질문 스터디
1. 웹페이지가 브라우저에 렌더링되는 과정을 설명해주세요.
- DOM 트리 구축
-
HTML 파싱: 브라우저가 HTML 파일을 읽고 브라우저가 이해할 수 있는 문서 객체 모델(DOM)을 생성
- CSSOM 트리 구축
- CSS 파일, 스타일 요소 파싱
- JAVASCRIPT 실행
- HTML 파싱 중
<script>태그를 만나면 파싱이 중단
-> JS파일 크기가 크고 인터넷이 느린 곳이라면 렌더링 시간이 길어짐 <body>태그 아래<script>태그를 추가
-> 페이지를 먼저 볼 수는 있지만 페이지가 JS파일에 의존적이라면 완전하지 않은 페이지를 보게 됨async,defer속성 참고
- 렌더링트리 구축
- DOM과 CSSOM을 결합하여 렌더 트리 생성
- 불필요한 요소(예: display: none으로 지정된 요소)는 제외
- 레이아웃 생성
- 브라우저는 렌더 트리를 기반으로 viewport 크기에 맞게 각 요소의 크기와 위치를 계산하여 브라우저 창에 표시될 최종 레이아웃 생성
- 페인팅
- 렌더링할 준비가 된 모든 요소들을 픽셀로 변환해서 브라우저 화면에 출력
CSSOM: 'CSS Object Model', CSS 파일의 스타일 정보를 브라우저가 이해할 수 있는 문서 객체 모델의 형태로 생성하는 것
Parsing: 브라우저가 주어진 데이터(코드)를 읽어서 이해할 수 있는 구조로 변환하는 것.
파싱 결과는 'Node 트리, DOM트리'로 표현
추가 공부
-
브라우저의 주요 기능
- 사용자가 요청한 HTML 페이지, PDF, 이미지 등을 서버에 요청해 보여주는 것
-
렌더링 엔진이 하는 일
- HTML, CSS, JS, 이미지 등 웹 페이지에 포함된 모든 요소들을 화면에 보여줌
- 업데이트가 필요할 때, 효율적으로 렌더링을 할 수 있도록 자료 구조를 생성
참고자료
웹 브라우저가 하는 일 : 렌더링 6단계
렌더링 엔진부터 최적화까지
2. Restful API에 대해 설명해주세요. GET,POST 외에 알고있는 메소드와 그 기준을 설명해주세요. RESTful API 가 아닌 것들은 어떤게 있나요?
-
API란?
- 어플리케이션 간에 지정된 형식으로 요청, 응답을 할 수 있도록 연결하는 것
-
REST란?
-
Representational State Transfer(표현 상태 전이)
-
문서, 그림, 데이터 등의 자원을 이름으로 구분해서 해당 자원에 대한 상태, 정보를 주고받는 모든 것을 의미
- HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시
- HTTP Method를 활용해서 해당 자원(URI)에 대한 CRUD를 적용
-
특징
- Server-Client(서버-클라이언트 구조)
- 클라이언트와 서버가 각각 독립적으로 개발될 수 있도록 구조를 분리
- Stateless(무상태)
- 서버는 각각의 요청(request)을 별개의 것으로 인식
- Cacheable(캐시 처리 가능)
- HTTP 프로토콜을 그대로 사용하기 때문에 HTTP가 가진 캐싱 기능을 적용
- Layered System(계층화)
- 클라이언트와 서버 사이에 여러 개의 계층을 둘 수 있다.
ex. 웹 어플리케이션은 보통 프론트엔드, 백엔드, 데이터베이스 등 다양한 계층으로 구성
-> 클라이언트에서 발생한 요청은 프론트엔드에서 먼저 처리 후 백엔드, 데이터베이스를 거쳐 프론트엔드에 결과 전송
-> 여러 계층을 두면 각 계층에서는 자신의 역할에 맞게 최적화된 기술, 도구, 프레임워크를 선택하고 구현할 수 있으므로 전체 시스템의 성능과 유지보수성을 향상시킬 수 있다.
- Uniform Interface(인터페이스 일관성)
- URI를 통해 자원을 표현하고, HTTP 메서드를 통해 자원에 대한 행위를 정의
- 가장 큰 특징. 각 요쳥이 어떤 정보다 동작을 위한 것인지 모습 자체만으로 추론 가능
-
-
REST API
- REST의 원리를 따르는 API
- REST API 설계 규칙
- URI는 동사보다는 명사를, 대문자보다는 소문자를 사용
- 슬래시 (/)로 구분하되 마지막엔 포함하지 않기
ex. https://github.com/YS739 (O)
https://github.com/YS739/ (X) - 띄어쓰기는 하이픈(-) 사용
- 파일확장자는 URI에 포함하지 않기
-
RESTFUL
- REST API의 설계 규칙을 올바르게 지킨 시스템
-
GET,POST 외 method
-
GET: 자원을 조회
-
POST: 자원을 생성
-
PUT: 자원을 갱신(전체 변경)
-
PATCH: 자원을 부분적으로 갱신
-
DELETE: 자원을 삭제
-
-
POST는 PUT, PATCH 기능을 다 할 수 있다.
-
RESTful API 가 아닌 것
-
RPC(Remote Procedure Call) 기반의 API
ex. gRPC / Apache Thrift- 원격 서버에서 실행되는 함수나 메서드를 로컬 클라이언트에서 호출하는 방식으로 동작
- 클라이언트가 서버의 함수를 호출하면 서버에서 해당 함수를 실행하고, 결과를 클라이언트에게 반환
-> REST API와는 달리 메시지 포맷이나 인터페이스 정의 등이 규격화되어 있지 않기 때문에, API를 설계하고 개발하는데 있어서 더 많은 노력 필요
-
SOAP(Simple Object Access Protocol) 기반의 API
ex. eBay Trading API / AWS- XML 기반의 웹 서비스를 위한 메시지 교환 프로토콜
- HTTP, HTTPS, SMTP 등을 이용하여 네트워크 상에서 통신할 때 사용되며 메시지를 전송할 때에는 XML을 사용
- XML 기반이기 때문에 처리 속도가 느리고, 복잡하며, 구현이 어려워 비용이 많이 든다.
소프트웨어 아키텍처: 소프트웨어 시스템의 구성요소와 그들 간의 관계, 그리고 시스템이 해결해야 할 문제나 목표 등을 고려하여 시스템의 전반적인 디자인과 구조를 결정하는 과정과 결과물을 의미
HTTP 프로토콜을 기반: 인터넷에서 데이터를 주고받을 수 있는 프로토콜 중 하나인 HTTP를 기반으로 하여 통신을 하는 것
HTTP 상태 코드: HTTP 요청에 대한 서버의 응답 상태를 나타내는 3자리 숫자 MDN 참고자료
ex. 200 OK / 404 Not Found -
추가 공부
URL / URI
- 웹에서 식별자로 사용되는 개념으로 URI가 더 포괄적인 개념
- URL(Uniform Resource Locator)
- 리소스를 식별하는 일반적인 개념인 URI의 일종
- 리소스의 위치를 명시
ex. http://www.example.com/index.html
- URI(Uniform Resource Identifier)
- URL 뿐만 아니라, 파일, 이메일, 데이터베이스 등 다양한 것을 식별하는 데 사용
- 리소스의 위치와는 상관 없음
ex. example@example.com
IP / MAC 주소
- 네트워크에서 장치들을 식별하기 위해 사용되는 주소 체계
- IP 주소
- 네트워크상에서 서로 다른 장치들이 통신을 할 수 있도록 위치를 식별해주는 역할
- 32비트 혹은 128비트의 이진수로 이루어져 있으며, 대부분의 인터넷 사용자는 IPv4 주소를 사용
- MAC 주소
- 네트워크 상에서 데이터를 전송하는 장치들을 식별하는 역할
- 물리적 주소(Physical Address) 또는 하드웨어 주소(Hardware Address)
- 네트워크 인터페이스 카드(Network Interface Card, NIC)에 할당된 고유한 식별자
TCP / UDP
- 인터넷 프로토콜 스택에서 전송 계층에서 사용되는 프로토콜
- TCP(Transmission Control Protocol)
- 웹 브라우저에서 사용되는 HTTP 프로토콜의 기본 전송 프로토콜로 사용
- 데이터 전송 전에 연결 설정, 데이터 전송 후 연결 해제
- 전송 중 데이터 손실 및 손상의 경우 재전송을 수행하여 데이터의 신뢰성을 보장
- UDP(User Datagram Protocol)
- 연결 설정 및 해제가 필요 없고 데이터 손실, 손상의 경우 재전송을 수행하지 않아 데이터의 신뢰성이 낮다.
- 실시간 동영상 스트리밍, DNS, DHCP 등에서 사용
-> 실시간 동영상 스트리밍에서는 손실되어도 눈에 띄지 않는 데이터(예: 약간의 화질 손실 등)도 전송해야하기 때문에 UDP를 사용
NIC: 컴퓨터에서 네트워크와 연결되는 하드웨어 장치로 NIC를 통해 컴퓨터는 인터넷 또는 로컬 네트워크와 연결되어 다양한 네트워크 활동을 수행
참고자료
AWS RESTful API
REST API란? REST, RESTful이란?
API, REST API가 뭔가요?
