2021년 04월 15일

Note

HTTP

HTTP(Hyper Text Transfer Protocol)

• TCP/IP로 전송된 데이터를 웹 브라우저와 웹서버가 HTML 문서를 요청하고 응답하기 좋은 형태로 구조화한 데이터 구조 등에 대한 약속

웹 브라우저의 통신 과정

1. URL 분석 및 접속 웹 브라우저는 URL을 분석해 서버의 IP 주소와 포트를 이용해 서버와 TCP/IP 연결을 요청
2. Request 헤더 전송 브라우저에서 요청 파일명 등이 기술된 헤더를 전송
3. Request 바디 전송 필요한 경우에, 로그인 폼에 입력한 데이터나 첨부 파일 등의 추가적인 데이터를 전송
4. Response 헤더 수신 서버에서 헤더를 수신하고 응답상태(404 등)를 확인해 바디의 Content-Type등을 확인
5. Response 바디 수신 바디가 있는 경우, 서버에서 수신한 바디를 헤더에 기술된 Content-Type에 따라 text/html인 경우 HTML을 렌더링, image/jpeg인 경우 그림을 띄우는 등 적절히 해석

Request

• 요청의 종류
  • 주소창을 통한 요청
  • 링크를 통한 요청
  • 폼을 통한 요청
  • 다양한 태그를 통한 요청
    • 브라우저가 최초 HTML 문서를 전송 받고 해석하는 도중 다른 URL 자원을 참조하는 태그를 만날 경우 새로운 HTTP Request를 보내게 된다.
      • HTML 파서의 특징: 파싱 과정이 중단될 수 있는 것
  • JavaScript를 통한 요청

Response

• 클라이언트(웹 브라우저, 스마트폰 앱 등)가 웹 서버와 TCP/IP 연결을 맺고 HTTP 프로토콜을 따라 Request를 보내면, 웹 서버는 적절한 Reponse를 보내주고 연결을 끊는다.

라우팅

• 웹 서버에서 Request의 처리는 라우팅에서 시작.
• 라우팅은 Request Method와 URL을 기반 으로 코드를 분기하는 것을 의미

브라우저의 렌더링 과정

프론트엔드 개발자라면 알고 있어야할 브라우저의 동작 과정읽고 정리

• 브라우저의 요소 중 렌더링 엔진은 HTML, CSS, JavaScript를 파싱하고 결과물을 바탕으로 페이지를 그려내는 역할을 한다.
  • 모든 과정을 일컫어 중요 렌더링 경로라 부른다.
  • 각 단계에서 리스소르를 로드하는 순서나 작성 스크립트에 따라 웹 페이지 속도가 달라질 수 있음 → 최적화를 통해 fe개발자는 렌더링에 걸리는 시간을 개선시킬 수 있다.
• 파싱(Parsing)
  • 토큰화된 코드를 구조화하는 과정
  • 브라우저는 토큰화된 HTML의 문자열들을 이용해 파스 트리를 생성
    • 파스 트리를 이용해 DOM 트리를 새로 만든다. (HTML Element로 이루어진 트리)
• 렌더 트리(Render Tree)
  • DOM 트리와 CSSDOM 트리의 조합, 화면에 그려지지 않는 요소들은 트리에 나타나지 않는다.
  • 아주 복잡한 레이아웃의 경우에는 fe 개발자 역시 레이아웃 과정의 연산을 최소화하도록 신경을 써야 한다.
    • DOM의 레이아웃과 관련된 값을 직접 읽어오거나 변화를 주는 JavaScript 코드를 작성해야 한다면 브라우저 처럼, 그러한 구문들을 최대한 묶어야 한다.
• 레이아웃 단계
  • 렌더 트리에서 계산되지 않았던 노드들의 크기와 위치, 레이어 간 순서와 같은 정보를 계산해 좌표에 나타냄
• 페인트 단계
  • 레이아웃 단계를 통해 화면에 배치된 element들에게 색을 입히고 레이어의 위치를 결정
• 가상 DOM
  • JavaScript를 이용해 DOM을 조작하면 변경사항이 있을 때마다 레이아웃 단계 & 페인트 단계를 수행하게 된다. → 다시 그리는 과정을 계속 거친다는 말
  • 가상 DOM: 실제로 렌더링 되지는 않지만 실제 DOM 구조를 반영한 상태로 메모리에 있는 가상의 DOM
    • 실제 그려야 할 필요가 없기 때문에 실제 DOM 보다 연산 비용이 적다. → 변경 사항을 한꺼번에 묶어 처리한다.

MIME 타입

• HTTP 헤더의 Content-Type 필드는 MIME 타입에 해당하는 값을 가질 수 있다.

테니스 - 발리

발리: 바운드 되지 않는 공을 바로 치는 것(하프 발리 제외)

발리의 종류

• 스윙 발리
• 스냅 발리
• 블록 발리
• 펀치 발리
• 드래그 발리
• 드롭 발리
• 하프 발리
  • 공이 튀어오를 때 손등으로 공을 밀어낸다 생각하고 라켓을 대자.
  • 손목에 스냅을 주지 않는다.
  • 1, 2, 3에 치는게 아니라 1, 2에 친다.

log

• 프론트엔드 개발자라면 알고 있어야할 브라우저의 동작 과정을 읽었다.
• 🎾 6번째 테니스 레슨이 있었다. 40분 정도 서비스 연습 따로 하고 갔다.
  • 테니스화 구매 사이트를 단톡방에 공유했다.