[데브코스] 2일차 TIL
공부
자바스크립트
javascript
데브코스
TIL
2022-03-22

들어가며

2일차 내용이 갑자기 어려워졌다. 마냥 어렵다기 보단 새로운 개념이 많이 등장하다 보니 낯설어서 그런 것 같다. 처음 강의 들을 때는 무슨 소린지 하나도 모르겠었는데 두 번째 듣다보니 어느 정도 이해가 되는 것 같다. 역시 겁먹지 말고 반복해서 공부하면 몰랐던 것도 이해할 수 있나보다.

브라우저에 URL을 입력하면 무슨 일이 일어날까?

브라우저의 주소창에 URL을 입력하고 엔터를 누르면 곧 페이지가 등장한다. 이 과정은 매우 짧은 시간동안 일어나지만 생각보다 많은 과정을 거친다. 어떤 과정을 거쳐 브라우저에 우리가 원하는 URL의 페이지가 렌더링 되는 걸까?

  1. URL을 해석한다.
    URL은 다음과 같은 형태를 가지고 있다. scheme://<user>:<password>@<host>:<port>/<url-path>

    • scheme: 프로토콜을 의미한다. http, https, ftp, mailto 등이 있다.
    • user, password: ftp, mailto 프로토콜을 사용할 때 사용한다.
    • host: 호스트 예) naver.com, programmers.co.kr
    • post: 포트 번호
    • url-path: 특정한 파일이 있는 경로를 의미한다.

    브라우저에 URL을 입력할 경우 scheme 은 http 또는 https 이다.

  2. DNS를 조회한다.
    DNS는 Domain Name Server의 약자로, 도메인과 IP 주소를 변환하는 역할을 한다. 변환하는 과정이 없다면 우리는 웹사이트에 접속할 때 사이트를 호스팅하는 서버의 IP 주소를 통해 접근할 수 있을 것이다. IP 주소를 외우는 것은 힘들기 때문에 도메인 주소를 통해 쉽게 접속할 수 있는 것이다. 조회하는 과정은 아래와 같다. 1. 브라우저의 캐시를 확인한다. 브라우저는 내가 이전에 방문한 웹 사이트의 DNS를 일정 기간동안 저장한다. 캐시된 DNS 정보가 있을 경우 IP 주소를 반환한다. 2. 로컬에 저장된 hosts 파일을 탐색한다. 찾는 정보가 있다면 IP 주소를 반환하고 없다면 DNS를 호출한다. 3. DNS의 호출 과정에는 재귀 확인자, 루트 네임서버, TLD 네임서버, 권한 있는 네임서버가 사용된다. 이 과정을 통해 최종적으로 도메인에 맞는 IP 주소를 반환한다.

  3. 해당 IP가 존재하는 서버로 이동한다.
    이때 네트워크 장비인 라우터를 통해 이동한다.

  4. ARP를 이용해 IP 주소를 MAC 주소로 변환한다.
    ARP는 Address Resolution Protocol (주소 변환 프로토콜) 의 약자이다. IP 주소를 물리적인 MAC 주소로 변환하는 역할을 수행한다.

    IP 주소를 MAC 주소로 변환해야 하는 이유?

    IP 주소는 논리적 주소, MAC 주소는 물리적 주소이다. 일상생활에서의 주소를 보면 도로명 주소 또는 지번 주소가 있고, 주소에 맞는 위치를 위도와 경도를 통해 나타낼 수 있다. 위도와 경도는 고정되어 있는 값이고, 지번 주소와 도로명 주소는 지번 주소에서 도로명 주소로 바뀐 것처럼 언제든 바뀔 수 있는 값이기 때문에 고정된 값으로 변환해주는 과정이 필요하다고 이해했다.

  5. TCP 통신을 통해 Socket을 연다.
    TCP는 TCP/IP 모델의 3계층인 Transport 계층의 프로토콜이다. 3-way handshake 를 통해 통신을 준비한다.

  6. 서버가 응답을 반환한다.
    브라우저에서 URL을 입력했기 때문에 서버는 HTML을 반환하게 된다.

  7. 브라우저에서 렌더링 통해 사용자에게 화면을 보여준다.
    서버에서 반환 받은 HTML을 파싱해 DOM Tree를 생성하고, 이를 사용해 화면을 그려준다. 스크립트가 있다면 스크립트를 실행하며 과정은 마무리된다.

암호화

평문을 해독할 수 없는 암호문으로 변환하는 과정을 암호화라고 한다. 암호화는

  1. 단방향 암호화
  2. 양방향 암호화

두 가지 종류로 나눌 수 있다. 단방향 암호화는 보통 해시 알고리즘을 이용해 암호화를 진행한다. 복호화가 불가능하기 때문에 비밀번호를 저장하는 것과 같이 평문을 알면 안되는 상황에 사용한다. 양방향 암호화는 복호화가 가능한 방법이다. 크게 대칭키와 비대칭키 방법으로 나뉜다. 대칭키 암호화는 암호화에 사용하는 키와 복호화에 사용하는 키가 같다. 이때 암호문을 여러 사람에게 나누어주려면 모든 사람에게 같은 키를 나누어 줘야 하기 때문에 보안에 취약할 수 있다. 이런 문제를 해결하기 위해 비대칭키 암호화를 사용한다. 이 방법은 공개키와 개인키를 사용하는데, 평문을 암호화 할 때는 공통된 공개키를 사용하고 암호문을 평문으로 복호화할 때는 개인이 가지고 있는 개인키를 사용해 복호화한다. 비대칭키 암호화 방법은 HTTPS 통신에서도 사용된다.

함수형 프로그래밍

함수를 최소 단위로 프로그래밍 하는 것을 함수형 프로그래밍이라고 한다. 함수형 프로그래밍의 장점으로 사이드 이펙트가 없고, 함수를 최소 단위로 하기 때문에 재사용성이 높고, 코드가 짧고 간결하다는 점이 있다. 그러나 이는 단점이 될 수도 있다. 사이드 이펙트가 없다는 장점은 변수 조작을 할 수 없다는 단점이 되고, 재사용성이 높은 대신 쪼개진 함수가 많아 복잡할 수도 있다. 또, 코드가 짧고 간결하다는 장점은 높은 숙련도를 요구한다는 단점이 되기도 한다.

객체 지향 프로그래밍

객체는 현실에 있는 것을 추상화 한 것이다. 여기서 추상화란 사물이 지니고 있는 여러 측면 중 특정한 부분만 보는 것을 의미한다. 객체 위주로 설계하고 프로그래밍 하는 패러다임이 객체 지향 프로그래밍이다. 함수형 프로그래밍에서의 최소 단위가 함수인 것 처럼 객체 지향에서는 객체가 최소 단위이다.

객체 지향에 오해를 가지고 있는 게 있는데 객체지향과 언어는 관계가 없고, 패러다임의 우선순위는 없다는 것이다. 나 또한 객체 지향을 잘 모르고 있었기 때문에 얼핏 본 정보로만 판단하고 객체 지향형 언어가 따로 있다고 생각하고, 객체 지향 프로그래밍이 더 좋은 프로그래밍 패러다임이라고 생각하고 있었다. 그러나 언어에 상관 없이 객체 지향 프로그래밍을 할 수 있고, 상황에 따라 절차 지향 프로그래밍이 더 간결한 코드로 나타낼 수 있기 때문에 우선순위는 없다.

함수형과 객체 지향의 차이?

함수형과 객체 지향의 차이를 코드를 통해 알아보고자 한다.
만약 "12345" 와 같은 문자열을 입력 받아 각 숫자들의 합을 출력하는 프로그램을 만들어야 한다고 가정하자. 이때, 함수형과 객체 지향 코드는 아래와 같다.

  • 함수형

    1  const string = "12345";
    2  console.log(
    3    string
    4      .split("")
    5      .map((e) => parseInt(e))
    6      .reduce((prev, cur) => prev + cur, 0)
    7  ); // 15

  • 객체 지향

    1  function StringNumber(string) {
    2    this.string = string;
    3  }
    4  StringNumber.prototype.calculate = function () {
    5    const string = this.string;
    6    this.sum = 0;
    7    for (let i = 0; i < string.length; i++) {
    8      this.sum += parseInt(string[i]);
    9    }
    10  };
    11  const stringNumber = new StringNumber("12345");
    12  stringNumber.calculate();
    13  console.log(stringNumber.sum); // 15

    함수형 코드를 보면 문자열을 쪼개고 숫자형으로 바꾸고 그 숫자들을 더하는 함수들로 이루어져 있다. 객체 지향 코드는 문자열을 숫자로 변경하고 합을 출력하는 객체로 이루어져 있다. 간단한 문제여서 그런지 객체 지향으로 코드를 작성했을 때 불필요하게 코드가 길어진 느낌이 있다.

자바스크립트의 프로토타입

자바스크립트의 객체는 속성과 행위를 정의할 수 있다.

1  const Person = {
2    name: "jeongki", // 속성
3    age: 26, // 속성
4    eat: function (food) {
5      // 행위
6      console.log(`eating ${food}...`);
7    },
8  };
9  console.log(Person.name); // "jeongki"
10  console.log(Person.age); // 26
11  Person.eat("kimchi"); // "eating kimchi..."
1  function Person(name, age) {
2    this.name = name;
3    this.age = age;
4    this.getName = function () {
5      return this.name;
6    };
7    this.setName = function (newName) {
8      this.name = newName;
9    };
10  }
11  

12  const lee = new Person("이정기", 26);
13  const hong = new Person("홍정기", 26);
14  console.log(lee);
15  console.log(hong);

생성자 함수를 만들어서 객체를 생성할 수도 있다. 이때 각각의 인스턴스는 같은 동작을 하는 getName 과 setName 메서드를 중복해서 가지고 있다. 이는 메모리 낭비를 유발하기 때문에 좋지 않다. 이를 해결하기 위해 프로토타입을 사용해보자.

1  function Person(name, age) {
2    this.name = name;
3    this.age = age;
4    Person.prototype.getName = function () {
5      return this.name;
6    };
7    Person.prototype.setName = function (newName) {
8      this.name = newName;
9    };
10  }
11  

12  const lee = new Person("이정기", 26);
13  const hong = new Person("홍정기", 26);
14  console.log(lee);
15  console.log(hong);

이렇게 사용하면 각각의 인스턴스는 Person의 prototype 객체에 접근해 getName 과 setName 메서드를 사용할 수 있다. 프로토타입은 상위 객체를 참조하고, 기존 객체를 효율적으로 사용하기 위해 만들어졌다.

자바스크립트의 이벤트 루프

자바스크립트의 특징을 검색 했을 때 싱글 스레드, 이벤트 루프 기반 언어라는 설명을 본 적이 있다. 만약 싱글 스레드 언어라면 자바스크립트는 비동기를 어떻게 수행할 수 있는 걸까? 엄밀히 말하면 자바스크립트 엔진은 싱글 스레드이기 때문에 비동기를 구현할 수 없다. 대신, 브라우저나 Node.js의 이벤트 루프를 통해 비동기를 구현한다.

자세한 설명과 이미지는 주말에 추가하는 걸로...

모듈

주말 추가 예정

정규표현식

주말 추가 예정

쿠키와 세션, 웹 스토리지

주말 추가 예정

정리

근본적인 원리에 대해서 배운 날이었다. 스스로 공부할 때는 이런 원리를 제대로 공부하지 않았던 것 같아서 반성하게 된다. 그래도 자세하게 공부할 수록 내부적으로 이런 일이 벌어지고 있었구나 하면서 재미있게 공부할 수 있는 것 같다. 강의 외적으로는 코로나 때문에 강의를 조금 밀렸는데 컨디션 회복해서 다시 진도 따라잡고 열심히 공부해야겠다!

참고자료

브라우저에 URL을 입력하면 어떤일이 벌어질까? https://velog.io/@khy226/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%97%90-url%EC%9D%84-%EC%9E%85%EB%A0%A5%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4%EC%9D%BC%EC%9D%B4-%EB%B2%8C%EC%96%B4%EC%A7%88%EA%B9%8C
https://medium.com/@maneesha.wijesinghe1/what-happens-when-you-type-an-url-in-the-browser-and-press-enter-bb0aa2449c1a
https://wangin9.tistory.com/entry/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%97%90-URL-%EC%9E%85%EB%A0%A5-%ED%9B%84-%EC%9D%BC%EC%96%B4%EB%82%98%EB%8A%94-%EC%9D%BC%EB%93%A4-1URL%EC%9D%84-%ED%95%B4%EC%84%9D%ED%95%9C%EB%8B%A4

OSI 계층, TCP/IP 모델 https://medium.com/harrythegreat/osi%EA%B3%84%EC%B8%B5-tcp-ip-%EB%AA%A8%EB%8D%B8-%EC%89%BD%EA%B2%8C-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-f308b1115359

TCP 연결 과정 https://livenow14.tistory.com/57

ARP란? https://musclebear.tistory.com/12

DNS 요청 과정 https://www.cloudflare.com/ko-kr/learning/dns/dns-server-types/ https://it-mesung.tistory.com/180

Loading script...
copyright 2021-2022. Jeongki.dev