네트워크 기초
1. 웹페이지 로딩 과정
1) URL을 해석한다 (scheme://<user>:<password>@<host>;<port>/<url-path>)
2) DNS를 조회한다
- DNS는 도메인과 IP 주소를 서로 변환
- DNS로 요청을 보내기 전에 브라우저 캐시와 hosts 파일을 참조 (있다면 ip를 반환함)
- DNS는 보통 통신사(ISP)에서 제공하는 것을 사용
- DNS을 운영하는 서버를 보통 Name Server라고 부름
3) 해당 IP가 존재하는 서버로 이동
4) ARP를 이용하여 MAC 주소로 변환
* 네트워크 내 ARP를 브로드캐스팅 시 해당 IP 주소를 가진 기기가 MAC 주소 반환
* IP주소 - 논리적 주소, MAC 주소 - 물리적 주소
5) TCP 통신을 통해 Socket을 연다
- 네트워크를 통해 해당 기기로 패킷을 전달
- 3 way handshake로 연결 요청, 요청 수락 시 패킷을 받아 처리함
6) 서버가 응답 반환 (패킷을 읽고 처리)
7) 브라우저는 렌더링 - html을 읽어 Dom Tree를 구축함
💡 HTTP vs HTTPS
HTTP는 Hyper Text Transfer Protocol의 줄임말으로써 서버와 클라이언트간에 데이터를 주고 받는 프로토콜 !
서버와 클라이언트간 통신에 있어 보안 조치가 없기에 정보 유출 위험이 있음
👉 해결 방법 : HTTPS
HTTPS는 SSL 위에 HTTP를 얹어서 보안이 보장된 통신을 하게 해준다 (SSL 암호화 통신)
HTTPS는 대칭키/비대칭키 암호화 방식 둘다 사용한다.
◼ 동작 과정
- 서버와 클라이언트 간 세션 키(대칭키)를 교환한다.
* 처음 연결 시 세션키 공유과정에서는 비대칭키가 사용되며, 이후 데이터를 교환하는 과정에선 대칭키를 사용함
- 클라이언트(브라우저)가 서버로 최초 연결 시도를 함
- 서버는 공개키(엄밀히는 인증서)를 브라우저에게 넘겨줌
- 브라우저는 인증서의 유효성을 검사하고 세션키를 발급함
- 브라우저는 세션키를 보관하며 추가로 서버의 공개키로 세션키를 암호화하여 서버로 전송함
- 서버는 개인키로 암호화된 세션키를 복호화하여 세션키를 얻음
- 클라이언트와 서버는 동일한 세션키를 공유하므로 데이터를 전달할 때 세션키로 암호화/복호화를 진행함
출처 : [Web] HTTP와 HTTPS의 개념 및 차이점 (tistory.com)
컴퓨터 시간 원리
1. 컴퓨터 시간
- 시간은 물리량, 위치, 천문 현상, 문화/역사/사회에 의해 결정될 수 있다.
◼ 협정 세계시 : 원자 시계와 윤초 보정을 기반으로 표준화한 시각
1) 컴퓨터 시간 표현 방법
- 하드웨어의 시스템 클럭 사용
- 특정 시각을 기준으로 시스템 클럭의 틱(초단위 클럭)을 세는 것으로 구현 = 시스템 시간
- 시스템 시간을 값으로 표현한 것을 타임 스탬프
* 유닉스에서 시간 표시 : Unix Time
2) 시스템 클럭 원리
- RTC(Real Time Clock) 모듈 사용
- RTC는 메인보드에 붙어있으며 전원을 끄더라고 계속 작동한다
- RTC는 카운터 회로를 통해 클럭을 발생시킨다(1클럭 = 32.768kHz)
3) Unix Time
- 1970년 1월 1일 0시 0분 0초가 기준 시각 ( 이전시간은 음수 )
4) 현재시간을 알아내는 법?
- NTP(Network Time Protocol) 서버에 네트워크 요청을 하여 현재 시간을 받을 수 있음!
* NTP는 Stratum이라는 계층으로 되어 있으며, 최상위 계층은 PRC라고 함
- 지역별 시간대는 Time Zone 데이터를 이용하며 대륙/도시 형태의 표기법을 따른다(Zoneld)
👉 서비스에서 사용되는 시간을 용도에 맞춰서 기록할 필요가 있음
5) UTC
- 역사, 사회, 문화에 대한 맥락없이 사건이 발생한 시각만을 고려할 때 사용
- TIME ZONE은 여러 요소를 고려한 사용자가 이용한 시각을 알아야 할 때 사용함
6) 자바스크립트에서 시각?
- Date 객체를 이용할 수 있다 - UTC 기준
* Time Zone을 적용해야 하는 경우 date-fns, luxon, (moment.js) 을 사용할 수 있다.
암호화
1. 암호화
- 평문을 해독할 수 없는 암호문으로 변환하는 것을 뜻함
1) 단방향 암호화
- 해시 알고리즘을 이용하여 평문을 복호화 할 수 없는 형태로 암호화 함
- Rainbow Table로 원문을 알아 낼 수 있는 취약점이 있다. => Key streching을 이용해 해결 가능
* Key stretching : 해시를 여러번 반복하여 원문을 알기 어렵게 하는 방법
* Salt : 평문에 임의의 문자열을 추가하여 암호화하는 방법(128bit 이상 권장)
👉 Salt와 Key stretching을 이용한 알고리즘에는 PBKDF2, bycrpt(비밀번호 저장)가 있다.
2) 양뱡향 암호화
- 평문을 복호화 할 수 있는 형태로 암호화 하는 방법
ⓐ 대칭 키 : 같은 키를 이용하여 암호화, 북호화 가능
ⓑ 비대칭 키 : 공개키와 개인키 2개가 존재함
- 대표적으로 RSA(소인수 분해 기반 알고리즘)가 있다.
2. 브라우저 암호 저장 방식
- 크롬, 사파리, 1password는 암호를 보관하고 동기화 해준다.
- JavaScript에서 암호화 방법 : crypto-js 사용 but bcrypt는 구현되어 있지 않음
함수형 프로그래밍
+ 프로그래밍 패러다임
프로그래머에게 프로그래밍의 관점을 갖게하고 코드를 어떻게 작성할 지 결정하는 역할
최근의 패러다임에는 명령형과 선언형으로 나뉜다.
1. 명령형 프로그래밍
- 문제를 어떻게 해결해야 하는지 컴퓨터에게 명령을 내림
- 상태와 제어 흐름이 존재하며 필요에 따라 정의하고 변경
1) 절차 지향 프로그래밍 : 순차적인 처리가 중요시 되며 프로그램 전체가 유기적으로 연결되도록 만드는 프로그래밍 기법
2) 객체 지향 프로그래밍 : 실제 세계를 모델링하여 소프트웨어를 개발하는 방법
- 객체 지향 추상화의 최소 단위는 객체
- 제어 프름을 간접적으로 통제함
2. 선언형 프로그래밍
- 무엇을 해결해야 할지에 집중, 해결방법은 컴퓨터에게 위임
1) 함수형 프로그래밍 : 거의 모든 것을 순수 함수로 나누어 문제를 해결하는 기법
- 함수형 프로그래밍의 최소단위 "함수" 이기에 재사용성이 높다.
- 불변성을 지향하여 동작 예측 쉽고, 사이드 이펙트 방지함
- 변수 할당을 통제하여 제어 흐름을 통제함
✅ 프로그래밍 제어 흐름 : 순차 분기 반복 참조
- 상태가 없기 때문에 사이드 이펙트가 없다.
- 재사용성이 높고, 코드가 짧고 간결하다. but 함수를 잘게 쪼개야하며, 숙련도가 필요
👉 명령형 vs 선언형
ex) 1부터 10까지 홀수 출력
ⓐ 명령형 방식
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for(let i=0;i<10;i++){
if(arr[i] % 2 === 1) console.log(arr[i]);
}ⓑ 선언형 방식
[1,2,3,4,5,6,7,8,9,10]
.filter((e) => e % 2 == 1)
.forEach((e) => console.log(e));
3. 멀티 패러다임
- 자바스크립트는 명령형, 선언형 둘 다 가능하다 !
- 굳이 한가지만 쓸 필요가 없기에 둘 다 쓰자!
객체지향과 프로토타입
1. 객체지향
- 객체지향에서 객체는 현실에 있는 것을 추상화 한 것
* 추상 : 사물이 지닌 여러 측면 중 특정한 부분만 보는 것 (그 외 부분은 전부 버림)
1) 의미
- 객체 위주로 설계하고 프로그래밍 하는 패러다임
- 객체지향 언어에선 추상화의 최소 단위가 객체
- 각 객체는 메시지를 주고 받을 수 있다.
2) 오해
- 객체지향은 패러다임이기에 언어와 관계없다.
- 자바스크립트는 프로토타입을 통해 객체지향을 표현함
- 절차지향보다 객체지향이 무조건 더 좋은 것은 아님. 상황마다 다르다.
2. 프로토타입
- JavaScript에는 클래스란 개념이 없고 기존의 객체를 복사하여 새로운 객체를 생성하는 프로토타입 기반 언어다.
1) 자바스크립트에서 객체와 함수
- 자바스크립트의 모든 객체는 [[Prototype]]이라는 인터널 슬롯(internal slot)를 가진다
- [[Prototype]]의 값은 Prototype(프로토타입) 객체이며 __proto__ accessor property로 접근할 수 있다.
ex ) Animal 함수 생성 과정
◼ 함수를 만들고 수행하면 "Animal 함수"와 자신과 같은 이름의 "Animal 프로토타입 객체" 가생성된다
◼ Animal 함수 멤버에는 prototype 속성이 생성되고, 생성된 "Animal 프로토타입 객체"를 가르킨다.
- Animal 프로토타입 객체의 constructor는 Animal 함수를 가르킨다.
- 생성자 함수와 new 연산자를 통해 만들어낸 객체는 Animal 프로토타입 객체를 가르키며,
__proto__ 속성이 자동으로 생성된다
👉 콘솔에 찍어보기
Animal 함수는 __proto__ 프로퍼티로 자신의 부모 객체(프로토타입 객체)인 Object.prototype을 가리키고 있다.
주의할 점은 함수 객체는 일반 객체와 달리 prototype 프로퍼티를 소유하며
new로 생성된 객체들의 __proto__와 함수 객체의 prototype은 함수 prototype 객체를 가르킨다.
◼ 활용(Effective Prototype)
- 프로토타입 속성을 이용하여 각 객체들에게 공통된 멤버를 추가 가능
- 프로토타입 객체에 추가한 멤버를 객체에서 재정의하거나 부모 생성자를 빌려 쓸 수 있다. (상속)
- Object.create 메서드 사용하여 기존 객체를 재활용 가능하다.
이벤트 루프
1. 이벤트 루프?
- 자바스크립트 싱글스레드이며 콜스택을 하나만 가지고 있다. (한번에 하나의 작업)
- 이벤트 루프는 자바스크립트 기능이 아니라 브라우저 node js에서 관리
- Heap : 메모리 할당이 발생하는 곳
- Call Stack : 실행된 코드의 환경을 저장하는 자료구조로, 함수 호출 시 이곳에 저장된다. 어떤 함수를 저장하면 스택에 쌓고 또 다른 함수를 호출하면 그 다음 스택에 쌓이면서 가장 위에 쌓인 함수를 가장 먼저 처리한다. LIFO(Last In First Out)
- Web APIs : Web API는 브라우저에서 제공하는 API로 DOM, Ajax, TimeOut 등이 있다.
CallStack에서 실행된 비동기 함수는 Web API를 호출하고, Web API는 콜백 함수를 Task Queue에 넣는다. - Callback Queue : 함수를 저장하는 자료구조로, Call Stack과 다르게 가장 먼저 들어온 함수를 가장 먼저 처리한다.
- Event Loop : 이벤트 루프는 call stack이 다 비워지면 callback queue에 존재하는 함수를 하나씩 call stack으로 옮기는 역할을 한다.
출처 : [JavaScript] 이벤트 루프란? (velog.io)
👉 자세한 동작과정
function A() { console.log("A") };
function B() { console.log("B") };
A();
setTimeout(function () { A();}, 100);
setTimeout(function () { B();}, 100);
- A()가 콜스택에 쌓인다. A()가 즉시 실행되고 A가 출력된다.
- 그 후 WebApi에서 setTimeout() 2개 함수가 순서대로 실행된다
- 콜백 큐에 A(), B()가 쌓인다.
- 큐에 들어온 순서대로 A(), B()가 콜 스택에 들어가 함수를 실행한다.
- 콘솔에 A, B가 출력된다.
💡 Microtask Queue, Animation frames 란?
1) Microtask Queue
- 모든 Promise 동작은 마이크로태스크 큐에 들어가 비동기적으로 처리된다.
- 마이크로태스크 큐는 먼저 들어온 작업을 먼저 실행합니다(FIFO, first-in-first-out).
- 실행할 것이 아무것도 남아있지 않을 때만 마이크로태스크 큐에 있는 작업이 실행되기 시작합니다.
🔔 이벤트 루프는 마이크로태스크 큐의 모든 태스크들을 처리한 다음, 태스크 큐의 태스크들을 처리함 !
2) Animation frames
- WebAPI인 requestAnimationFrame() 함수를 호출하게 되면 그 안에 등록된 콜백이 Animation Frames에 쌓인다.
- Microtask Queue와 마찬가지로 이벤트 루프가 한 번 방문하면 큐 안에 들어있는 '모든' 작업을 수행한 후 순회를 재개
Event Loop는 Microtask Queue → Animation frames → Task Queue 순으로 우선순위를 두어 작업을 가져간다.
- Event Loop는 Call Stack에서 처리할 작업이 없을 경우 우선적으로 Microtask Queue를 확인하고 작업이 있다면 작업을 꺼내서 Call Stack에 전달한다.
- Microtask Queue가 비어있다면 Animation frames를 확인하고 작업이 있다면 작업을 꺼내서 Call Stack에 전달한다.
- 여기서 중요한 점은 Animation frames 작업이 완료되면 브라우저 렌더링 작업이 이루어진다.
- 마지막으로 Task Queue를 확인하고 작업이 있다면 작업을 꺼내서 Call Stack에 전달한다.
출처 : JavaScript의 비동기 처리 과정 (velog.io)
모듈
1. 모듈
- 예전 자바스크립트는 스크립트간 파일 통신을 위해 전역 스코프에 존재하는 변수와 함수를 사용해야 했음
- 모듈을 이용하면 스크립트간 의존을 확인할 수있음 실행 순서 쉽게 제어 가능
1) 모듈과 컴포넌트
ⓐ 모듈 : 설계 지점에 의미 있는 요소
ⓑ 컴포넌트 : 런타임 시점에 의미 있는 요소
- 제대로된 모듈 역할을 위해 디렉토리 단위를 모듈 개념에 가깝게 사용함
- import, export로 가져오기, 내보내기 가능
모듈은 로컬 파일에서 동작x, 서버를 실행시켜야 가능
2) 특징
- use strict 로 실행됨
- 모듈 레벨 스코프가 존재
- 단 한번만 평가됨
- 지연 실행됨
유니 코드
1. 사전 지식
1) CCS(Coded Character Set)
- 문자열을 Code Point에 대응시켜 만든 코드화된 문자들의 집합
- Code Point는 Character의 식별자가 된다.
2) CES(Character Encoding Scheme)
- CCS를 octet(8bit) 집합에 대응 시킴 => 인코딩
ex) UTF-8, UTF-16
3) TES(Transfer Encoding Syntax)
- 인코딩한 문자가 특정 프로토콜을 타고 전송되도록 변환하는 것
- 통신 프로토콜의 제약에 따라 변환이 달라짐
2. 유니코드
- 전세계 문자를 컴퓨터에서 다룰 수 있게 만든 표준 시스템
- 호환성 및 확장성 문제때문에 생겨남
1) CCS
- 범위 : 0x0~ 0x10FFFF
- 많이 쓰이는 문자는 BMP에 정의한다. 이 외의 영역은 자주 사용하지 않는 문자(이모티콘) 등이 포함된다.
- 2byte 이상의 문자를 표현하기 위해선 Surrogate Pair 방식을 이용한다.
2) CES
- Code Point가 어떤 단위로 조합되어 인코딩되는지 정의한 것
- Big-Endian/Little-Endian : 컴퓨터 메모리에 저장된 바이트 순서
* Big는 사람이 읽기 편하고, Little은 컴퓨터가 사용하기에 편함
- BOM(Byte order Mark) : 문서 제일 앞에 U+FEFF를 삽입해 어플리케이션의 바이트 순서를 알게 해줌
3. 자바스크립트에서 유니코드
- 자바스크립트는 유니코드를 지원하며, 그냥 쓰거나 \u 를 통해 유니코드 문자 표현 가능하다.
- 이모지는 문자길이가 2(4byte)다
- 알파벳과 한글은 2btye로 읽히기 때문에 길이는 1이다.
정규표현식
1. 정의
- 패턴을 이용하여 문자열에서 원하는 문자를 검색, 대체, 추출할 수 있다. but 성능은 느림
2. 표현 방식
3. 자바스크립에서 정규표현식
1) RegExp 객체로 정규표현식 기능을 제공
- test() : 입력받은 문자열에 패턴이 있는 지 확인 후 true/false 반환
- exec() : 입력받은 문자열에 패턴 있는지 확인 후 있으면 정보 반환, 없으면 null 반환
2) String 에서의 정규 표현식
- match() : 정규 표현식 객체를 파라미터로 받아 있으면 반환, 없으면 null 반환
- replace() : 정규 표현식 객체를 파라미터로 받아 일치한 패턴정보를 원하는 문자열로 바꿀 수 있다.
- search() : 정규 표현식 객체를 파라미터로 받아 있으면 위치를 반환
- capture() : match() 반환 값의 1번 인덱스부터 순차적으로 캡처 결과가 들어간다.
4. Run-length encoding
- 연속된 문자를 압축해주는 간단한 알고리즘
- 문자, 연속된 문자 개수로 표현
💡 개미수열 정규 표현식으로 표현하기
나중에...
쿠키와 세션, 웹 스토리지
1. HTTP 통신
- HTTP Request는 기본적으로 상태가 존재하지 않음
- 서버는 어느 브라우저에서 요청이 온지 알 수없기에 헤더에 있는 쿠기정보를 통해 확인한다.
2. Cookie
- 클라이언트에서 저장, 관리하는 데이터들, 브라우저를 닫아도 데이터를 유지할 수 있다.
- 서버에서 Set-Cookie를 응답 헤더로 내려주면 클라이언트는 받아서 저장
- 클라이언트에서 자체적으로 조작 가능, 각 상태에 수명을 정할 수 있다.
◼ Set-Cookie
- 형식 : 키=값; 옵션
- 옵션 종류
- Expires: 쿠기 만료 날짜를 지정
- Secure : HTTPS에서만 쿠키를 전송
- HttpOnly : JavaScript에서 쿠키에 접근 못하도록 함
- Max-Age : 쿠키 수명을 정한다. Expires 무시
- Domain : 도메인이 일치하는 요청만 쿠키 전송
- Path : 패스와 일치하는 요청만 쿠키가 전송
- 쿠키의 취약점 : XSS 공격에 취약, 탈취당할 위협이 있음
3. Session
- 서버는 쿠키의 주인을 알 수 없다. => 세션을 이용
- HTTP Session Id를 식별자로 사용자를 구분함
- 단점 : 세션은 서버에 파일로 저장되는데, 사용자가 매우 많아지면 성능 문제가 발생함, 관리 문제 발생
따라서 서버와 클라이언트 인증은 별도 토큰을 사용하고, 쿠키는 클라이언트 자체 데이터 관리 용도로 많이 사용함
4. 웹 스토리지
- 클라이언트에 데이터를 저장하기 위한 새로운 방법
- 쿠키에서 힘든 것을 지원하기 위해 등장
1) 로컬 스토리지
- 반영구적으로 데이터를 저장함(브라우저 종료시에도 데이터 남음_
- 저장했던 도메인과 다른 경우엔 접근 불가능
- Key-Value 형태
2) 웹 스토리지
- 새 창을 생성할 때마다 개별적으로 저장되는 데이터(브라우저 종료시 데이터 사라짐)
- 같은 도메인이어도 세션이 다르면 데이터에 접근 불가능
- Key-Value 형태
5. IndexedDB
- transactional한 로컬 데이터 베이스
- 새로운 웹 브라우저 표준 인터페이스
'Frontend > 프로그래머스 FE 데브코스' 카테고리의 다른 글
| [Day 6] JavaScript 주요 문법 (6) (0) | 2022.10.25 |
|---|---|
| [Day 5] JavaScript 주요 문법 (5) (0) | 2022.10.21 |
| [Day 4] JavaScript 주요 문법 (4) (0) | 2022.10.20 |
| [Day 3] JavaScript 주요 문법(3) (0) | 2022.10.19 |
| [Day 1] 자바스크립트 주요 문법 (1) (0) | 2022.10.17 |