TIL 이미지

1. 자바스크립트 - 모듈

  • 코드를 모듈화해서 작성하는 것을 말한다.

  • 모듈화하지 않으면 전역 스코프에 코드들이 모이며, 이름 충돌이 발생할 우려가 있다.
    규모가 큰 프로젝트일수록 모듈화를 해야 한다.

  • 모듈을 사용하면 이름 충돌을 방지할 수 있다.
    코드를 각각 분리하므로 가독성이 높아진다.
    코드의 재사용성이 높아진다.

  • html을 통해 모듈을 결합하여야 한다. 모듈은 로컬 파일에서 동작하지 않는다.
    HTTP 또는 HTTPS 프로토콜을 통해서만 동작한다.

  • 모듈과 컴포넌트는 자주 혼용된다.
    모듈은 설계 시점에 의미있는 요소이며, 컴포넌트는 런타임(실행) 시점에 의미있는 요소이다.

  • 모듈의 특징
    1. 모듈은 항상 use strict(엄격 모드)로 실행된다.
    2. 모듈의 자체 레벨 스코프가 있다.
    3. 여러 번 import해도 단 한 번만 평가된다.
    4. 지연 실행된다.
      (기본적으로 defer로 동작한다. 즉, 모든 DOM이 만들어진 뒤에 실행된다)

  • 다만 Webpack 등을 이용하여 번들링한 스크립트를 불러오므로
    type=”module”을 사용하는 경우는 많지 않다.

2. 네트워크 기초

  • 브라우저는 일반적으로 다음과 같은 절차로 작동한다.
    1. URL을 해석한다.
    2. DNS를 조회한다.
    3. 해당 IP가 존재하는 서버로 이동한다.
    4. ARP를 이용하여 MAC 주소 변환을 한다.
    5. TCP 통신을 통해 Socket을 연다.
    6. 서버는 응답을 반환한다.
    7. 브라우저를 렌더링한다.

  • HTTPS
    HTTP protocol의 암호화된 버전이다. S는 Secure을 의미.
    클라이언트가 민감한 정보를 서버와 안전하게 주고받도록 해준다.

  • 쿠키
    클라이언트에서 저장, 관리하는 데이터.
    브라우저를 닫아도 데이터를 유지할 수 있다.
    각 상태에 수명을 정할 수 있다.

  • 쿠키의 취약점
    XSS 공격을 당할 수 있다.
    쿠키값을 중간에 탈취 당할 가능성이 있다. (HTTPS를 사용하면 이를 해결할 수 있다)

  • 세션
    쿠키의 HTTP Session ID를 식별자로 사용자를 구분한다.
    서버는 자체적으로 기록하고 관리한다.
    그러나, 최근에는 인증 용도로 사용하지 않는다.

  • 웹스토리지
    클라이언트에 데이터를 저장하기 위한 새로운 방법. HTML5부터 등장.
    쿠키에서 하기 힘든 것들을 지원하기 위해 등장했다.

    • 로컬 스토리지
      데이터를 저장하면 반영구적으로 데이터가 저장
    • 세션 스토리지
      새 창을 생성할 때마다 개별적으로 저장되는 데이터를 관리

  • IndexedDB
    • 트랜잭션을 사용하는 데이터베이스 시스템
    • 새로운 웹 브라우저 표준 인터페이스

참고자료

데브코스 2일차 강의