[2023-10-04] WIL - [1주차] 자바스크립트 주요 문법 총 정리

📝1일차 배운 것

1. 브라우저 동작원리
2. 변수, 상수, 자료형 그리고 메모리
3. 메모리 심화
4. 표현식과 연산자
5. 흐름 제어
6. 배열과 객체
7. 스코프와 클로저

 

☝중요한 점

1. DOM이란?

  -  HTML 문서를 객체화한 것

2. 렌더링이란?

  - HTML,CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정

3. 렌더링 과정

  - DOM트리 생성

  - CSSOM 트리 생성

  - 렌더링 트리 생성

  - 레이아웃 단계

  - 페인팅 단계

4. var, let, const 차이

5. 메모리는 할당, 사용, 해제의 과정을 거친다.

6. GarbageCollector의 GarbageCollection의 역할

  - 사용하지 않는 메모리를 해제하는 역할

7. 변수가 선언되면 값을 가리키는 것이아닌 메모리 주소를 가리킨다.(참조한다)

  - 이유는 자바스크립트에서 원시타입은 변경이 불가능하기 때문이다.

  - 따라서 원시타입의 값이 변경될 때에는 항상 메모리가 새로 할당된다.

  - 이러한 참조가 클로저가 가능한 이유이다.

8. 자바스크립트 엔진은 가상머신으로 구성되어있으며 heap영역과 callStack영역으로 구성되어있다.

  - heap은 참조타입이 들어간다.

  - callStack은 원시타입이 들어간다.

9. Mark and Sweep Algorithm

- 닿을 수 없는 주소를 더 이상 필요 없는 주소로 정의하고 지우는 알고리즘

- 최상위 객체인 window에서부터 시작하여 닿을 수 없는 곳은 필요 없는 곳이라 생각하여 지우는 알고리즘

 

 

📝2일차 배운 것

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

 

☝중요한 점

1. www.naver.com을 입력하면?  

  - URL 해석

  - DNS 조회 - DNS로 요청을 보내기 전에 브라우저 캐시와 Hosts파일을 참조, 없으면 DNS 호출

  - 해당 IP가 존재하는 서버로 이동

  - ARP를 이용하여 MAC 주소 변환

  - TCP 통신을 위해 서버의 Socket을 연다. - 3-Way Handshake 실행

  - 데이터를 받은 서버는 데이터를 읽고 요청에 따라 응답한다.

  - 브라우저는 렌더링을 한다.

 

2. ARP란?

  - 논리 주소인 IP 주소를 물리주소인 MAC주소로 변환하는 프로토콜

 

3. MAC주소가 필요한 이유?

  - 기계의 실제 위치를 알기 위해서는 물리적인 주소인 MAC주소가 필요하다.

 

4. 논리적 주소와 물리적 주소로 나뉜 이유는?

  - 논리적 주소만으로는 실제 서버가 어디있는지 모른다. 물리적 주소를 통해 실제 서버의 위치를 알 수 있다.

 

5. IP의 용도는?

  - 대역을 통해 범위를 좁혀나가는 용도

 

6. https가 탄생한 이유?

  - HTTP는 암호화되지 않은 데이터를 전송하기 때문에 통신에 또 다른 보안계층을 추가하기 위해 HTTPS로 확장됨

  - HTTPS는 HTTP 요청 및 응답을 TLS 기술에 결합

 

7. HTTPS가 생김으로 인해 기존 과정에서 무엇이 추가되었는지?

  - SSL HandShake 과정이 추가됨

 

8. TCP란?

  - 인터넷 상에서 데이터를 메세지의 형태로 보내기 위해 IP와 함께 사용하는 프로토콜

 

9. TCP 3-Way HandShake란?

  - TCP/IP 프로토콜을 이용해서 통신을 하는 응용프로그램이 데이터를 전송하기 전에 먼저 정확한 전송을 보장하기 위해 상대방 컴퓨터와 사전에 세션을 수립하는 과정을 말한다.

 

10. 4-Way Handshake란?

  - 3way handshake가 연결확립을 위해 진행했다면 4way handshake는 세션을 종료하기 위해 수행되는 절차를 말한다.

 

11. 시간을 사용할 때의 기준

  - 순수한 시간

  - UTC

  - Time Zone이 적용된 시간

 

12.암호화

  - 평문(Plaintext)을 해독할 수 없는 암호문(Ciphertext)로 변환하는 것을 의미

  - 단방향(해싱)과 양방향 암호화가 존재한다.

 

13. 단방향 암호화

  - 해시알고리즘을 이용하여 평문을 복호화할 수 없는 형태로 암호화 한다.

 

14. 양방향 암호화

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

- 대칭키와 비대칭키 알고리즘으로 나뉜다.

 

 

15.함수형 프로그래밍의 장점

  - 상태가 없기 떄문에 사이드 이펙트가 없다.

  - 불변성을 지향하기에 동작을 예측하기 쉽고, 사이드 이펙트를 방지한다.

   -> 사이드 이펙트를 방지한다는 것은 동시성 문제도 해결된다는 의미

  - 재사용성이 높다.

  - 코드가 짧고 간결하다.

 

16. 함수형 프로그래밍의 단점

  - 상태가 없기 때문에 변수조작이 안된다.

  - 재사용성이 높기 때문에 함수가 잘게 쪼개져 쪼개진 함수가 너무 많아지고 오히려 더 복잡해진다.

  - 코드가 짧고 간결하다는 것은 많은 숙련도를 요구한다.

 

16. 사이드 이펙트란?

- 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기 합니다.

- 즉 Side Effect라는 말을 할 때는 "의도하지 않은 결과"를 의미합니다.

- 의도하지 않게 외부변수를 참조하거나 외부변수를 변경하는 모든 종류의 코드를 의미합니다. 

 

17. 동시성 문제란?

  - 동시성 문제란 동일한 자원에 대해 여러 스레드가 동시에 접근 하면서 발생하는 문제입니다

 

18. 선언형 프로그래밍

  - 무엇을 해결해야 할지에 집중하고 해결방법은 컴퓨터에게 위임하는 방법

 

19. 명령형 프로그래밍

  - 문제를 어떻게 해결해야 하는지 컴퓨터에게 명령을 내리는 방법

 

20. 자바스크립트의 객체만으로 객체지향 프로그래밍이 가능한데 프로토타입은 왜 필요할까?

  - 객체안의 메서드가 각각의 객체안에 따로 정의되어 메모리 낭비가 되기 때문이다.

 

21. 자바스크립트는 싱글 스레드 언어인데 어떻게 비동기 적으로 데이터를 불러오고 애니메이션을 실행할까?

  - 브라우저의 Event Loop라는 시스템이 있기 때문에 가능하다. 

 

22. Microtask Queue

  - Microtask Queue는 Promise나 async/await, process.nextTick, Object.observe, MutationObserver과 같은 비동기 호출을 넘겨받는다.

 

23. Animation Frame

  - Animation Frames는 requestAnimationFrame과 같이 브라우저 렌더링과 관련된 task를 넘겨받는 Queue이다.

 

24. 이벤트 루프가 비동기 작업을 처리하는 우선순위

   - Microtask Queue -> Animation Frames -> Task Queue

 

25. Task Queue와 miacrotask Queue/AnimationFrame의 차이

  - 이벤트 루프는 Microtask Queue나 Animation Frames를 방문할 때는, 큐 안에 있는 모든 작업들을 수행하지만, Task Queue를 방문할 때는 한 번에 하나의 작업만 call stack으로 전달하고 다른 Queue를 순회한다.

 

26. 모듈이 등장한 이유?

  - 스크립트 파일간의 의존도를 확인하고, 실행 순서를 쉽게 제어하기 위해서

 

27. 모듈과 컴포넌트의 차이

 - 모듈은 설계시점에 의미있는 요소

 - 컴포넌트는 런타임 시점에 의미있는 요소

 

28. 모듈의 특징

  - 항상 use strict로 실행된다.

  - 모듈 레벨 스코프가 있다.

  - 단 한 번만 평가된다.

  - 지연 실행된다.

 

29. Cookie

-클라이언트에서 저장, 관리하는 데이터들, 브라우저를 닫아도 데이터를 유지할 수 있다.

-서버에서 Set-Cookie를 응답 헤더로 내려주면 클라이언트는 받아서 저장한다.

-클라이언트에서 자체적으로 조작할 수 있다.

-각 상태에 수명을 정할 수 있다.

 

30. 쿠키의 취약점

- XSS공격을 당할 수 있다.

- 쿠키를 암호화하지 않고 보내면 쿠키값을 중간에 탈취 당할 가능성이 있다. -> HTTPS로 해결

 

31. 클라이언트가 쿠키를 보내도 서버는 쿠키의 주인이 누군지 모른다. 서버가 사용자를 구분하려면?

 - Session을 이용한다.

 

32. Session

- HTTP Session Id를 식별자로 사용자를 구분한다.

- 클라이언트는 HTTP Session Id를 쿠키형태로 저장한다.

- 서버 자체적으로 기록하고 관리한다.

 

33. 세션은서버에 파일로 저장되는데 사용자가 엄청 많아진다거나 서버가 2대라면 어떻게 관리해야할까?

  - 서버와 클라이언트간 인증은 별도 토큰(JWT)을 사용하고, 쿠키는 클라이언트 자체적인 지속적인 데이터 관리 용도로 사용한다.

 

34. 로컬스토리지와 세션 스토리지의 차이

로컬 스토리지

- 로컬 스토리지에 데이터를 저장하면 반영구적으로 데이터가 저장된다.

- 브라우저를 종료해도 계속해서데이터가 남는다.

- 저장 했던 도메인과 이용하는 도메인이 다른 경우엔 접근할 수 없다.

- 쿠키와 마찬가지로 key-value 형태로 저장한다.

세션 스토리지

- 새 창을 생성할 때마다 개별적으로 저장되는 데이터를 관리한다.

- 브라우저를 닫는 순간 사라진다.

- 같은 도메인이어도 세션이 다르면 데이터에 접근할 수 없다.

- 쿠키와 마찬가지로 key-value 형태로 저장한다.

 

📝3일차 배운 것

1. 자료구조의 종류
2. 시간 복잡도
3. 배열
4. 연결리스트
5. 스택

 

☝중요한 점

1. 빅오표기법에 계수나 상수가 없는 이유?

  - 점근적표기법을 따르기 때문

 

2. 점근적 표기법

  -함수의 증감 추세를 비교하는 방법

 

3. 배열은 탐색이 많은경우 유리한 자료구조

 

4. 연결리스트는 추가와 삭제가 많은 경우 유리한 자료구조

 

5. 단일 연결리스트, 이중 연결리스트, 원형 연결리스트 코드 구현 

  - Node 클래스

  - LinkedList 클래스

  - 노드 찾기 함수

  - 노드 추가 함수

  - 노드 중간 삽입 함수

  - 노드  삭제 함수

6. 스택을 배열로 표현하지 않는 이유?

  - 자바스크립트의 배열은 Array타입이 아니므로 컴파일러언어보다 성능이 떨어진다.

  - 연결리스트로 구현할 수 있다.