##1. 힙(heap)이란?

힙(heap) 은 최댓값 및 최솟값을 찾아내는 연산을 빠르게 하기 위해 고안된 완전이진트리(complete binary tree) 를 기본으로 한 자료구조이다. 부모 노드가 자식 노드보다 크거나 같은 완전 이진 트리를 최대 힙, Max Heap, 부모 노드가 자식 노드보다 작거나 같은 완전 이진 트리를 최소 힙, Min Heap 으로 구분할 수 있다.

##2. 힙(heap)의 특징

• 힙은 '완전 이진 트리' 형태를 가진다.
• 힙의 부모 노드는 자식 노드보다 크거나 같은 값을 가진다.
• 힙은 루트 노드가 최댓값(최대 힙의 경우) 또는 최솟값(최소 힙의 경우)을 가진다.
• 힙은 배열로 표현할 수 있다.
• 힙은 중복을 허용한다.

##3. 힙(heap)의 장점과 단점

##3.1 장점

힙은 최대값 또는 최소값을 찾아내는 연산을 빠르게 수행할 수 있다. 이는 우선순위 큐와 같은 추상적 자료형의 구현에 매우 유용하다.

##3.2 단점

힙은 정렬된 구조가 아니므로, 특정 값을 검색하는데는 적합하지 않다.

##4. 힙(heap)의 동작

###4.1 구현

• insert : 힙에 새로운 요소를 추가한다.
• delete : 힙에서 가장 큰 요소를 제거한다.
• peek : 힙에서 가장 큰 요소를 반환한다.
• size : 힙의 크기를 반환한다.
• isEmpty : 힙이 비어있는지 확인한다.
• maxHeapify : 힙의 특성을 유지한다.

###4.2 삽입

1. 새로운 요소를 힙의 마지막 노드에 추가
2. 추가된 새로운 노드를 부모 노드와 비교하여

추가된 노드가 부모 노드 보다 크다면, 위치를 교환한다. 추가된 노드가 부모 노드 보다 작거나 같다면, 삽입을 종료한다.

###4.3 삭제

최대값을 알아내 삭제하기 위해서는

1. 힙의 루트 노드를 삭제한 후, 힙의 마지막 노드를 루트 노드 자리로 이동한다.
2. 루트 노드와 자식 노드를 비교하여

루트 노드가 자식 노드 보다 작다면, 자식 노드 중 가장 큰 노드와 위치를 교환한다. 루트 노드가 크다면, 삭제를 종료한다.

###4.4 Heapify

위의 삽입과 삭제 수행 과정에서 구조의 변화로 인해 힙의 속성이 깨질 수 있기 때문에 위치를 교환하며 힙의 재구조화를 수행하는 Heapify 메서드를 사용한다.

##5. 힙(heap)의 사용

###5.1 우선순위 큐

힙은 우선순위 큐 구현에 가장 일반적으로 사용되는 자료구조이다.

###5.2 힙 정렬

힙은 힙 정렬(Heap Sort)이라는 효율적인 정렬 알고리즘에 사용된다.

###5.3 그래프 알고리즘

힙은 최소 신장 트리를 찾는 프림 알고리즘, 최단 경로를 찾는 다익스트라 알고리즘 등의 그래프 알고리즘에서 활용된다.

References

• https://codingmoon.io/posts/data-structure-algorithms/heap/

##1. 트리(tree)란?

트리는 컴퓨터 과학에서 중요한 자료구조 중 하나로, 노드들이 edge로 연결된 계층적 구조를 가진다. 트리의 최상위 노드를 루트 노드라고 하며, 나머지 노드들은 부모-자식 관계를 가지며 서로 연결된다.

##2. 트리(tree)의 특징

• 계층적인 구조: 트리는 자료들 사이의 계층관계를 나타내는 데 적합하다.
• 루트 노드: 트리의 최상위에 위치한 노드로, 트리는 루트 노드에서 시작한다.
• 부모-자식 관계: 트리의 노드들은 부모-자식 관계를 가지며, 각 노드는 하나의 부모 노드와 여러 개의 자식 노드를 가질 수 있다. 이러한 노드들은 edge로 연결된다.

##3. 트리(tree)의 구조

###3.1 용어

• root : 트리 최상위 노드

• edge : 노드와 노드를 연결하는 선

• parent : 자식 노드를 보유한 노드

• child : 부모 노드의 하위 노드

• sibling : 같은 부모 노드를 가진 동일 선상의 노드

• leaf : 트리 최하단 노드

• size : 모든 노드들의 개수 (root 포함)

• depth : 선택한 노드에서 root까지의 거리

• height : 선택한 노드에서 leaf 노드까지 가장 긴 경로에 있는 edge의 개수

###3.2 종류

• 편향 트리

  • 모든 노드들이 하나의 자식 노드만 가지는 트리

• 이진 트리 (binary tree)

  • 부모 노드 밑의 자식 노드 개수를 최대 2개로 제한하는 형태
  • 노드의 값, 데이터 크기 등과 상관없이 구성된다.

• 이진 탐색 트리 (binary search tree)

  • 부모 노드를 기준으로 왼쪽 자식은 부모보다 작은 값, 오른쪽 자식은 부모보다 큰 값을 가진다.

  ###3.3 순회

• 중위 순회 (in-order traversal)

  left → visit → right

• 전위 순회 (pre-order traversal)

  visit → left → right

• 후위 순회 (post-order traversal)

  left → right → visit

##4. 트리(tree)의 장점과 단점

###4.1 장점

데이터를 계층적이고 직관적으로 표현할 수 있어, 데이터 검색과 정렬, 삽입, 삭제 등의 연산이 효율적이다.

###4.2 단점

트리의 구조가 복잡하여 설계와 구현이 어렵고, 데이터의 추가나 삭제에 따라 트리의 구조를 재조정해야 할 수도 있다.

##5. 트리(tree)의 사용

트리는 데이터를 계층적이고 직관적으로 표현할 수 있어, 데이터의 관계를 이해하기 쉽고, 데이터 검색과 정렬, 삽입, 삭제 등의 연산이 효율적이다.

##5.1 웹 페이지 렌더링

웹 페이지는 HTML 태그의 계층적 구조를 가지는 DOM (Document Object Model) 트리를 사용하여 렌더링된다.

##5.2 프로그래밍 언어의 구문 분석

프로그래밍 언어의 컴파일러는 소스 코드를 분석하고 실행하기 위해 구문 트리(Syntax tree)를 사용한다.

##5.3 데이터베이스

데이터베이스 관리 시스템(DBMS)에서는 B-트리, B+ 트리 등의 트리 구조를 사용하여 데이터를 효율적으로 관리한다.

##1. 연결 리스트란?

연결 리스트는 데이터 요소들을 노드(Node)로 구성하고, 각 노드가 데이터와 다음 노드를 가리키는 링크(포인터)를 가지는 자료구조이다. 각 노드는 메모리에서 불연속적으로 할당되며, 링크(포인터)를 통해 서로 연결되어 있는 특징을 가지고 있다.

##2. 연결 리스트의 특징

• 연결 리스트는 데이터 요소들을 순차적으로 저장하지 않고, 각 노드가 링크를 통해 서로 연결되어 있기 때문에 데이터의 삽입과 삭제가 유연하게 이루어진다.

• 연결 리스트는 크기를 동적으로 조정할 수 있으며, 메모리 공간을 효율적으로 사용할 수 있다.

• 하지만 연결 리스트는 특정 위치의 데이터에 접근하기 위해서는 처음부터 순회해야 하므로, 탐색에는 선형 시간이 소요된다.

##3. 연결 리스트의 종류

###3.1 단일 연결 리스트(Singly Linked List)

각 노드는 데이터와 다음 노드를 가리키는 링크(포인터)로 구성되어 있다.

노드1(head) = data, next(노드2를 가리킴) 노드2 = data, next(노드3을 가리킴) 노드3(tail) = data, next(다음 노드가 없다면 null)

###3.2 이중 연결 리스트(Doubly Linked List)

각 노드는 데이터와 이전 노드를 가리키는 링크(포인터), 다음 노드를 가리키는 링크(포인터)로 구성되어 있다. 이중 연결 리스트는 양방향으로 탐색이 가능하므로 탐색의 효율성이 높아진다.

노드1(head) = data, prev(이전 노드가 없다면 null), next(노드2를 가리킴) 노드2 = data, prev(노드1을 가리킴), next(노드3을 가리킴) 노드3(tail) = data, prev(노드2을 가리킴), next(다음 노드가 없다면 null)

###3.3 원형 연결 리스트(Circular Linked List)

마지막 노드가 첫 번째 노드를 가리키는 링크(포인터)를 가지는 연결 리스트이다. 원형으로 연결되어 있기 때문에 마지막 노드에서 첫 번째 노드로 순회할 수 있다.

노드1(head) = data, next(노드2를 가리킴) 노드2 = data, next(노드3을 가리킴) 노드3(tail) = data, next(다음 노드가 없다면 노드1을 가리킴)

##4. 연결 리스트의 장점과 단점

###4.1 장점

• 데이터의 삽입과 삭제가 유연하게 이루어질 수 있다.
• 크기를 동적으로 조정할 수 있어 메모리 공간을 효율적으로 사용 가능하다.

  ###4.2 단점

• 특정 위치의 데이터에 접근하기 위해서는 처음부터 순회해야 하므로 탐색에는 선형 시간이 소요된다.
• 포인터의 추가적인 메모리 공간이 필요하다.

##5. 연결 리스트의 시간 복잡도

데이터의 삽입과 삭제: O(1)의 시간 복잡도를 가진다. 데이터의 탐색과 접근: O(n)의 시간 복잡도를 가진다. (단일 연결 리스트의 경우)

##6. 연결 리스트의 사용

###6.1 데이터의 동적 추가와 삭제

연결 리스트는 데이터의 삽입과 삭제가 유연하게 이루어질 수 있다. 데이터를 삽입하거나 삭제할 때, 해당 위치의 노드의 링크만 변경하면 되기 때문에 다른 요소들에 영향을 주지 않고 연결 리스트를 수정할 수 있다.

###6.2 파일 관리

파일 시스템에서는 파일들의 정보를 연결 리스트로 관리하기도 한다. 각 파일을 노드로 표현하고, 링크로 연결하여 파일들을 관리할 수 있다. 이를 통해 파일의 추가, 삭제, 탐색 등을 효율적으로 수행할 수 있다.

###6.3 큐(Queue)와 스택(Stack)의 구현

연결 리스트를 활용하여 큐와 스택을 구현할 수 있다. 큐의 경우, 데이터를 연결 리스트의 끝에 추가하고, 삭제는 맨 앞에서 진행한다. 스택의 경우, 데이터를 연결 리스트의 맨 앞에 추가하고, 삭제도 맨 앞에서 진행한다.

###6.4 문자열 처리

연결 리스트는 문자열 처리에 유용하게 사용될 수 있다. 문자열을 문자 단위로 분리하여 각 문자를 노드로 표현하고, 링크로 연결하여 문자열을 저장하거나 조작할 수 있다. 이를 통해 문자열의 삽입, 삭제, 역순 등 다양한 연산을 수행할 수 있다.

##1. 큐(Queue)란?

큐는 FIFO(First In First Out) 원칙을 따르는 자료구조이다. 즉, 가장 먼저 들어온 데이터가 가장 먼저 나가는 구조를 가진다. 일상생활에서 줄을 서는 것을 생각하면 이해하기 쉽다.

##2. 큐(Queue)의 특징

• 데이터의 삽입과 삭제가 각각 다른 방향에서 이루어진다. 데이터는 뒤쪽(rear)에서 삽입되고, 앞쪽(front)에서 삭제된다.

• 데이터의 입력 순서를 유지한다. 들어온 순서대로 데이터가 저장되며, 먼저 들어온 데이터부터 차례대로 나갑니다.

• 종류로는 선형과 원형이 있다.

##3. 큐(Queue)의 장점과 단점

##3.1 장점

데이터의 삽입과 삭제가 각각 다른 방향에서 이루어지므로 구현이 간단하고, 데이터를 관리하기 쉽다.

##3.2 단점

선형 큐는 데이터를 Dequeue하면서 생기는 빈 공간을 재활용하지 못하는 단점이 있다. 이로 인해 메모리 사용이 비효율적이며, 큐가 가득 찼다는 오류 메시지를 받을 수 있음에도 불구하고 실제로는 사용되지 않는 메모리 공간이 있을 수 있다. 이러한 단점을 해결하기 위해 원형 큐(Circular Queue)가 도입되었다.

##4. 큐(Queue)의 추상자료형

##4.1 Enqueue

큐의 뒤쪽(rear)에 데이터를 추가하는 연산이다.

##4.2 Dequeue

큐의 앞쪽(front)에서 데이터를 제거하고, 그 데이터를 반환하는 연산이다.

##4.3 Front/Peek

큐의 앞쪽(front)의 데이터를 조회하는 연산이다.

##4.4 isEmpty

큐가 비어있는지 확인하는 연산이다.

##4.5 isFull

큐가 가득 차 있는지 확인하는 연산이다.

##5. 큐(Queue)의 시간복잡도

큐의 주요 연산인 Enqueue(삽입)과 Dequeue(삭제) 모두 O(1)의 시간복잡도를 가진다.

##6. 큐(Queue)의 종류

###6.1 선형 큐 (Linear Queue)

이미지 출처

###6.2 원형 큐 (Circular Queue)

이미지 출처

##7. 큐(Queue)의 사용

###7.1 버퍼

데이터가 임시로 저장되는 중간 메모리 영역인 버퍼 구현에 큐가 사용된다.

###7.2 너비 우선 탐색(BFS)

그래프 탐색 알고리즘인 너비 우선 탐색에서 큐가 사용된다

###7.3 캐시 구현

최근에 참조된 항목을 저장하는 캐시에서 큐가 사용된다.

###7.4 프린터의 인쇄 작업 관리 등

여러 작업을 순차적으로 실행해야 할 때 큐가 사용된다.

##1. 스택(Stack)이란?

스택은 LIFO(Last In First Out) 원칙을 따르는 자료구조이다. 즉, 가장 마지막에 들어온 데이터가 가장 먼저 나가는 구조를 가진다. 생활에서 책을 쌓아두는 모습이나, 식당에서 접시를 쌓아두는 것을 생각하면 이해하기 쉽다.

##2. 스택의 특징

• 데이터의 삽입과 삭제가 한 방향(스택의 맨 위 혹은 맨 아래)에서만 일어난다.

• 데이터의 입력 순서를 유지한다. 들어온 순서대로 데이터가 쌓이고, 마지막에 들어온 데이터부터 차례대로 나간다.

##3. 스택의 장점과 단점

###3.1 장점

데이터의 삽입과 삭제가 맨 위에서만 이루어지므로 구현이 간단하고, 데이터를 관리하기 쉽다.

###3.2 단점

스택의 크기가 정해져 있으면, 그 크기를 초과하는 데이터를 삽입하려하면 스택 오버플로우(Overflow)가 발생할 수 있다. 반면, 스택이 비어있는 상태에서 데이터를 꺼내려고 하면 스택 언더플로우(Underflow)가 발생합니다.

오버플로우(Overflow) : 스택이 완전히 꽉 찬 상태 언더플로우(Underflow) : 스택이 완전히 비어 있는 상태

##4. 스택의 추상자료형

###4.1 Top/Peek (스택 포인터)

스택의 맨 위의 데이터를 조회하는 연산이다.

###4.2 isEmpty

스택이 비어있는지 확인하는 연산이다.

###4.3 isFull

스택이 가득 차 있는지 확인하는 연산이다.

###4.4 getSize

스택에 있는 요소 수를 반환하는 연산이다.

###4.5 Push

스택의 맨 위에 데이터를 추가하는 연산이다. 이미지 출처

push의 단계를 간단하게 설명하자면, 아래와 같이 정리할 수 있다. ① : isFull을 통해 스택에 데이터가 가득찼는지 확인 후 가득 차지 않았다면 ② : Top(스택 포인터)을 다음 위치로 이동시킨다. ③ : 이동한 Top(스택 포인터) 위치에 데이터를 저장한다.

###4.6 Pop

스택의 맨 위에서 데이터를 제거하고, 그 데이터를 반환하는 연산이다. 이미지 출처

Pop의 단계를 간단하게 설명하자면, 아래와 같이 정리할 수 있다. ① : isEmpty을 통해 스택에 데이터가 존재하는지 확인 후 존재 한다면 ② : Top(스택 포인터)이 가리키는 데이터를 반환한다. ③ : Top(스택 포인터)을 이전 위치로 이동한다.

##5. 스택의 시간복잡도

스택의 주요 연산인 Push(삽입)과 Pop(삭제) 모두 데이터의 개수에 상관없이 맨 위에서 연산이 이루어지므로 O(1)의 시간복잡도를 가진다.

##6. 스택의 사용

###6.1 프로그램 실행 시 메모리 구조

컴퓨터에서 프로그램을 실행할 때, 메모리에서 스택 영역은 함수의 호출과 관련된 지역 변수, 매개 변수, 반환 값 등을 저장하는 데 사용된다. 이는 함수의 실행을 관리하는 데 필수적인 역할을 한다.

###6.2 컴퓨터의 히스토리 관리

웹 브라우저에서 뒤로 가기 기능을 구현할 때 스택이 사용된다. 방문한 웹 페이지의 URL을 스택에 푸시하고, 사용자가 뒤로 가기를 누르면 팝하여 이전 페이지로 이동한다.

###6.3 문자열 역순 출력

문자열을 역순으로 출력하는 데 스택을 사용할 수 있다. 문자열의 각 문자를 스택에 푸시하고, 팝하여 문자열을 역순으로 만들 수 있다.

###6.4 괄호 검사

프로그래밍에서 괄호가 올바르게 닫혀 있는지 검사하는 데 스택을 사용할 수 있다. 여는 괄호를 만나면 스택에 푸시하고, 닫는 괄호를 만나면 스택에서 팝하여 괄호를 검사한다.

References

• https://yoongrammer.tistory.com/m/45

1. API (Application Programming Interface)

API는 컴퓨터나 컴퓨터 프로그램 사이의 연결이다. 즉, 프로그램들이 서로 소통하는 방법이다. 구글 맵 API, 카카오 비전 API 등 기존에 있는 응용 프로그램을 통해서 데이터를 제공받거나 기능을 사용하고자 할 때 사용하는 인터페이스 및 규격 을 말한다.

2. REST API

2.1 REST란?

"REpresentational State Transfer" 의 약자로, 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것. HTTP *URI를 통해 자원을 명시하고 HTTP 메서드(GET, POST, PUT, DELETE)를 통해 해당 자원에 대한 *CRUD를 적용하는 것을 말한다.

*자원 : 문서, 그림, DB, 이미지, 동영상, 해당 소프트웨어 자체 등 모든 자료를 의미한다. *URI : 인터넷 상의 자원을 식별하기 위한 문자열의 구성이다. *CRUD : Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말이다.

2.2 REST API란?

REST 원칙을 적용하여 서비스 API를 설계한 것을 말한다. 각 요청이 어떤 동작이나 정보를 위한 것인지를 그 요청의 모습 자체로 추론이 가능하다는 것이 REST API의 특징이다.

2.3 REST API의 설계 규칙

1. 자원에는 형용사, 동사가 아닌 명사를 사용한다.

   ❌ https://velog.io/@kor-seonwoo/duplicating

   ⭕ https://velog.io/@kor-seonwoo/duplicate

2. 슬래시(/)로 계층 관계를 표현하고 마지막에 슬래시를 포함하지 않는다.

   ❌ https://velog.io/@kor-seonwoo/notice/

   ⭕ https://velog.io/@kor-seonwoo/notice

3. 언더바(_) 대신 하이픈(-)을 사용한다.

   ❌ https://velog.io/@kor-seonwoo/notice/first_notice

   ⭕ https://velog.io/@kor-seonwoo/notice/first-notice 

4. URI는 소문자로만 구성한다.

   ❌ https://velog.io/@kor-seonwoo/notice/firstNotice

   ⭕ https://velog.io/@kor-seonwoo/notice/firstnotice 

5. 행위를 포함하지 않는다.

   ❌ POST https://velog.io/@kor-seonwoo/notice/post/1

   ⭕ DELETE https://velog.io/@kor-seonwoo/notice/1 

6. 파일 확장자는 URI에 포함하지 않는다.

   ❌ https://velog.io/@kor-seonwoo/notice/photo.jpg

   ⭕ https://velog.io/@kor-seonwoo/notice/photo

7. HTTP 응답 상태 코드 사용 클라이언트는 해당 요청에 대한 실패, 처리완료 또는 잘못된 요청 등에 대한 피드백을 받아야 한다.

2.4 RESTful API란?

RESTful은 REST의 설계 규칙을 잘 지켜서 설계된 API를 의미한다. 즉, REST의 원리를 잘 따르는 시스템을 RESTful이란 용어로 지칭한다.

3. GraphQL

3.1 GraphQL이란?

GraphQL은 클라이언트와 서버 간의 데이터 통신을 위한 쿼리 언어이다. 클라이언트가 필요한 데이터를 요청할 때 원하는 구조로 한 번에 받을 수 있도록 설계된 쿼리 언어이다.

3.2 GraphQL의 특징

• 유연한 데이터 요청 필요한 데이터를 GraphQL 쿼리 문법을 사용하여 직접 지정할 수 있고, 여러 데이터를 한 번의 요청으로 받을 수 있다.
• 타입 시스템 서버가 제공하는 데이터의 타입과 구조를 사전에 정의할 수 있다.
• 문서화 및 디버깅 자체적인 문서화 기능을 제공하며, 오류 메시지를 통해 디버깅을 용이하게 한다.

3.3 GraphQL 쿼리 예시

{
  alluser {
    name
    email
  }
}

{
  user(id: 1) {
    name
    email
    posts {
      title
      content
    }
  }
}

3.4 GraphQL 서버와의 통신

클라이언트는 GraphQL 쿼리를 서버로 전송하고, 서버는 해당 쿼리를 해석하여 필요한 데이터를 응답한다.

3.5 GraphQL을 쓰는 이유

• 타입 안정성 보장 타입 시스템을 통해 데이터의 구조와 타입을 명확하게 정의할 수 있으므로, 데이터의 안정성을 보장합니다.
• Overfetching 및 Underfetching 해결로 인한 데이터 효율 향상 클라이언트가 필요한 데이터만을 요청하고 응답받기 때문에, 네트워크 효율이 향상된다.

Overfetching 내가 필요로 하는 데이터보다 더 많은 데이터를 fetch하는 것.

• 일반적인 REST API의 경우 내가 필요로 하는 데이터를 콕콕 찝어 요청하는게 아닌 data 전부를 받아야한다.
• 하지만 GraphQL을 사용하면 내가 필요로 하는 데이터를 콕콕 찝어 요청할 수 있고 응답 또한 내가 원하는 data만을 받을 수 있다. 이러한 특성으로 Overfetching 문제를 해결할 수 있다.

Underfetching 내가 필요로 하는 데이터보다 적게 데이터를 fetch하는 것.

• 한번의 reqeust로는 내가 필요로 하는 데이터를 얻지 못하고 여러번의 reqeust로 원하는 data를 얻는 것.
• 이것 또한 graphQL을 사용하면 단일 reqeust만으로도 내가 원하는 데이터를 콕콕 찝어 응답 받을 수 있다.

4. REST API와 GraphQL의 차이점

데이터 요청과 응답: REST API는 서버가 데이터 구조를 결정하고, 클라이언트는 서버가 제공하는 데이터를 받는다. 반면, GraphQL은 클라이언트가 필요한 데이터의 구조를 결정하고, 서버는 요청한 데이터를 그대로 응답한다.

요청의 수: REST API는 각 리소스에 대한 별도의 엔드포인트가 필요하므로, 여러 데이터를 받기 위해서는 여러 번의 요청이 필요하다.
반면, GraphQL은 한 번의 요청으로 여러 데이터를 받을 수 있다.

버전 관리: REST API는 데이터 구조의 변경이 필요할 때 새로운 버전의 API를 만들어야 한다. 반면, GraphQL은 클라이언트가 데이터의 구조를 결정하므로, 서버의 데이터 구조가 변경되어도 클라이언트에 영향을 미치지 않는다. 따라서 별도의 버전 관리가 필요하지 않다.

References

• https://www.youtube.com/watch?v=iyFHfzCRHA8
• https://velog.io/@couchcoding/%EA%B0%9C%EB%B0%9C-%EC%B4%88%EB%B3%B4%EB%A5%BC-%EC%9C%84%ED%95%9C-RESTful-API-%EC%84%A4%EA%B3%84-%EA%B0%80%EC%9D%B4%EB%93%9C
• https://dev-coco.tistory.com/97
• https://cocoon1787.tistory.com/540

##1. 배열이란?

배열은 같은 타입의 데이터를 연속적으로 저장할 수 있는 선형 자료구조이다. 저장된 데이터는 인덱스(index)와 원소값(elemtent)의 쌍으로 구성되고, 인덱스(index)를 통해 각 데이터에 접근 할 수 있다. 인덱스는 배열의 시작부터 몇 번째 위치에 데이터가 있는지를 나타내고, 배열의 크기는 생성시에 정해지며, 이후에는 변경할 수 없다.

##2. 배열의 장점과 단점

###2.1 장점

• 인덱스를 통한 데이터 접근이 가능해 요소에 빠르게 접근할 수 있다.
• 간단하게 구현하고 사용하기 쉽다.

  ###2.2 단점

• 한 번 크기를 정하면 변경할 수 없다. 이로 인해 데이터의 추가, 삭제가 어렵고 배열의 크기를 변경하려면 새로운 배열을 생성하고 데이터를 복사해야 한다.
• 배열의 크기를 미리 크게 잡아놓고 일부만 사용하는 경우, 사용하지 않는 메모리 공간이 낭비될 수 있다.

##3. 배열의 시간복잡도

배열 내 연산은 크게 4가지로 나뉜다.

###3.1 접근

배열의 특정 인덱스에 접근하는 경우, 배열은 인덱스를 통해 데이터에 직접 접근할 수 있기 때문에 O(1)의 시간 복잡도를 가진다.

###3.2 검색

배열에서 특정 데이터를 찾는 경우, 배열은 순차검색이기 때문에 최악의 경우 배열의 모든 요소를 확인해야 하므로 O(n)의 시간 복잡도를 가진다.

###3.3 추가

배열의 끝에 데이터를 추가하는 경우, 일반적으로 O(1)의 시간 복잡도를 가진다. 하지만 배열이 가득 차 있어 크기를 변경해야 하는 경우, 새 배열을 생성하고 기존 데이터를 복사해야 하므로 이 경우에는 O(n)의 시간 복잡도를 가진다.

###3.4 삭제

배열의 끝에서 데이터를 삭제하는 경우, O(1)의 시간 복잡도를 가진다. 그러나 중간에 있는 데이터를 삭제하는 경우, 삭제한 위치 이후의 데이터를 앞으로 이동시켜야 하므로 이 경우에는 O(n)의 시간 복잡도를 가진다.

##4. 배열의 사용

###4.1 직접적인 인덱스 접근

배열의 각 요소에 고유한 인덱스로 특정 위치의 데이터에 빠르게 접근 할 수 있다. 이는 특정 위치의 데이터를 읽거나 수정할 때 유용하다.

###4.2 메모리 효율성

메모리 공간을 연속적으로 사용하므로, 메모리 관리가 간단하고 효율적이다. 이로 인해 메모리 낭비를 최소화할 수 있다.

###4.3 데이터 관리 용이

동일한 타입의 여러 데이터를 하나의 이름으로 그룹화하여 관리할 수 있기 때문에, 데이터 관리가 용이하다. 이는 반복적인 작업을 수행할 때 특히 유용하다.

###4.4 다차원 데이터 처리

2차원, 3차원 등 다차원 배열을 사용하면 복잡한 데이터 구조를 효과적으로 표현하고 처리할 수 있다.

1.1 자료

현실 세계에서 관찰이나 측정을 통해서 수집된 값(value)이나 사실(fact)로 이는 숫자, 문자, 이미지, 음성 등과 같은 다양한 형태로 존재할 수 있다.

1.2 정보

어떤 상황에 대해서 적절한 의사결정(decision)을 할 수 있게 하는 지식(knowledge)으로 활용될 수 있도록 ‘처리 과정’을 거쳐서 정리되고 정돈된 ‘자료’의 2차 처리 결과물이다.

자료(Data) → 컴퓨터 처리(Process) → 정보(Information) I = P(D)

즉, 프로세스에 자료를 대입하여 처리를 한 결과물이 정보이다.

2. 자료구조와 알고리즘

2.1 자료구조

자료 사이의 논리적 관계를 컴퓨터나 프로그램에 적용하기 위해서는 *자료의 추상화가 필요하며 추상화를 통해 자료의 논리적 관계를 구조화한 것을 자료구조(data structure)라고 한다.

추상화 : 공통적인 개념을 이용하여 같은 종류의 다양한 객체를 정의한 것. 자료의 추상화 : 다양한 대상을 컴퓨터에 저장하고 처리하기 위해 대상들의 공통 특징만을 뽑아 정의한 것.

2.2 자료구조의 종류

2.3 알고리즘

컴퓨터에 의해 수행되기 위해 필요한 명령어들의 유한 집합이 사람의 머릿속에 추상화되어 존재하는 것. 알고리즘이 가지고 있어야 하는 조건은 ① 출력, ② 유효성, ③ 입력, ④ 명확성, ⑤ 유한성 등이 있다.

2.4 자료구조와 알고리즘의 관계

자료구조 : 입력 자료에 대한 추상화된 상태 알고리즘 : 컴퓨터가 수행해야 할 명령의 추상화 즉, 자료구조로 구조화하고 알고리즘으로 체계화한다. 이러한 자료구조와 알고리즘을 구체화하는 수단 중 하나가 프로그래밍 언어이다.

이벤트 버블링

이벤트가 하위 요소에서 상위 요소로 전파

버블링은 타깃 이벤트에서 시작해 document 객체를 만날 때까지 각 노드에서 모두 발생한다. 이러한 버블링은 event.stopPropagation()를 사용해 중단할 수 있다. 하지만 버블링은 유용하기 때문에 버블링을 꼭 멈춰야 하는 명백한 상황이 아니라면 버블링을 막지 않는게 좋다.

이벤트 캡처링

이벤트가 상위 요소에서 하위 요소로 전파

elem.addEventListener(..., true)

addEventListener의 capture 옵션을 true로 설정하면 캡처링 단계에서 이벤트를 잡아낼 수 있다. 캡처링 단계는 거의 쓰이지 않고, 주로 버블링 단계의 이벤트만 다뤄진다.

References

• https://ko.javascript.info/bubbling-and-capturing
• https://github.com/Esoolgnah/Frontend-Interview-Questions/blob/main/Notes/important-4/event-bubbling.md#%ED%83%80%EA%B9%83-%EB%8B%A8%EA%B3%84

자바스크립트에서 클로저(Closure)는 함수와 그 함수가 선언된 렉시컬 환경(Lexical Environment) 간의 조합을 나타낸다. 간단히 말하면, 클로저는 함수가 자신이 생성된 렉시컬 스코프를 기억하고 그 스코프에 접근할 수 있게 하는 메커니즘이다.

아래의 예시 코드를 통해 클로저의 메커니즘을 살펴보자.

function outer() {
  const message = "Closure";

  function inner() {
    console.log(message);
  }

  return inner;
}

const myFunction = outer();
myFunction(); // 출력: "Closure"

1. const myFunction = outer(); 해당 코드가 실행 될 때, outer 함수의 렉시컬 스코프에 message = "Closure" 기억되게 되고 return inner; 코드에 따라 myFunction 이라는 변수는 inner 함수를 참조하게 된다.

2. 이후 myFunction();가 실행되면 참조된 inner 함수를 찾아 실행하게 되는데 inner 함수의 렉시컬 스코프에는 message 값이 존재하지 않으니 상위 스코프인 outer 함수의 렉시컬 스코프에 기억된 message를 찾아 값을 가져와 console.log(message);코드를 실행시키게 된다.

이렇게 상위 렉시컬 스코프에 접근 할 수 있고, 그 스코프에 있는 변수에 접근할 수 있는 상황을 클로저라고 한다. 클로저를 활용하면 함수가 생성된 당시의 렉시컬 환경을 기억하고, 이를 통해 외부 변수에 접근 할 수 있다.

References

• https://github.com/Esoolgnah/Frontend-Interview-Questions/blob/main/Notes/important-5/closure.md

자바스크립트에서 호이스팅은 코드 실행 전 변수 및 함수 선언문이 스코프 내의 최상단으로 끌어올려지는 동작을 의미한다.

1. 변수 호이스팅

1.1. var

console.log(myAge); // undefined
var myAge = 28;

해당 코드는 우리가 알고 있는 동기 처리의 개념에서는 에러가 발생할 것 같지만 결과값은 undefined가 출력된다.

이는 컴파일러는 자바스크립트 엔진이 인터프리팅을 하기 전에 컴파일을 하는데 호이스팅으로 인해 실제로는 아래의 코드와 같이 동작을 한다.

var myAge;
console.log(myAge); // undefined
myAge = 28;

1.2 let,const

console.log(myAge); // ReferenceError: Cannot access 'myAge' before initialization
let myAge = 28;

console.log(myName); // ReferenceError: Cannot access 'myName' before initialization
const myName = "Lee";

var는 선언, 초기화가 동시에 이루어지기 때문에 위의 코드처럼 동작하지만 let,const는 선언단계만 호이스팅 되기 때문에 Reference Error를 출력되게 된다.

2. 함수 호이스팅

2.1 함수 선언문

함수의 선언문은 전체가 호이스팅되어 선언된 위치와 관계없이 코드 실행 전에 메모리에 올려진다.

hoisting();
function hoisting() {
  console.log('hoisting');
}

2.2 함수 표현식

함수 표현식의 경우에는 호이스팅이 되지 않는다.

hoisting(); // TypeError: hoisting is not a function
const hoisting = function() {
  console.log('hoisting');
}

References

• https://github.com/Esoolgnah/Frontend-Interview-Questions/blob/main/Notes/important-5/hoisting.md

1. 브라우저 렌더링 과정 (렌더링 엔진의 동작 과정)

1. DOM Tree 생성 : HTML를 파싱 후, DOM Tree 생성한다.

2. CSSOM Tree 생성 : CSS를 파싱 후, CSSOM Tree 생성한다.

3. Javascript를 실행 : HTML 중간에 스크립트가 존재하면 DOM Tree를 변경될 수 있기에 HTML 파싱이 중단되는데 이는 defer(파싱이 완료된 후 실행), async(비동기 실행) 옵션을 통해 제어할 수 있다.

4. DOM Tree와 CSSOM Tree를 조합하여 Render Tree 생성 : 이때, display: none; 속성과 같이 화면에서 보이지도 않고 공간을 차지하지 않는 것들은 Render Tree로 구축되지 않는다.

5. Render Tree 배치 (Layout(Reflow)) : 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산한다.

6. Render Tree 그리기 (paint(Repaint)) : 계산한 위치/크기를 기반으로 화면에 그린다.

2. Reflow, Repaint

2.1 Reflow

생성된 DOM 노드의 레이아웃 수치 변경 시 영향 받은 모든 노드의 수치를 다시 계산하여, Render Tree를 재생성하는 과정이다.

• DOM 엘리먼트 추가, 제거 또는 변경

• CSS 스타일 추가, 제거 또는 변경
• CSS 스타일을 직접 변경하거나, 클래스를 추가함으로써 레이아웃이 변경될 수 있습니다. 엘리먼트의 길이를 변경하면, DOM 트리에 있는 다른 노드에 영향을 줄 수 있습니다.
• CSS3 애니메이션과 트랜지션. 애니메이션의 모든 프레임에서 리플로우가 발생합니다.
• offsetWidth 와 offsetHeight 의 사용. offsetWidth 와 offsetHeight 속성을 읽으면, 초기 리플로우가 트리거되어 수치가 계산됩니다.
• 유저 행동. 유저 인터랙션으로 발생하는 hover 효과, 필드에 텍스트 입력, 창 크기 조정, 글꼴 크기 변경, 스타일시트 또는 글꼴 전환등을 활성화하여 리플로우를 트리거할 수 있습니다.
  출처: Reflow와 Repaint가 실행되는 시점(Reflow)

2.2 Repaint

Reflow 과정이 끝난 후 재생성된 렌더 트리를 다시 그리는 과정

• 가시성이 변경되는 순간 (opacity, background-color, visibility, outline)

• Reflow 가 실행된 순간 뒤에 실행됩니다.
  출처 : Reflow와 Repaint가 실행되는 시점(Repaint)

2.3 Reflow를 피하거나 영향을 최소화

링크의 3p 하단부터 방법들이 설명되어있다.

References

• https://github.com/Esoolgnah/Frontend-Interview-Questions/blob/main/Notes/important-5/browser-rendering.md
• https://github.com/Esoolgnah/Frontend-Interview-Questions/blob/main/Notes/important-5/reflow-repaint.md

async/await는 자바스크립트 비동기 처리 패턴 중 가장 최근에 나온 문법이다.(ES8) 콜백 함수와 프로미스의 단점을 보완하고 가독성이 좋은 코드를 작성할 수 있다.

async

async는 function 앞에 위치한다.

async function f() {
    return 1;
}

function 앞에 async를 붙이면 해당 함수는 항상 프로미스를 반환하고, 프로미스가 아닌 것은 프라미스로 감싸 반환한다.

await

await는 async 함수 안에서만 동작한다.

let value = await promise;

자바스크립트는 await 키워드를 만나게되면 프로미스가 처리될 때까지 기다린 후 결과를 반환한다. 프로미스가 처리되길 기다리는 동안엔 엔진이 다른 일(다른 스크립트를 실행, 이벤트 처리 등)을 할 수 있기 때문에, CPU 리소스가 낭비되지 않는다.

async/await 장점

이전 포스팅에서 알아본거처럼 자바스크립트에서 비동기 처리를 한다면 아래와 같이 작성 할 수 있다.

function getData() {
    var tableData;
    $.get('https://domain.com/products/1', function(response) {
        tableData = response;
    });
    return tableData;
}

console.log(getData()); // undefined

하지만 이 코드에서는 결과값이 undefined로 출력되는데 그 이유는 데이터를 요청하고 받아올 때 까지 기다려주지 않고 다음 코드를 실행해버리기 때문이다.

그래서 해당 문제점을 해결하기 위해 아래 코드와 같이 콜백 함수를 사용해왔다.

function getData(callbackFunc) {
    $.get('https://domain.com/products/1', function(response) {
        callbackFunc(response);
    });
}

getData(function(tableData) {
    console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});

하지만 콜백 함수를 활용한 비동기 처리에도 단점이 있는데, 처리해야할 비동기 처리가 많아지면 콜백 지옥이 발생한다는 것이였다. 콜백 지옥은 코드 가독성과 유지보수에서 이점이 없기 때문에 Promise나 async를 사용해서 비동기 처리를 한다.

그 중 오늘 포스팅하는 async/await의 장점은 콜백 함수, 프로미스와 비교하며 느낄 수 있다.

첫번째로는 콜백 함수를 사용하지 않고도 await을 활용하여 데이터를 기다렸다 받을 수 있다는 점이다. 두번째로는 프로미스에서 response.json()를 활용하면 JSON형식의 프로미스를 반환받게 되어 한번 더 .then을 사용하게되는데 await response.json()를 활용하면 데이터를 받을때까지 기다린 후 실행되기에 코드가 간결해지게 된다.

async/await 기본 문법

async function 함수명() {
  await 비동기_처리_메서드_명();
}

함수 앞에 async라는 예약어를 붙이고, 함수 내부의 로직 중 비동기 처리 코드 앞에 await를 붙인다.

async/await 에러 핸들링

async function f() {

  try {
    let response = await fetch('http://유효하지-않은-주소');
    let user = await response.json();
  } catch(err) {
    // fetch와 response.json에서 발행한 에러 모두를 여기서 잡습니다.
    alert(err);
  }
}

f();

async/await는 try..catch를 활용하여 에러 핸들링을 한다.

References

• https://ko.javascript.info/async-await
• https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/
• https://joshua1988.github.io/web-development/javascript/js-async-await/

fetch 함수는 HTTP 요청 전송 기능을 제공하는 Web API의 한 종류이다. 반환하는 데이터는 HTTP response 객체를 래핑한 Promise 객체를 반환하기에 Promise의 후속처리함수(then,catch)를 사용할 수 있다.

• 예제 code

  // 1번 코드
  fetch("https://jsonplaceholder.typicode.com/todos")
    .then(function(response){
        console.log(response);
    });
  

// 2번 코드 fetch("https://jsonplaceholder.typicode.com/todos") .then(function(response){ console.log(response.json()); })

// 3번 코드 fetch("https://jsonplaceholder.typicode.com/todos") .then(function(response){ return response.json(); }) .catch(function(reason) { console.log(reason); }) .then(function(data) { console.log(data); });

1번 코드 실행 시 아래와 같은 <code>HTTP response</code> 객체를 래핑한 <code>Promise</code>객체가 반환되는 것을 볼 수 있다.
- **response**
![](https://velog.velcdn.com/images/kor-seonwoo/post/f8b4034a-8b1d-48a6-8a42-b90672014d58/image.png)

대부분의 <code>REST API</code>들이 <code>JSON</code> 형태의 데이터 타입을 응답하기에 프로퍼티를 자세히보면 <code>JSON</code>메서드가 존재한다. <code>JSON</code>메서드 사용하여 2번 코드처럼 작성해준다면 <code>JSON</code> 형식으로 바꾼 프로미스를 반환받는다. 이때 프로미스로 반환되는 이유는 아직 데이터를 다 받지 않은 상태여서 그렇다 그래서 프로미스 체이닝을 활용해 3번 코드처럼 작업하게 된다.

요약하자면
- <code>fetch</code>함수를 활용하여 요청한 데이터를 **HTTP response 객체를 래핑한 Promise 객체 형태**로 받게된다.
- <code>response</code>받은 객체의 프로퍼티 중에는 <code>JSON</code>메서드가 존재하고 <code>JSON</code>메서드를 활용하여 <code>JSON</code>형식으로 변환한 프로미스를 받는다.
- <code>JSON</code>형식의 프로미스를 체이닝을 활용하여 자바스크립트 객체로 변환받는다.
***

### fetch 사용법
```javascript
fetch(url, options)
  .then((response) => console.log("response:", response))
  .catch((error) => console.log("error:", error));

fetch 함수는 첫 번째 인자로 URL, 두 번째 인자로 옵션 객체를 전달받아 Promise 객체를 반환한다. 호출에 성공하였을 경우 response객체를 resolve, 실패했을 경우 error객체를 reject한다.

두번째 인자인 옵션(options)객체에는 HTTP method, headers, body 등을 설정해줄 수 있다.

GET 호출 (조회)

fetch(url)
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log("error:", error));

fetch 함수는 디폴트로 GET 방식으로 작동하고 GET방식은 요청 전문을 받지 않기 때문에 옵션 인자(options)가 필요없다. 단순하게 보여주기 위한 데이터를 요청은 GET방식이 적절하다.

POST 호출 (생성)

fetch(url, {
    method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        title: "Test",
        body: "I am testing!",
        userId: 1,
      }),
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log("error:", error));

POST 방식은 새로운 데이터를 추가하기 위해 사용된다.

PUT 호출 (수정)

fetch(url/1, {
    method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        title: "Test",
        body: "I am testing!",
        userId: 1,
      }),
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log("error:", error));

PUT 방식은 method 옵션만 PUT으로 설정한다는 점 빼놓고는 POST 방식과 비슷하다. 데이터의 수정하는데 주로 사용한다.

DELETE 호출 (삭제)

fetch(url/1, {
    method: "DELETE",
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log("error:", error));

DELETE 방식에서는 보낼 데이터가 없기 때문에, headers와 body 옵션이 필요가 없다. url 경로 매개변수를 지정하여 삭제하고싶은 데이터를 지정하여주면된다.

위에서 알아본 HTTP method를 완벽하고 올바른 예시는 아닐 수 있겠지만 간단한 예시로 요약해보자면 /- 자체 서버의 유저정보 데이터를 활용한다고 예시를 들어보자.

• GET : 회원가입 과정에서 사용자가 입력한 데이터가 서버에 이미 존재하는지 유무를 확인하거나 로그인한 유저가 자신의 프로필 페이지를 보려할 때 등에서 사용한다.
• POST : 회원가입 과정에서 사용자가 입력한 데이터를 서버의 유저정보 데이터에 새롭게 추가 한다.
• PUT : 개인정보수정 페이지에서 사용자가 수정한 데이터를 서버의 유저정보 데이터에서 기존 데이터를 찾아 수정한다.
• DELET : 사용자가 회원탈퇴 버튼을 눌렀을 때 서버의 유저정보 데이터에서 요청한 사용자의 데이터를 삭제한다.

더 좋고 더 많은 예제가 있을 수 있겠지만 간단하게 이렇게 예시를 들어볼 수 있을 것 같다.

References

• https://velog.io/@eunjin/JavaScript-fetch-%ED%95%A8%EC%88%98-%EC%93%B0%EB%8A%94-%EB%B2%95-fetch-%ED%95%A8%EC%88%98%EB%A1%9C-HTTP-%EC%9A%94%EC%B2%AD%ED%95%98%EB%8A%94-%EB%B2%95
• https://www.daleseo.com/js-window-fetch/

Promise는 ES6에서 도입된 비동기 작업을 조금 더 수월하게 처리 할 수 있게 해주는 기능이다.

이전에는 비동기 작업을 처리 할 때 콜백 함수로 처리를 했었는데 처리할 비동기 작업이 많아지면 [JavaScript] ajax, setTimeout & 콜백 함수 편에서 알아본 콜백 지옥이 만들어져 코드의 유지보수성 및 가독성을 해치는 일이 발생한다. 이를 방지하기 위해 Promise를 학습해보도록 하자.

00. 프로미스 처리 흐름

출처 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

01. 프로미스 생성

executor

let promise = new Promise(function(resolve, reject) {
  // executor()
});

executor는 프로미스가 만들어질 때 자동으로 전달되어 실행되는데 여기서 원하는 일이 처리가 된다. 처리가 끝나면 executor의 인수 resolve와 reject중 상황에 맞는 콜백을 선택하여 호출해야한다.

• resolve(value) — 일이 성공적으로 끝난 경우 그 결과를 나타내는 value와 함께 호출
• reject(error) — 에러 발생 시 에러 객체를 나타내는 error와 함께 호출

states

프로미스를 생성하고 종료될 때까지 3가지의 상태를 갖는다.

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled(완료) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

Pending(대기)

new Promise();

프로미스를 호출하면 대기 상태가 된다.

Fulfilled(완료)

new Promise(function(resolve, reject) {
  resolve();
});

resolve를 즉시 호출해보면 프로미스는 Fulfilled(완료)상태가 된다.

Rejected(실패)

new Promise(function(resolve, reject) {
  reject();
});

reject를 즉시 호출해보면 프로미스는 Rejected(실패)상태가 된다.

02. 프로미스 사용

프로미스 객체의 state와 result 프로퍼티는 내부 프로퍼티로 직접 접근할 수는 없고, 후속처리함수인 .then, .catch 메서드를 사용해 접근할 수 있다.

.then

promise.then(
  result => alert(result), // resolve일 때 실행
  error => alert(error) // reject일 때 실행
);

.then의 첫번째 인수는 프라미스가 이행되었을 때 실행되는 함수이고, 여기서 실행 결과를 받는다. .then의 두번째 인수는 프라미스가 거부되었을 때 실행되는 함수이고, 여기서 에러를 받는다.

✔ 두번째 인수는 생략하여 이행된 경우만을 다룰 수 있다. ✔ 첫번째 인수에 null을 전달하여 .then(null, f) 형태로 실패된 경우만을 다룰 수 있다.

.catch

// .catch(f)는 promise.then(null, f)과 동일하게 작동합니다
promise.catch(f); // Error 출력

실패한 이유(실패 처리의 결과 값)를 catch()로 받을 수 있습니다.

✔ .then 설명에서 알아본거 처럼 .then(f, f) 또는 .then(null, f)을 활용하여 에러를 처리할 수 있겠지만 catch()를 사용하는게 더 효율적이다.

03. 프로미스 사용 예제

위에서 알아본 내용들을 종합해서 사용해보자.

• ajax 통신 예제 코드에 프로미스를 적용한 코드이다.

  function getJsonData() {
  return new Promise(function(resolve, reject) {
    $.get('https://jsonplaceholder.typicode.com/todos', function(response) {
      if (response) {
        resolve(response);
      }
      reject(new Error("서버와 소통이 안된다!!!!"));
    });
  });
  }
  

getJsonData() .then(function(result) { console.log(result); // response 값 출력 }) .catch(function(err) { console.error(err); // Error 출력 });

- 프로미스 체이닝
```javascript
function getJsonData() {
  return new Promise(function(resolve, reject) {
    // ...
  });
}

getJsonData()
  .then(function(result) {
    // ...
  })
  .then(function(result) {
    // ...
  })
  .then(function(result) {
    // ...
  })
  .catch(function(err) {
      // ...
  });

프로미스 체이닝을 활용해 비동기 코드를 간단하고 더 효율적으로 작성할 수 있다.

References

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
• https://ko.javascript.info/promise-basics
• https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

01. ajax를 활용한 비동기 처리 사례

function getData() {
    var tableData;
    $.get('https://domain.com/products/1', function(response) {
        tableData = response;
    });
    return tableData;
}

console.log(getData()); // undefined

해당 코드는 ajax 통신으로 HTTP GET 요청을 날려 데이터를 받아오는 비동기 처리 코드이다. 해당 코드가 통신을 잘 주고받았는지 결과값을 한번 봐보자 console.log(getData()); // undefined 결과 값으로 undefined가 출력된다. 요청 코드가 잘못된거라고 생각할 수 있겠지만 undefined가 출력된 이유는 response인자에 요청한 데이터가 담기기도전에 다음코드인 return tableData; 코드를 실행해버렸기 때문이다.

02. setTimeout을 활용한 비동기 처리 사례

// #1
console.log('Hello');
// #2
setTimeout(function() {
    console.log('Bye');
}, 3000);
// #3
console.log('Hello Again');

두번째 사례는 Web API의 한 종류인 setTimeout이다. setTimeout은 간단하게 셋팅한 시간만큼 기다렸다가 함수 내부의 로직을 실행하는 코드이다. 비동기 처리를 정확하게 이해하지 못했다면 위의 코드 결과값은 아래처럼 나온다 생각할 것이다.

'Hello' 3초 대기 후 'Bye' 'Hello Again'

하지만 실제 출력되는 결과 값은 아래와 같이 출력된다.

'Hello' 'Hello Again' 3초 대기 후 'Bye'

setTimeout도 비동기 방식으로 실행되기 때문에 setTimeout이 실행되면 Web API로 이동된 후 다음 코드들을 처리한 후 다시 CALL STACK으로 올라와 실행이 된다.

ajax와 setTimeout을 활용하여 작성된 코드들로 비동기 처리 방식의 사례를 알아보았으니 콜백 함수를 활용하여 본격적인 비동기 처리 코드를 작성해보도록 하자.

03. 콜백 함수

function getData(callbackFunc) {
    $.get('https://domain.com/products/1', function(response) {
        callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
    });
}

getData(function(tableData) {
    console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});

해당 코드는 위에서 ajax로 작성했던 사례 코드의 undefined가 출력되는 문제를 콜백 함수를 통해 개선한 코드이다. 콜백 함수 동작 방식에 대해 완벽하게 이해할 수 있도록 작성된 너무 좋은 예시를 인용하였다.

비유로 이해하는 콜백 함수 동작 방식

콜백 함수의 동작 방식은 일종의 식당 자리 예약과 같습니다. 일반적으로 맛집을 가면 사람이 많아 자리가 없습니다. 그래서 대기자 명단에 이름을 쓴 다음에 자리가 날 때까지 주변 식당을 돌아다니죠. 만약 식당에서 자리가 생기면 전화로 자리가 났다고 연락이 옵니다. 그 전화를 받는 시점이 여기서의 콜백 함수가 호출되는 시점과 같습니다. 손님 입장에서는 자리가 날 때까지 식당에서 기다리지 않고 근처 가게에서 잠깐 쇼핑을 할 수도 있고 아니면 다른 식당 자리를 알아볼 수도 있습니다.

자리가 났을 때만 연락이 오기 때문에 미리 가서 기다릴 필요도 없고, 직접 식당 안에 들어가서 자리가 비어 있는지 확인할 필요도 없습니다. 자리가 준비된 시점, 즉 데이터가 준비된 시점에서만 저희가 원하는 동작(자리에 앉는다, 특정 값을 출력한다 등)을 수행할 수 있습니다.

출처 - https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/#%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC%EC%9D%98-%EC%B2%AB-%EB%B2%88%EC%A7%B8-%EC%82%AC%EB%A1%80

04. 콜백 지옥

$.get('url', function(response) {
    parseValue(response, function(id) {
        auth(id, function(result) {
            display(result, function(text) {
                console.log(text);
            });
        });
    });
});

위와 같은 코드 구조를 콜백 지옥이라고 하는데, 쉽게 정리하면 콜백 함수 내부에 콜백을 계속 무는 형식을 말한다. 이는 코드의 가독성을 떨어뜨리고 유지보수 측면이나 에러 발생 시 디버깅 작업을 생각하면 어질어질한게 문제점이다.

콜백 지옥을 코딩 패턴으로 해결한다면 아래와 같이 콜백 함수를 분리하여 가독성을 챙길 수 있다..

function parseValueDone(id) {
    auth(id, authDone);
}
function authDone(result) {
    display(result, displayDone);
}
function displayDone(text) {
    console.log(text);
}
$.get('url', function(response) {
    parseValue(response, parseValueDone);
});

다음 포스팅은 더욱 효율적으로 비동기 처리 코드를 작성 할 수 있는 Promise에 대해 알아보자.

References

• https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/#%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC%EC%9D%98-%EC%B2%AB-%EB%B2%88%EC%A7%B8-%EC%82%AC%EB%A1%80
• https://learnjs.vlpt.us/async/

이미지출처 : https://learnjs.vlpt.us/async/

동기

코드가 반드시 작성된 순서 그대로 실행된다. 즉, 먼저 시작된 하나의 작업이 끝날 때까지 대기하다가 작업이 끝나면 다음순서의 작업을 시작하는 방식이다.

동기의 동작 원리

1. Call stack에 작성한 코드 순서대로 push한다.
2. 쌓인 반대 순서대로 실행한다. (후입선출 LIFO)
3. 실행을 마친 코드는 Call stack에서 pop한다.

비동기

코드가 작성된 순서대로 실행되는 것이 아닌 코드이다. 즉, 먼저 시작된 하나의 작업이 끝날 때까지 대기하지 않고 여러 작업이 처리되는 방식이다.

비동기의 동작 원리

1. Call stack에 작성한 코드 순서대로 push한다.
2. 도중에 비동기 함수가 push되어 쌓이면 Web API 이동 된 후 Call stack에서 pop한다.
3. Web API에서 비동기 함수의 이벤트 실행을 마친 후 Callback Queue로 push한다. 그동안 Call stack에서는 다른 코드들을 순차적으로 실행 및 pop한다.
4. Call stack이 비어있는것을 Event Loop가 확인한 후 Callback Queue에 대기중인 콜백 함수를 Call stack에 push한다.
5. Call stack에 push된 함수는 실행을 완료한 후 pop되며 실행이 마무리된다. 출처 : https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif gif로 설명된 비동기의 동작 원리를 보면 더욱 쉽게 이해 할 수 있다. (Lydia Hallie님의 자료 덕분에 순식간에 이해할 수 있었다.. 감사합니다!) (https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif)

References https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/ https://www.youtube.com/watch?v=8aGhZQkoFbQ

- HTTP는 사용자가 중요한 데이터(계정정보, 금융정보 등)를 서버에 제출할 때 누구나 읽을 수 있는 일반 텍스트형식으로 전송을 하게 된다. 그렇게되면 제3자에게 정보가 유출 될 수 있다는 문제가 발생할 수 있게 된다. 이러한 보안이슈를 커버할 수 있는게 바로 HTTPS인데 HTTPS는 내가 사이트에 보내는 정보들을 제 3자가 못 보게 해주고 접속한 사이트가 믿을 만한 사이트인지를 인증해주는 HTTP에 데이터 암호화가 추가된 프로토콜이다.

HTTPS 암호화 방식

• 대칭키 암호화 -클라이언트와 서버가 동일한 키로 암호화/복호화를 진행한다. -연산속도가 빠르다. -하지만 대칭키가 노출 된다면 무용지물...

• 비대칭키 암호화 - 1개의 쌍으로 구성된 공개키와 개인키로 암호화/복호화를 진행한다. - 연산속도가 느리다.

  ✨ 개인키

  • 웹 사이트 소유자가 관리하며, 비공개로 유지된다.
  • 키는 웹 서버에 있으며 공개 키로 암호화된 정보를 복호화 하는데 사용된다.

  ✨ 공개키

  • 웹 사이트 소유자가 관리하며, 비공개로 유지된다.
  • 서버에서 응답받은 데이터 중 일부는 개인키로 암호화 되어있는데 이를 공개키로 복호화할 수 있다.

HTTPS 동작 과정

HTTPS는 대칭키와 비대칭키를 모두 사용하는데, 먼저 서버와 클라이언트가 처음 연결을 할때 비대칭키를 사용하고 안정성이 확보된 후엔 대칭키를 사용하여 빠른 연산 속도를 활용한 통신을 하게 된다. 이러한 연결 과정을 단계별로 살펴보면 다음과 같다.

1. Client Hello 와 Server Hello 1-1) Client → Server : 클라이언트 측에서 생성한 랜덤 데이터 1-2) Server → Client : 서버 측에서 생성한 랜덤 데이터, 인증서
2. 서버에서 보내온 인증서의 진위여부를 확인하고 서버의 신뢰성을 보장 받는다. 2-1) 서버측에서 보내온 인증서가 CA(Certificate Authority)의 인증서가 맞다면 해당 CA의 개인키로 암호화 되어있다. 2-2) 각각의 브라우저들은 CA들의 공개키가 내장되어있기 때문에 해당 공개키를 사용하여 복호화 하여 인증서의 진위여부 및 공개키를 얻게 된다.
3. session key 생성 3-1) 클라이언트 측에서 생성한 랜덤 데이터와 서버 측에서 생성한 랜덤 데이터를 조합하여 pre master secret키를 생성한다. 3-2) 생성된 pre master secret키를 서버 공개키로 암호화하여 서버로 전송하면 서버에서는 개인키를 사용하여 복호화를 진행하고 이후 서버와 클라이언트는 모두 일련의 과정을 거쳐 session key를 생성한다.
4. 세션 서버와 클라이언트가 데이터를 주고 받는 단계이다. 이 단계에서부터는 대칭키 방식으로 암호화를 진행하여 데이터를 송수신하는데 그 대칭키가 바로 session key값을 활용한다는 것이다.
5. 세션 종료 데이터의 전송이 끝나면 통신에 사용된 대칭키인 session key는 폐기된다.

References https://mangkyu.tistory.com/98 https://www.yalco.kr/31_https/ https://dong5854.tistory.com/30

• HTTP는 서버와 클라이언트가 인터넷상에서 데이터를 주고 받기 위한 프로토콜이다.
• 일반적으로 전송 계층 프로토콜로 TCP, 네트워크 계층 프로토콜로 IP를 사용한다.
• HTTP는 기본적으로 80번 포트를 사용한다.

HTTP 작동방식

이미지 출처 : https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview

• HTTP는 서버/클라이언트 모델을 따른다.
• 클라이언트가 서버에게 요청(request)*을 보내면 서버는 클라이언트에게 응답(response)을 보낸 후 클라이언트와 연결을 끊는다.
• 위와 같은 작동방식의 특징 갖고 있어 HTTP는 무상태 프로토콜이라고 불린다.

이러한 작동방식으로 HTTP의 장단점은 이렇게 정리할 수 있다.

장점

• 불특정 다수를 대상으로 하는 서비스에 적합
• 클라이언트와 서버가 지속적으로 연결되어 소통하는 방식이 아니기에 정해진 최대 연결수보다 훨씬 많은 요청과 응답을 처리할 수 있다.

단점

• 응답(response) 후 연결을 끊어버리기 때문에, 클라이언트의 이전상황을 알 수 없다. 다시말해 클라이언트가 바로 다음 요청을 한다해도 서버는 이 클라이언트가 방금 전 요청을 했던 클라이언트와 동일한지 알 수 없다는 것이다.

위와 같은 무상태(Stateless) 특징때문에 정보를 유지하기 위한 목적으로 Cookie, Web storage와 같은 기술이 등장하였다.

HTTP 메시지

이미지 출처 : https://www.boostcourse.org/web316/lecture/16661?isDesc=false

1. 요청 데이터 포맷 (request messages)

• 요청헤더, 한줄공백, 요청바디로 이루어져 있다.

  * 요청헤더

  ``` GET /servlet/query?a=10&b=90 HTTP/1.1 /**
• GET : 요청 메서드
• /servlet/query?a=10&b=90 : 요청 URL
• HTTP/1.1 : HTTP 프로토콜 버전
• */ Host : www.sk.com User-agent: mozilla/4.0 Accept-language: kr

  #**요청 메서드**
  = 요청 메서드는 송수신 방법을 뜻한다.
  

*주요 메서드

• GET : 리소스 조회
• POST : 요청 데이터 처리, 주로 데이터 등록에 사용
• PUT : 리소스를 대체, 해당 리소스가 없으면 생성
• DELETE : 리소스 삭제
• PATCH : 리소스 일부 변경

*기타 메서드

• HEAD: GET과 동일하지만 메시지 부분을 제외하고, 상태 줄과 헤더만 반환
• OPTIONS: 대상 리소스에 대한 통신 가능 옵션을 설명(주로 CORS에서 사용)
• CONNECT: 대상 자원으로 식별되는 서버에 대한 터널을 설정
• TRACE: 대상 리소스에 대한 경로를 따라 메시지 루프백 테스트를 수행

#요청 URL = 요청 타겟을 나타내며, 이들은 요청 컨텍스트에 의해 특정 지어진다.

#HTTP 프로토콜 버전 = 웹 브라우저가 사용하는 HTTP 프로토콜 버전을 의미한다.

두번째 줄 부터는 여러 줄의 헤더 정보가 키-벨류 쌍으로 이루어져 있다.

* 한줄공백

• 요청헤더가 끝난 후 한줄공백 이후에 요청바디가 등장한다.

  * 요청바디

• 요청바디는 POST, PUT메서드를 사용하였을때만 존재.

2. 응답 데이터 포맷 (response messages)

• 응답헤더, 한줄공백, 응답바디로 이루어져 있다.

  * 응답헤더

  ``` HTTP/1.1 200 ok /**
• HTTP/1.1 : 응답 HTTP 프로토콜 버전
• 200 : 응답 코드
• ok : 응답 메시지
• */ Date : Thu, 03 jul 2003 12:00:15 GMT Server: Apache/1.3.0 (Unix) Last-Modified: Sun, 5 May 2003 09:23:24 GMT Content-Length: 6821 Content-Type: text/html

*주요 상태 코드

2xx - 요청 정상 처리

• 200 OK : 요청 성공
• 201 Created : 요청 성공해서 새로운 리소스가 생성됨
• 202 Accepted : 요청이 접수되었으나 처리가 완료되지 않았음
• 204 No Content : 서버가 요청을 성공적으로 수행했지만, 응답 페이로드 본문에 보낼 데이터가 없음

3xx -요청을 완료하려면 추가 행동이 필요 (리다이렉션)

• 301 Moved Permanently : 리다이렉트시 요청 메서드가 GET으로 변하고, 본문이 제거될 수 있음
• 302 Found : 리다이렉트시 요청 메서드가 GET으로 변하고, 본문이 제거될 수 있음
• 303 See Other : 리다이렉트시 요청 메서드가 GET으로 변경
• 304 Not Modified : 캐시를 목적으로 사용
• 307 Temporary Redirect : 리다이렉트시 요청 메서드와 본문 유지(요청 메서드를 변경하면 안된다.)
• 308 Permanent Redirect : 리다이렉트시 요청 메서드와 본문 유지(처음 POST를 보내면 리다이렉트도 POST 유지)

4xx -클라이언트 오류, 잘못된 문법등으로 서버가 요청을 수행할 수 없음

• 400 Bad Request : 클라이언트가 잘못된 요청을 해서 서버가 요청을 처리할 수 없음
• 401 Unauthorized : 클라이언트가 해당 리소스에 대한 인증이 필요함
• 403 Forbidden : 서버가 요청을 이해했지만 승인을 거부함
• 404 Not Found : 요청 리소스를 찾을 수 없음

5xx -서버 오류, 서버가 정상 요청을 처리하지 못함

• 500 Internal Server Error : 서버 문제로 오류 발생, 애매하면 500 오류
• 503 Service Unavailable : 서비스 이용 불가

두번째 줄 부터는 여러 줄의 헤더 정보가 키-벨류 쌍으로 이루어져 있다.

* 한줄공백

• 응답헤더가 끝난 후 한줄공백 이후에 응답바디가 등장한다.

  * 요청바디

• 실제 응답 리소스 데이터가 나오는 부분이다. 데이터의 형식은 요청 헤더에 지정된 타입을 따른다.

References

• https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview
• https://www.boostcourse.org/web316/lecture/16661?isDesc=false
• https://velog.io/@haron/HTTP-%EB%A9%94%EC%84%9C%EB%93%9C%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%84%EB%8A%94%EB%8C%80%EB%A1%9C-%EB%A7%90%ED%95%B4%EC%A3%BC%EC%84%B8%EC%9A%94
• https://inpa.tistory.com/entry/WEB-%F0%9F%8C%90-HTTP-%EB%A9%94%EC%84%9C%EB%93%9C-%EC%A2%85%EB%A5%98-%ED%86%B5%EC%8B%A0-%EA%B3%BC%EC%A0%95-%F0%9F%92%AF-%EC%B4%9D%EC%A0%95%EB%A6%AC