멘토링 7번째(2)

🌕 F-lab 멘토링 기록

멘토링 이후 부족한 부분을 채우기 위한 기록

http란 무엇일까? 그리고 https와 차이는?

Hyper Text Transfer Protocol의 약자로 서버와 클라이언트 모델을 따라 데이터를 주고 받기 위한 프로토콜
인터넷에서 hyper text를 교환하기 위한 통신 규약으로 80번 포트를 사용하고 있다. 클라이언트는 80번 포트로 요청을 보내고 서버는 80번 포트에서 요청을 받는다.
즉, 주소창에 www.google.co.kr을 검색하면 우리가 타이핑하지 않아도 앞에 http 또는 https가 붙게 되는데, 이 말은 즉 google 도메인 주소에 80번 포트로 접속하겠다는 의미이다.
그러면 비로소 html 문서를 서버가 보내주게 된다.
허나 http는 암호화되지 않은 평문 데이터를 전송하는 프로토콜이기 때문에, http를 통해 중요한 개인정보(비밀번호, 주민등록번호 등)을 주고 받게 되면 외부에 노출될 가능성이 있다.

이런 문제를 해결하기 위해 등장한 것이 Hyper Text Transfer Protocol Secure, https이다. https는 기존의 http에 데이터 암호화가 추가된 프로토콜이다. 443번 포트를 사용하고 네트워크 상, 제 3자가 정보를 볼 수 없도록 암호화를 지원하고 있다.

https: 대칭키 암호화와 비대칭키 암호화

https는 대칭키/비대칭키 암호화 방식을 모두 사용한다.

• 대칭키 암호화

  • 클라이언트와 서버가 동일한 키를 사용하여 암호화 및 복호화를 진행한다.
  • 키가 노출되면 매우 위험하지만, 연산 속도가 매우 빠르다는 장점이 있다.

• 비대칭키 암호화

  • 1개의 쌍으로 이뤄진 공개키와 개인키를 사용하여 암호화 및 복화화를 진행한다.
  • 연산 속도가 다소 느리지만, 키가 노출되어도 비교적 안전하다는 장점이 있다.

대칭키/비대칭키 암호화는 추후 따로 다루도록 하자!

CORS 정책이란?

CORS(Cross-Origin Resource Sharing) 정책은 교차 출처 리소스 공유에 관한 정책이다. 이 때 교차 출처는 다른 출처라고 이해해도 무방하다.
즉, 브라우저에서 다른 출처의 리소스를 공유하는 방법을 의미한다.

URL의 구조

아래와 같은 주소가 있다.
https://jaydenlee1116.github.io:443/tech/react?page=1#Origin이란

• https:// : Protocol
• jaydenlee1116.github.io : Host
• :443 : Port(생략 가능)
• /tech/react : Path
• ?page=1 : Query String
• #Origin이란 : Fragment

출처(origin)

URL 구조에서 Protocol, Host, Port 세 부분을 합친 것을 의미한다. 브라우저 개발자 도구에서 location.origin을 실행하면 확인할 수 있다.

동일 출처 정책(Same-Origin Policy)이란?

브라우저는 기본적으로 동일 출처 정책(SOP)를 통해 다른 출처의 리소스 접근을 금지한다. 즉, 위의 예시에서 https://jaydenlee1116.github.io와는 다른 출처의 주소에서 데이터를 요청한다면 동일 출처 정책을 위반하여 에러가 발생한다.
외부 리소스를 가져오지 못한다는 불편함이 있지만, SOP를 통해 XSS나 XSRF 등의 보안 취약점을 노린 공격에 방어할 수 있다.
현실적으로는 외부 리소스를 참고하지 않을 수 없기 때문에 이에 대한 예외 조항을 두고 있는데, 그게 바로 CORS이다.

CORS의 동작원리, CORS에러를 만났을 때의 해결법 등은 아래 출처를 참고하고 추후 더 자세히 기록하자

웹 브라우저의 성능을 측정하는 방법 - FCP

FCP란 First Contentful Paint의 약자로 사용자가 화면에서 컨텐츠를 볼 수 있는 페이지 로드 타임라인의 첫 지점을 표시하기 때문에 사용자가 감지하는 웹 페이지의 로드 속도를 측정하는 중요한 지표가 될 수 있다.
즉, FCP는 페이지가 로드되기 시작한 시점에서 페이지 컨텐츠의 일부가 유저에게 처음 보여지는 지점까지의 시간을 의미한다.
일반적으로 좋은 사용자 경험을 제공하기 위해 FCP는 1.8초 이하여야한다고 한다.
한편 LCP(Large Contentful Paint)은 주요 컨텐츠의 로드가 모두 완료된 시점을 측정하는 것을 목표로 한다.

추가) Lighthouse: 구글에서 개발한, 웹 페이지의 품질을 개선할 수 있는 오픈 소스 형태의 자동화 도구
Lighthouse를 통해 FCP뿐 아니라 다양한 웹의 성능을 측정할 수 있는 지표를 확인할 수 있다.

TCP와 UDP

TCP(Transmission Control Protocol)

• 전송을 제어하는 프로토콜
• 인터넷상에서 데이터를 메세지 형태로 보내기 위해 IP와 함께 사용하는 프로토콜
• 연결형 프로토콜
• IP는 데이터의 배달을 처리한다면, TCP는 패킬을 추적 및 관리한다.
• 3-way handshaking으로 연결을 설정하고 4-way handshaking으로 해제한다.
• 흐름 제어 및 혼잡 제어
• 높은 신뢰성을 보장
• UDP보다는 느린 속도

UDP(User Datagram Protocol)

• 사용자 데이터그램 프로토콜
• 데이터를 데이터그램 단위로 처리하는 프로토콜
  • 데이터그램: 독립적인 관계를 지니는 패킷
• 비연결형 프로토콜
• 정보를 주고 받을 때, 정보 송신/수신에 대한 신호절차를 거치지 않는다.
• 낮은 신뢰성
• TCP보다 빠른 속도

Reference

http와 https
CORS
CORS-2
FCP
TCP-UDP