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

1. 네트워크 기초

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

2. 컴퓨터 시간 원리

• 시간= 물리량, 위치, 천문 현상에 따라

• 시간 표현 → 문화, 역사, 사회에 따라

• 이를 UTC로 표준화

• 컴퓨터가 시간을 표현하는 법(시스템 시간)
1. 하드웨어의 시스템 클럭 틱을 셈
• 시스템 클럭 : RTC(Real Time Clock)모듈 사용
• 카운터 회로를 통해 클럭 발생
• 메인보드에 있어서 전원과 상관 x
2. 시스템 시간을 값으로 표현⇒ 타임스탬프(Unix Time)
• Unix Time : 1970.01.01 00:00:00 기준으로 1초당 +1
• 기준의 특별한 이유는 없당
3. 운영체제마다 다를 수 있다.

• 컴퓨터의 현재 시간?
• NTP : Network Time Protocol) 서버에 네트워크 요청하여 동기화
• NTP: 트리구조 계층(stratum)으로 이루어져 있음
• 최상위 계층 : PRC(primary reference clock)

• 나라별 시간데 DB
• Time Zone 데이터 이용
• 현실세계 이벤트가 발생하면 업데이트 됨 = ZoneId
• 대륙 / 도시 형태(Asia/ Seoul)

• 어떤 기준으로 시간 사용?
• 서비스에서 사용되는 시간을 용도에 맞춰서 기록할 필요가 있음
1. 순수한 시간 사용 (ex. 기념일)
2. 기준을 가지고 사건이 발생한 시각만 고려 ⇒ UTC 이용 (ex. 주식 로깅)
3. 역사, 사회, 문화를 고려 ⇒ TimeZone 적용, 사용자 정보에 따라(SNS 등)

• JavaScript에서 사용법
• Date 객체
• date-fns, luxon으로 TimeZone 표현

3. 암호화

1. 단방향(해싱) 암호화
• 해시 알고리즘 사용
• MD5, SHA 알고리즘 사용
• 복호화 불가 : 비밀번호를 저장하는 측도 모름
• Rainbow table을 통해 원문을 알아낼수 o
• 평문, 해시함수로 만든 문자열을 모두 저장시켜놓은 구조
• salt, key stretching을 이용하여 방지 가능
• salt : 평문에 임의의 문자열을 더한 것
• key stretching : 해시 알고리즘을 여러번 반복
• ex) PBKDF2, bcrypt

2. 양방향 암호화
• 평문을 복호화 할 수 있는 형태로 암호화
• 대칭키 : AES(Advanced Encryption Standard) 알고리즘
• 같은 키를 이용하여 암호화, 복호화
• 비대칭키 : RSA
• 공개키→암호화 / 개인키 → 복호화
• 다수를 상대하기 적합
• 소인수분해를 기반으로 만들어지 알고리즘
• http에서 사용

3. 브라우저에서 암호를 저장 : 1password

4. 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. {}
2. object 생성자 함수(new Object())
3. 생성자 함수를 직접

• 프로토타입 ??
• 기존의 객체를 복사하여 새로운 객체를 생성한다.
• 함수를 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
• 새로운 웹 브라우저 표준 인터페이스