[프로그래머스 FE 데브코스/TIL] DAY3 2023.06.05.월

오늘은 팀 매칭과 멘토님 배정이 이루어졌습니다! 멘토님과의 커피챗 시간이 기다려집니다! 팀원들과도 아직은 어색하지만 빨리 친해지면 좋겠어요. 😊
오늘 정리해볼 내용은 네트워크, 객체 지향, 프로토타입, 이벤트 루프입니다. 

 

✔️ 네트워크

 

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

 

1. URL을 해석합니다. 
   • scheme://<user>:<password>@<host>:<port>/<url-path>
2. DNS를 조회합니다. 
   • DNS❓
     • Domain Name System
     • 도메인과 IP주소를 서로 반환해 주는 시스템입니다.  
       • https://www.comic.naver.com 에서 'naver.com'부분은 도메인(Domain)이고, comic 부분은 호스트 네임입니다. 
         • 호스트 네임❓
           • 네트워크에 연결된 장치들에게 부여되는 각각의 고유한 이름으로 각각의 서비스를 구분하고자 사용합니다. 
       • 호스트(나)가 다른 호스트와 데이터를 주고받기 위해, 자신들을 구분하는 특수한 번호를 가지고 있는데, 이것을 IP주소라고 불러요. 
         • 로컬 호스트(localhost) 라는 말을 자주 접하는데 이는 호스트 자신을 가리키는 고유 별칭이에요. 
         • localhost는 IP주소 127.0.0.1로 설정되어 있어요.
     • 우리가 문자열로 표현된 인터넷 주소로 웹사이트에 접속할 수 있는 것은, 웹 브라우저가 도메인과 연결되어 있는 IP 주소를 찾아서 이동해주기 때문입니다!
3. 찾은 IP가 존재하는 서버로 이동합니다. 
4. ARP를 이용하여 MAC 주소 변환을 합니다. 
   • Address Resolution Protocol
   • 논리 주소인 IP 주소를 물리 주소인 MAC 주소로 변환하는 프로토콜입니다. 
     • MAC 주소는 왜 필요할까❓
       • 기계가 연결된 실제 위치를 알기 위해서는 논리 주소(도로명 주소)가 아닌 물리 주소(GPS 좌표)가 필요합니다.
5. TCP 통신을 통해 서버의 Socket을 열어야 합니다. 
   • 실제 Socket(네트워크를 경유하는 프로세스 간 통신의 종착점, 전송 계층과 응용 프로그램 사이의 인터페이스 역할을 하며 두 호스트를 연결해 주는 역할)을 열어 허락 받아야 데이터를 전달할 수 있다. 
     • 이때 TCP 연결을 허락 받기 위해 3 way handshake를 이용해 연결 요청한다. 
       
       • TCP❓
         • 데이터를 메세지 형태로 보내기 위해 IP와 사용하는 프로토콜
       • 3 way handshake❓
         • TCP/IP 프로토콜을 이용해서 통신을 하는 응용프로그램이 데이터를 전송하기 전에 먼저 정확한 전송을 보장하기 위해 상대방 컴퓨터와 사전에 세션을 수립하는 과정
   • 요청이 수락되면 기기는 패킷(네트워크 전송의 용량 단위)을 받아 처리합니다. 
6. 서버는 응답을 반환합니다.
   • URL을 브라우저에 입력했다면 HTML을 응답한다. 
7. 브라우저는 렌더링합니다 
   • 받은 HTML을 읽어 DOM Tree를 구축하고 이를 이용해 화면에 그립니다. 스크립트가 있다면 함께 실행한다. 

http가 있는데 https가 왜 필요할까요❓
HTTP는 정보를 text 형식으로 주고받기 때문에 중간에 인터셉트할 경우 데이터 유출이 발생할 수 있어 이를 해결하고자 HTTP에 암호화를 추가한 프로토콜인 HTTPS를 사용합니다. 

 

 

✔️ 객체 지향

자바스크립트도 프로토타입 기반 객체지향 언어죠~
객체 지향 프로그래밍이라는 말을 자주 듣는데 제대로 정리해 본 적이 없는 것 같아 이번 기회에 잘 정리해 보려 합니다!

 

객체지향 프로그래밍은 명령형 프로그래밍의 절차지향적 관점에서 벗어나 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패어다임을 말합니다!

 

• 객체
  • 객체는 상태 데이터와 동작(상태 데이터를 조작할 수 있다)을 하나의 논리적인 단위로 묶은 복합적인 자료구조입니다. 
    • 상태 데이터 = 프로퍼티
    • 동작 = 메서드

 

• 각 객체는 고유의 기능을 갖는 독립적인 부품으로 볼 수 있지만 자신의 고유한 기능을 수행하면서 다른 객체와 관계성을 가질 수 있습니다. 
  • 다른 객체와 메시지를 주고 받거나 데이터를 처리할 수 있고 다른 객체의 상태 데이터나 동작을 상속받아 사용하기도 해요!
    • 상속은 객체지향 프로그래밍의 핵심 개념입니다!
      • 자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거해요.
        • 중복을 제거하는 방법은 기존의 코드를 적극적으로  재사용하는 것입니다!

 

• 프로토타입(= 프로토타입 객체)이란❓
  
  • 객체 지향 프로그래밍의 근간을 이루는 객체 간 상속을 구현하기 위해 사용됩니다. 
  • 프로토타입은 어떤 객체의 상위(부모) 객체의 역할을 하는 객체로서 다른 객체에 공유 프로퍼티(메서드 포함)를 제공하여 프로토타입을 상속받은 하위(자식) 객체는 상위 객체의 프로퍼티를  자신의 프로퍼티처럼 자유롭게 사용 가능 합니다!

 

✔️ 이벤트 루프

이벤트 루프에 대해서는 강의를 보고 처음 접해본 개념 이었어요!
자바스크립트의 특징 중 하나는 한 번에 하나의 데스크만 처리하는 싱글 스레드로 동작한다는 건데 하지만 평소에 우리가 브라우저가 동작하는 것을 살펴보면 많은 태스크가 동시에 처리되는 것처럼 느껴지죠? 
HTML 요소가 애니메이션 효과를 통해 움직이면서 이벤트를 처리하는 것처럼요! 
이처럼 자바스크립트의 동시성을 지원하는 것이 이벤트 루프 event loop 에요!

 

• 이벤트 루프는 브라우저에 내장되어 있는 기능 중 하나입니다.
• 자바스크립트 엔진은 heap과 call stack으로 이루어져 있어요.
  •  이벤트 루프는 콜 스택에 현재 실행 중인 실행 컨텍스트가 있는지, 태스크 큐에 대기 중인 함수(콜백 함수, 이벤트 핸들러 등)가 있는지 반복해서 확인해요. 만약 콜 스택이 비어 있고 태스크 큐에 대기 중인 함수가 있다면 이벤트 루프는 순차적으로 테스크 큐에 대기 중인 함수를 콜 스택으로 이동시킵니다. 이때 콜 스택으로 이동한 함수는 실행됩니다. 
  • 즉, 태스크 큐에 일시 보관된 함수들은 비동기 처리 방식으로 동작합니다. 

 

callback queue = task queue = event queue

 

• 정리하자면 자바스크립트는 싱글 스레드로 동작하지만 브라우저는 멀티 스레드로 동작합니다.

 

읽어주셔서 감사합니다! 😎