[TIL🔥] Day1(8/2)

Introduction

영업직을 퇴사하고 혼자 개발을 공부하던 중, 좋은 기회가 찾아왔다.
프로그래머스의 프론트엔드 데브코스 1기 과정에 합류하게 되었다.
본격적으로 프론트엔드를 공부할 수 있어서, 그리고 함께하는 동료들을 만날 수 있어 매우 기쁘다.
그러던 중 TIL을 남기고자 요즘 뜨는 개발 블로그인 velog를 알게 되었고,
교육 기간 5개월 동안 TIL을 성실히 남겨보고자 한다.

사실 어제 노션으로 작성했다가 velog로 갈아탔다...
그래서 하루 늦은 TIL이 되버렸지만 뭐 괜찮다~
노션에는 내 일정과 팀원들과의 플젝 이야기를 남길거다!!

오늘 새롭게 배운 것

첫 날이지만 배운게 되게 많다.

1. JS array 관련 함수
2. 메모리(heap, call staack)
3. 스코프와 클로저
4. 웹의 동작 원리
5. 컴퓨터 시간
6. 암호화

많은 것을 배웠지만 첫 날인 만큼 웹이 어떻게 동작하는지 정리하고 넘어가려고 한다.

💻 웹의 동작 원리

브라우저에 URL을 입력하면 무슨 일이 발생할까?

• STEP1. URL 해석
  • 구조 : scheme://<'user'>:<'password'>@<'host'>:<'port'>/<'url-path'>
• STEP2. DNS를 조회
  • DNS(Domain Name System) : 사람이 읽을 수 있는 도메인 네임을 컴퓨터가 읽을 수 있는 IP주소로 변환
• STEP3. 해당 IP가 존재하는 서버로 이동
  • 네트워크 장비 라우터를 통해 이동
  • 동적 라우팅 이용
• STEP4. ARP를 이용하여 MAC 주소로 변환
  • ARP(Address Resolution Protocol) : 해당 IP를 그 IP주소에 맞는 물리적인 주소인 MAC주소로 변환
  • 기계의 실제 위치를 알기 위해서는 MAC 주소가 필요
    • ex) 경복궁의 위치 (도로명 주소 - IP, GPS 좌표 - MAC)
• STEP5. TCP 통신을 통해 Socket 열기
  • 네트워크를 통해 해당 기기로 패킷 전달
  • 요청이 수락되면 기기는 패킷을 받아 처리
• STEP6. 서버는 응답을 반환
  • HTTP 프로토콜로 들어온 패킷을 읽고 처리
  • 요청에 따른 적절한 응답 값 반환
• STEP7. 브라우저 렌더링
  • HTML을 읽어 DOM Tree 구축 및 화면에 렌더링

Comment

프론트엔드 개발자라면 웹이 어떻게 동작하는지를 눈감고도 설명할 수 있어야한다.. 기본적인 동작원리를 익혔고, TCP 동작 원리, 브라우저 렌더링 과정 등도 깊게 공부할 예정이다. 또한, http와 https의 차이 포스팅 역시 진행하고자 한다.

참고 사이트

웹의 동작 원리
http://tcpschool.com/webbasic/works