2일차 배운 것 정리 (1)

목차

1. 브라우저에 URL을 입력하면 발생하는 일

브라우저에 URL을 입력하면 발생하는 일

• Domain Name System
• 도메인 주소를 IP주소로 요청하는 과정

• 1) 로컬호스트와 브라우저 캐시에 해당 URL 존재하는 지 확인 → IP주소 요청 2) 없다면, root DNS 서버에 URL의 IP주소 요청 3) 없다면, .com 도메인에 대한 하위 TLD이름 서버에 요청 4) 발견했다면 해당 IP주소를 반환하고, 다음 번에 빠르게 반응하기위해 일정시간 IP주소를 캐싱

• 라우터를 통해 해당 서버가 존재하는 서버의 게이트웨이까지 이동

• ARP: Address Resolution Protocol
• 논리주소인 IP 주소를 물리 주소인 MAC 주소로 변환하는 프로토콜
• MAC 주소는 기계의 실제 위치를 의미하는 고유한 주소이므로 실제 통신에 사용된다.
• gps좌표와 같다. (37.567, 126.71)
• ARP는 논리주소인 IP주소(서울-양천구-신정동) 을 통해 범위를 좁혀나간 후 최종적으로 실제 위치인 MAC 주소(gps좌표) 를 반환한다.
 

• 대상 서버와 통신을 위한 TCP 소켓 연결

• 소켓연결은 3-way-handshake 과정을 통해 진행 (추가블로깅 필요)

• HTTP/HTTPS 프로토콜로 들어온 패킷을 읽고 처리

• 요청에 따른 적절한 응답 값을 반환

• HTML 파일을 읽어 DOM Tree 구축

• DOM Tree를 화면에 렌더링

• 스크립트 실행

선택과제

• http가 있음에도 불구하고 https가 왜 탄생했는지
• 암호화 위해

• https가 생김으로 인해 기존과정에서 무엇이 추가되는지
• TLS 핸드쉐이킹 과정(암호화)

2. 컴퓨터 시간 원리

2-1. 시간이란?

모든 조건을 만족하는 시간을 정하는 것은 어렵다. 따라서 표준화된 시간 필요 ⇒ UTC

2-2. 협정 세계시 UTC

• 원자 시계와 윤초보정을 통해 표준화한 시각

• 모든 시간대를 UTC+0을 기준으로 함

2-3. 컴퓨터가 시간을 표현하는 방법

Unix Time

• 1970년 1월 1일 0시 0분 0초를 기준 시각으로 함

3. 암호화

3-1. 암호화란

• 평문을 해독할 수 없는 암호문으로 변환하는 것

• 단방향(해싱)과 양방향 암호화 존재

단방향 암호화

해시 알고리즘을 통해 평문을 복호화할 수 없는 형태로 암호화하는 방법

• 사용자 비밀번호 등 알 수 없어야 하는 데이터에 주로 사용

• SHA-256 알고리즘 많이 사용

• Rainbow Table등을 통해 해커가 원문을 알아낼 수 있다.
• 탈취당하더라도 원문을 알아낼 수 없도록 조치가 필요
• Salt : 평문에 임의의 문자열을 추가하여 암호화 하는 방법
• Key stretching : 해시를 여러번 반복하여 원문을 알기 힘들게 만드는 방법
 

양방향 암호화

평문을 복호화 할 수 있는 형태로 암호화 하는 방법

• 대칭키와 비대칭키 알고리즘으로 나뉨

AES 대칭키 암호화

• 같은 키를 이용하여 암호화와 복호화 진행

 

• 많은 사람들에게 사용할 때 보안을 강화하기 위해 등장한 방식

• 모든 사람이 접근 가능한 공개키와 사용자만 가지고 있는 개인키로 구성

브라우저의 암호화 방식

4. 함수형 프로그래밍

4-1. 함수형 패러다임

프로그램은 순차, 분기, 반복, 참조로 구성된다. 패러다임은 위 4가지 요소를 어떻게 이용할 것인가를 다룬다.

객체지향과 함수형프로그래밍

4-2. 함수형 프로그래밍의 장단점

a 사이드 이펙트 없다

b 재사용성 높다

c. 코드가 짧고 간결하다

선언형 프로그래밍

• 함수형프로그래밍 == 선언형 프로그래밍
• 명령형 프로그래밍 = 절차지향형
• Goto, if-else, for-while
• 함수형 프로그래밍 == 선언형,
• Stateless, Recursion, Pipe

멀티패러다임

• 굳이 나눌 필요가 없다.

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

5-1. 객체지향이란

1. 객체란

객체지향의 객체는 현실에 있는 것을 “추상화”한 것

2. 객체지향이란?

객체 위주로 설계하고 프로그래밍하는 패러다임

5-2. 프로토타입

• 클래스 기반 언어처럼 속성과 행위를 정의할 수 있다.

• 객체 리터럴, Object, 생성자함수

• 생성자로 객체 생성 시 같은 속성에 대한 메모리 낭비

효과적인 프로토타입 사용

6. 이벤트루프

6-1.이벤트 루프란

• 이벤트루프는 js가 아닌 브라우저, node.js 관리하는 기능

• js는 싱글쓰레드, 브라우저는 멀티쓰레드

6-2. 이벤트루프의 동작과정

콜스택 → WebAPI (비동기작업) → TaskQueue

선택과제

• MicroTask Queue, Animation Queue

7. 모듈

모듈이란

• 전역스코프의 변수들 사용

• 스크립트간의 의존도 파악

모듈과 컴포넌트 용어 정리

• 모듈은 의식적인 것

• 컴포넌트는 -

Http-server를 통한 실습

• use strict로 실행

• 모듈레벨스코프 존재

• 단 한 번만 평가 된다

• 지연 실행이 가능하다

8. 유니코드

8.1 유니코드란

전 세계 문자를 다룰 수 있도록 하는 표준 시스템

9. 정규표현식

정규표현식 목적

• 패턴을 이용하여 문자검색(search), 문자대체(replace), 문자추출(extract)

정규표현식 연습 사이트

• 정규표현식 테스트 사이트
Rubular
Ruby-based regular expression editor/tester

https://rubular.com/

• 정규표현식 퀴즈 사이트 (모든 문제 풀이완료)
RegexOne - Learn Regular Expressions - Lesson 1: An Introduction, and the ABCs
Regular expressions are extremely useful in extracting information from text such as code, log files, spreadsheets, or even documents. And while there is a lot of theory behind formal languages, the following lessons and examples will explore the more practical uses of regular expressions so that you can use them as quickly as possible.

https://regexone.com/

정규표현식 연습

9-2. 패턴과 플래그

패턴

플래그

js에서는 6개의 플래그 사용가능

9-3. JS에서의 정규표현식

생성방법

1. RegExp 객체로 정규표현식 생성

const regExp1 = new RegExp("^\d+") // 표현식
const regExp2 = new RegExp("^\d+","gi") // 표현식+플래그

1. 리터럴 방식으로 생성

const regexp1 = /^\d+/;
const regexp2 = /^\d+/gi;

Test

문자열에 찾는 패턴이 있는지 없는지 여부를 리턴

const msg1 = "010-3314-7155"
const msg2 = "kocon135@gmail.com"

const regExp = /\d{3}-\d{3,4}-\d{4}/

regExp.test(msg1) // true
regExp.test(msg2) // false

exec

문자열에 찾는 패턴에 대한 정보를 배열의 형태로 제공, 없다면 null 반환

const msg1 = "010-3314-7155"
const msg2 = "kocon135@gmail.com"

const regExp = /\d{3}-\d{3,4}-\d{4}/

regExp.exec(msg1) // ['010-3314-7155', index: 0, input: '010-3314-7155', groups: undefined]
regExp.exec(msg2) // null

match

replace

search

9-4. 예제 풀이

Run-length encoding

AAAAAABBBDFFFFFFFKK → 6A3B1D7F2K 로 만드는 정규표현식

const regexp = /(.)\1*/g;
const word = 'AAAAAABBBDFFFFFFFKK'

word.match(regexp)
		.reduce((acc,cur)=>(acc + (cur.length + cur.slice(0,1))),"");

// '6A3B1D7F2K'

개미수열

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

10-1. HTTP 통신

→ HTTP의 무상태성으로 인해 쿠키/세션 등장

10-2. 쿠키

Set-Cookie 옵션

• Expires

• Secure

• HttpOnly

• Max-Age

• Domain

• Path

쿠키의 취약점

• XSS(Cross-Site-Script) 공격

10-3. 세션

• 서버가 사용자를 구별하기 위한 방법

• 사용자가 많아서 서버가 여러대가 된다면 인증기능을 하기 어렵다 → JWT 토큰 사용

10-4. 웹스토리지

• 클라이언트에 데이터를 저장하기 위한 새로운 방법

• 반영구적 저장

10-5. 세션스토리지

• 새창을 생성할 때 마다 개별적으로 저장되는 데이터

• key-value 형태로 저장