HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
💌
JJong’s Archive/
🌞
JS/
2. 네트워크 기초 / 컴퓨터 시간 / 암호화 / 함수형 프로그래밍 / 객체 지향과 프로토타입 / 이벤트 루프 / 모듈 / 유니코드 / 정규 표현식 / 쿠키와 세션, 웹스토리지

2. 네트워크 기초 / 컴퓨터 시간 / 암호화 / 함수형 프로그래밍 / 객체 지향과 프로토타입 / 이벤트 루프 / 모듈 / 유니코드 / 정규 표현식 / 쿠키와 세션, 웹스토리지

1. 네트워크 기초

  • URL을 주소창에 입력하면 ?
      1. URL 해석
          • scheme://username-pwd@host:port/url-path
          • 여기서 //는 생략가능
      1. DNS 조회
          • 요청 전에 브라우저 캐시와 host 파일을 먼저 확인
          • 없다면 DNS 호출 → Root Server → TLD Server → Authoritative Server 검색
          • DNS : Domain Name System
          • 도메인과 IP를 변환한다.
          • 도메인과 호스트는 다르다
          • 보통 통신사(ISP)에서 DNS를 제공
          • DNS를 운영하는 서버 = Name Server
      1. 해당 IP가 존재하는 서버로 이동
          • 여러 동적 라우터로 이동
          • IP가 할당된 서버가 존재하는 대역으로 이동
      1. ARP로 MAC 주소 변환
          • Address Resolution Protocol
          • IP(논리주소)를 MAC 주소(실제 주소)로 변환하는 프로토콜
          • 네트워크 내에 ARP를 브로드캐스팅하면 해당 IP 주소를 가지고 있는 기기가 MAC 주소로 반환
            • 논리적 주소: 지번주소 (표기법 등으로 바뀔 수 있음)
            • 물리적 주소: 경도, 위도 (변하지 않는 고유주소, 실제 위치를 알기 위해 필요하다.)
      1. TCP 통신으로 Socket 열기
          • 패킷 전달
          • 3-way-handshake로 연결 요청
          • 요청 수락하면 패킷 받아 처리
      1. 서버는 응답 반환
          • HTTP 프로토콜로 들어온 패킷을 읽고 처리
          • 요청에 따른 응답 반환
          • ex. 요청: url 주소 → 응답: html
      1. 브라우저가 렌더링
          2. 1) HTML을 읽어서 DOM Tree 구축
          2) DOM Tree를 이용해 화면 그리기
          3) 스크립트 실행
      과제 : hhtps 탄생 이유, https에서 추가된 것

2. 컴퓨터 시간 원리

  • 시간= 물리량, 위치, 천문 현상에 따라
  • 시간 표현 → 문화, 역사, 사회에 따라
  • 이를 UTC로 표준화
  • 컴퓨터가 시간을 표현하는 법(시스템 시간)
      1. 하드웨어의 시스템 클럭 틱을 셈
          • 시스템 클럭 : RTC(Real Time Clock)모듈 사용
          • 카운터 회로를 통해 클럭 발생
          • 메인보드에 있어서 전원과 상관 x
      1. 시스템 시간을 값으로 표현⇒ 타임스탬프(Unix Time)
          • Unix Time : 1970.01.01 00:00:00 기준으로 1초당 +1
          • 기준의 특별한 이유는 없당
      1. 운영체제마다 다를 수 있다.
  • 컴퓨터의 현재 시간?
    • NTP : Network Time Protocol) 서버에 네트워크 요청하여 동기화
      • NTP: 트리구조 계층(stratum)으로 이루어져 있음
      • 최상위 계층 : PRC(primary reference clock)
  • 나라별 시간데 DB
    • Time Zone 데이터 이용
    • 현실세계 이벤트가 발생하면 업데이트 됨 = ZoneId
    • 대륙 / 도시 형태(Asia/ Seoul)
  • 어떤 기준으로 시간 사용?
    • 서비스에서 사용되는 시간을 용도에 맞춰서 기록할 필요가 있음
        1. 순수한 시간 사용 (ex. 기념일)
        1. 기준을 가지고 사건이 발생한 시각만 고려 ⇒ UTC 이용 (ex. 주식 로깅)
        1. 역사, 사회, 문화를 고려 ⇒ TimeZone 적용, 사용자 정보에 따라(SNS 등)
  • JavaScript에서 사용법
    • Date 객체
    • date-fns, luxon으로 TimeZone 표현

3. 암호화

: 평문 → 암호문
  1. 단방향(해싱) 암호화
      • 해시 알고리즘 사용
      • MD5, SHA 알고리즘 사용
      • 복호화 불가 : 비밀번호를 저장하는 측도 모름
      • Rainbow table을 통해 원문을 알아낼수 o
        • 평문, 해시함수로 만든 문자열을 모두 저장시켜놓은 구조
        • salt, key stretching을 이용하여 방지 가능
        • salt : 평문에 임의의 문자열을 더한 것
        • key stretching : 해시 알고리즘을 여러번 반복
        • ex) PBKDF2, bcrypt
  1. 양방향 암호화
      • 평문을 복호화 할 수 있는 형태로 암호화
        • 대칭키 : AES(Advanced Encryption Standard) 알고리즘
          • 같은 키를 이용하여 암호화, 복호화
        • 비대칭키 : RSA
          • 공개키→암호화 / 개인키 → 복호화
          • 다수를 상대하기 적합
          • 소인수분해를 기반으로 만들어지 알고리즘
          • http에서 사용
  1. 브라우저에서 암호를 저장 : 1password
  1. JS에서 암호화 : crypto-js(bcrypt는 구현 x)

4. 함수형 프로그래밍

  • 프로그램은 순차, 분기, 반복, 참조로 구성
  • 패러다임 : 4가지 요소를 어떻게 이용할 것인가 다룸
  • 객체지향 ⇒ 데이터+메서드의 객체끼리 표현
  • 함수형 ⇒ 데이터를 함수를 통해 새로운 데이터로 만들어냄
  • 함수형 패러다임
    • 최소 단위 : 함수
    • 재사용성 많아짐
    • 불변성을 지향
    • 동작 예측 쉬웅, 사이드 이펙트(ex. 스레드의 동시성 문제) 방지
    • 4개의 제어흐름의 전환을 변수할당을 통해 통제
      • cf) 객체지향 : 4개의 제어흐름의 전환을 객체 지향 객체를 통해 통제
  • 함수형 프로그래밍의 장점
    • 상태x 이므로 사이드 이펙트x
    • 코드가 간결
    • ex) ~.split.map.reduce
  • 선언형 프로그래밍과 가까움
    • 어떻게(명령형)보다 무엇을에 대한 패러다임
    • 어떻게는 컴퓨터에 위임
    • filter, forEach
  • Data Flow : Stateless, pipe 등
    • Control Flow : 조건, 반복 등
  • JS는 멀티 패러다밍이 가능 (객체지향+함수형)

5. 객체지향과 프로토타입

객체지향

  • 객체 : 현실에 있는 것을 추상화
    • 추상화 : 사물의 여러 측면 중 특정 부분만 보는 것
  • 객체 지향
    • 객체 위주로 설계, 프로그래밍 하는 패러다임
    • 객체가 최소단위
    • 서로 메세지 주고 받으며 통신
  • 패러다임은 언어와 관계가 x
    • JS는 프로토 타입을 통해 객체지향을 표현

프로토타입

  • 객체 생성 방법
      1. {}
      1. object 생성자 함수(new Object())
      1. 생성자 함수를 직접
  • 프로토타입 ??
    • 기존의 객체를 복사하여 새로운 객체를 생성한다.
    • 함수를 prototype 객체 안에 추가
      • ex. JS에서는 객체명.prototype.getName(setName)
      • ⇒ 하위 객체는 상위 객체를 바라봄
      • 객체는 각자 proto라는 객체를 가지고 있음
  • 프로토타입을 잘 사용하는 방법
    • 상속 흉내내기
      • 하위객체, prototype = 상위객체 생성자
      • 하위 생성자에서 부모객체.apply()를 사용해야 부모 객체의 생성자 사용 가능
      • object.create() ⇒ 기존 객체를 재활용 할 수 o : 객체 복제

6. 이벤트 루프

7. 모듈

8. 유니코드

9. 정규표현식

10. 쿠키와 세션, 웹 스토리지

  • HTTP 요청은 기본적으로 상태가 존재하지 않음
  • 따라서 서버는 어떤 브라우저에서 요청이 온건지 알 수 없음 -> 헤더에 쿠키를 담아서 해결

10.1. 쿠키

: 클라이언트에서 저장, 관리하는 데이터
  • 브라우저를 닫아도 데이터를 유지할 수 있음
  • 서버에서 Set-Cookie를 응답헤더로 -> 클라이언트가 알아서 받고 파싱해서 저장
  • 혹은 클라이언트에서 자체적으로 조작도 가능
  • 각 상태에 수명 지정 가능

10.1.1. Set-Cookie

  • 키=값; 옵션 형태
  • 클라이언트가 받고 파싱해서 쿠키에 데이터를 추가
  • 옵션
    • Expires : 쿠키의 만료 날짜
    • Secure : https에서만 쿠키 전송
    • HttpOnly : js에서 쿠키에 접근하지 못하도록 함(XSS 공격 대응 가능, but 요즘은 어려움)
    • Max-Age : 쿠키의 수명 (Expires는 무시됨)
    • Domain : 도메인이 일치하는 요청만 쿠키 전송
    • Path : 경로가 일치하는 요청만 쿠키 전송

10.1.2. 쿠키의 취약점

  • XSS(Cross-Site Script) 공격을 당할 수 있음, 즉 JS를 이용해 다른 사용자의 쿠키값을 탈취할 수 있음
  • 쿠키를 암호화하지 않고 보내면 역시나 탈취가능 => HTTPS로 해결 가능

10.2. 세션

사실 쿠키를 보내도 서버는 사용자를 구분할 수 없음

10.3. 웹 스토리지

  • 클라이언트에 데이터를 저장하는 새로운 방법
  • HTML5부터 등장
  • 로컬 스토리지
    • 반 영구적(브라우저가 종료돼도 데이터가 남음)
    • 저장했던 도메인과 이용하는 도메인이 다른 경우엔 접근 불가
    • key-value 형태로 저장
  • 세션 스토리지
    • 새창 마다
    • 브라우저 닫으면 사라짐
    • 같은 도메인이어도 세션이 다르면 접근 불가
    • key-value 형태
  • 두 스토리지는 같은 인터페이스를 가진다.
    • ex) localStorage.setItem / SessionStorage.setItem
  • Indexed DB
    • Transactional한 로컬 DB
    • 새로운 웹 브라우저 표준 인터페이스