DH의 개발 공부로그

[JavaScript] async / await 병렬 구조에 대해 알아보기!

DeveloperDH — Tue, 30 Dec 2025 11:41:53 +0900

async / await 병렬 구조

await는 병렬을 만들지 않는다.
Promise를 먼저 만들고, 나중에 await 해야 병렬이다.

이 내용만 기억하고 있어도 async / await 병렬 구조에 대해 절반은 마스터 했다고 해도 무방합니다.
그렇다면 이제 async / await의 병렬 구조가 무엇인지에 대해 알아보곘습니다.
그에 앞서 병렬이 뭔지에 대해 간략하게 알아보겠습니다.

직렬(Sequential) vs 병렬(Parallel)

직렬: 구성 요소가 하나의 선형 경로로 연결된 방식
병렬: 구성 요소가 여러 갈래로 나뉘어 각각 독립적인 경로를 가지는 방식
직렬과 병렬의 정의는 위의 설명과 같습니다. 이제 코드 상으로 들어가서 좀 더 이해하기 쉽게 설명을 드리면 아래와 같습니다.

✅ 직렬

직렬은 작업을 하나씩 순서대로 처리하는 방식입니다.
이전 작업이 완전하게 끝이나야 다음 작업을 처리하게 되며, 해당 코드는 실행 순서가 중요할 떄 사용합니다.
따라서 코드를 이해하기 쉽고, 의존성이 있을 때 처리가 적합하다는 특징이 있으며, 단점으로는 실행 시간이 길어질 수 있다는 점이 있습니다.

간단한 예시

await taskA();
await taskB();
await taskC();

✅ 병렬

병렬의 경우는 여러작업을 동시에 시작해 처리하는 방식을 말합니다.
작업들이 같은 시간에 실행이 되며, 서로 의존된 작업 아닌 경우에 사용하는 것이 적합합니다.
전체 실행 시간이 짧다보니, 성능 최적화에 유리하나, 어떤 식으로 사용하냐에 따라 하나라도 실패하는 케이스가 있을 시 전체가 실패할 수 있습니다.

간단한 예시

await Promise.all([
  taskA(),
  taskB(),
  taskC(),
]);

♻️ 핵심 포인트, "실행"과 "대기"의 분리!

우리가 흔히 오해하는 것이 await가 비동기 함수를 실행시킨다고 생각을 하는 것입니다. 하지만 사실은 다릅니다.
getApple() 처럼 함수를 호출하는 순간, 자바스크립트 엔진은 즉시 일을 시키고 Promise라는 '주문서'를 우리 손에 쥐여줍니다.
그리고 엔진은 이미 백그라운드에서 일을 시작했습니다.
그렇다면 여기서 await의 역할은 우리 손에 들린 '주문서'가 '실제 물건'으로 변할 때까지 그 자리에서 기다리는(Yield) 역할만 합니다.

❎ 직렬 처리 (Sequential)

"하나씩 주문하고 기다리고, 물건 받으면 다음 가게 가기"

// 1. 사과 가게 가서 주문하고 사과 나올 때까지 기다림 (1초)
const a = await getApple(); 

// 2. 사과를 받은 '후에야' 바나나 가게로 출발함 (1초)
const b = await getBanana(); 

// 총 2초 소요

✅ 병렬 처리

"모든 가게에 주문서부터 던져놓고, 나중에 수거만 하기"

// 1. 일단 사과, 바나나 가게에 동시에 전화를 걸어 주문함 (병렬 시작!)
const applePromise = getApple();  // 엔진: "오케이, 사과 준비 시작할게!"
const bananaPromise = getBanana(); // 엔진: "바나나도 같이 준비 시작할게!"

// 2. 이제 주문서들이 물건으로 변하길 기다림
const a = await applePromise;  // 사과가 나올 때까지 대기
const b = await bananaPromise; // 이미 바나나는 준비 중이거나 끝났음

// 총 1초 소요 (가장 오래 걸리는 작업 기준)

이것이 가능한 이유는 자바스크립트 엔진이 비동기 함수를 호출하는 즉시 작업을 시작하기 때문입니다. await는 그저 나중에 "너 다 됐니?"라고 물어보는 체크포인트일 뿐입니다.

⚒️ 병렬 처리를 도와주는 도구들

위의 병렬 처리 코드와 같이 함수 하나하나 변수에 담아 await 하는 것도 방법이지만, 작업이 많아지면 코드가 길어지고, 오히려 지저분해지기 마련입니다.
이때 자바스크립트가 제공하는 병렬 처리 전용 메서드를 사용하면 훨씬 깔끔한 코드를 작성할 수 있습니다.

1. Promise.all : "모 아니면 도" (All or Nothing)

Promise.all은 모든 Promise가 fulfilled일 때만 성공하는 Promise를 반환해줍니다.
단 하나라도 rejected가 되면 즉시 전체가 실패가 되며, 나머지 Promise가 무시됩니다.
따라서 모든 작업이 반드시 성공해야 의미가 있을 때 사용하는 것이 좋습니다.

코드 예시

1.
await Promise.all([
  fetchProfile(),
  fetchPoints(),
  fetchFollowers()
]);

2.
const [profile, points, followers] = await Promise.all([
      fetchProfile(),
      fetchPoints(),
      fetchFollowers()
    ]);

3.
const deleteSelectedIds = [1, 5, 8, 12];
// 각 ID별로 삭제 함수를 실행하고 모두 끝날 때까지 대기
await Promise.all(deleteSelectedIds.map(id => deletePost(id)));

❌ Promise.all 안티패턴

의미 없는 await
await Promise.all([ await a(), await b(), ]);
forEach + async
items.forEach(async (item) => { await save(item); }); 병렬 ❌, await ❌, 에러 캐치 ❌

2. Promise.allSettled : "실패해도 괜찮아, 일단 다 해봐"

Promise.allSettled는 모든 Promise가 “끝날 때까지” 기다린 후 각각의 성공/실패 결과를 반환합니다.
부분 성공을 허용하는 경우에 사용하면 빛을 발합니다.

코드 예시

1. 
const contents = await Promise.allSettled([
  fetchWeather(), // 실패 가능성 높음
  fetchNews(),    // 성공함
  fetchStocks()   // 성공함
]);

contents.forEach((result, index) => {
  if (result.status === 'fulfilled') {
    renderWidget(index, result.value);
  } else {
    renderErrorPlaceholder(index, "로딩 실패");
  }
});

2. 
const results = await Promise.allSettled(users.map(u => sendEmail(u)));

const successCount = results.filter(r => r.status === 'fulfilled').length;
const failedUsers = results
  .map((r, i) => r.status === 'rejected' ? users[i].name : null)
  .filter(Boolean);

console.log(`성공: ${successCount}건, 실패: ${failedUsers.join(', ')}`);

병렬 + 순차 = 하이브리드 패턴 ⭐⭐⭐

뻔한말이기는 하지만 의존 없는 것만 병렬시키고, 의존 생기면 순차적으로 진행 될 수 있도록 작업을 하는것이 중요합니다.
비동기 최적화의 핵심은 '무조건적인 병렬'이 아닙니다. 의존성이 없는 작업은 병렬로 묶어 속도를 높이고, 데이터의 선후 관계가 명확한 작업은 순차적으로 배치하여 로직의 안정성을 확보하는 '하이브리드 설계'가 핵심입니다

// 1단계 병렬
const [user, config] = await Promise.all([
  fetchUser(),
  fetchConfig(),
]);

// 2단계 순차
const data = await fetchData(user.id, config.type);

병렬로 돌려도 되는 조건

서로 의존 ❌
순서 중요 ❌
서버 부하 허용 ⭕
실패 묶어도 OK ⭕

순차로 가야 하는 조건

결과 의존 ⭕
순서 중요 ⭕
트랜잭션 성격 ⭕
실패 시 중단 필요 ⭕

✅ 오늘의 핵심 요약

✔ await는 병렬을 만들지 않는다
✔ Promise를 먼저 생성해야 병렬
✔ Promise.all / allSettled 구분
✔ 병렬은 의존 없는 것만

"기억하세요. await는 제어권을 잠시 내려놓는 '쉼표'이지, 엔진을 가동하는 '시동키'가 아닙니다.
병렬의 마법은 await를 만나기 전, 함수를 호출하는 그 찰나에 시작됩니다."

[Vue] Vue의 템플릿 문법에 대하여! - 개념 정리

DeveloperDH — Thu, 23 May 2024 22:48:32 +0900

템플릿 문법

Vue의 템플릿 문법이란 데이터를 렌더링 된 DOM에 바인딩하여 화면을 조작하는 방법을 말합니다.
템플릿 문법은 크게 데이터 바인딩과 디렉티브 두가지로 나누어 볼 수 있습니다.
먼저 데이터 바인딩과 관련 된 부분 먼저 살펴보면 아래와 같습니다.

1. 데이더 바인딩

텍스트 보간법

텍스트 보간법은 뷰의 데이터 바인딩으로 사용되는 가장 기본적인 방법으로 "Mustache"(이중 중괄호) 문법을 사용하는 방법입니다

<span>메시지: {{ message }}</span>

해당 부분에서 이중 중괄호 안의 message는 컴포넌트의 message 데이터 값으로 대체가 됩니다.
예를 들어보면 message값이 안녕하세요!라면 실질적으로는 아래와 같은 코드가 됩니다.

<span>메시지: 안녕하세요!</span>

그리고 message 값이 변경 될 때마다 변경된 값으로 업데이트가 됩니다.

2. 디렉티브

디렉티브란 뷰에서 화면의 요소들을 쉽게 제어를 하기 위한 템플릿 문법으로 v- 접두사가 붙어있는 속성들을 말합니다.
디렉티브는 다양한 속성들이 존재합니다.

v-if
v-for
v-show
v-on
v-bind
v-model
...

이중에서 v-bind 먼저 알아보고 나머지는 따로 추후에 더 설명하도록 하겠습니다.

v-bind

v-bind의 경우는 속성을 바인딩하는 디렉티브입니다.
위의서 설명드린 텍스트 보간법의 이중 중괄호의 경우는 속성내에서는 사용할 수가 없습니다.
따라서 속성에서는 v-bind를 사용하여 데이터를 바인딩 할 수 있습니다. 사용방법은 아래와 같습니다.

<div v-bind:id="dynamicId"></div>

v-bind 디렉티브는 div의 id 속성을 컴포넌트의 dynamicId 속성과 데이터 동기화가 된 상태로 유지하도록 Vue에 지시합니다.
또한 여기서 만약 바인딩된 값이 null | undefined이면 엘리먼트의 바인딩한 해당 속성이 제거된 상태로 렌더링 됩니다.
그리고 v-bind의 경우는 뷰에서 많이 사용되는 디렉티브이기 떄문에 전용 단축 문법으로 사용할 수 있으며, 그 방법은 다음과 같습니다.

<div :class="wrapper"></div>

v-bind의 경우 boolean 값을 바인딩 할 수도 있으며, 여러 속성을 동적으로 바인딩할 수도 있습니다.

<button :disabled="isDisabled">확인</button>
/**
isDisabled의 값이 `truthy` 값일 경우에는 버튼에 `disabled` 속성이 표기되며, 
값이 `falsy` 값의 경우에는 속성이 생략이 됩니다.
**/
---

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

<div v-bind="objectOfAttrs"></div>
// div에 id는 'container', class는 'wrapper'가 바인딩이 됩니다.

참고

템플릿 문법
뷰의 템플릿 문법

[Git] 특정 Commit만 원하는 브랜치에 Merge하기! - cherry-pick

DeveloperDH — Tue, 6 Feb 2024 09:45:57 +0900

특정 Commit만 원하는 브랜치에 Merge하기

GitHub나 GitLab을 이용해서 형상관리를 할 때 대부분이 develop브랜치에서 작업을 하다가 master에 병합(Merge)하는 식으로 작업을 많이 할 것 입니다.
그런데 develop 브랜치를 작업하다보면 여러 상황으로 인해 특정 부분의 커밋(commit)을 급하게 먼저 master 브랜치에 핫픽스 해야하는 경우가 발생할 수 있습니다.
그러면 이럴 때 그 부분만 다시 다른 브랜치에 작업을 하고 병합을 할 수도 있겠지만...그런 작업은 이미 작업을 했던 부분을 다시 작업을 해야하는 번거로운 작업이며, 여러 상황에 대응을 하려면 이미 작업했던 해당 커밋(commit)만 pull하고 merge하는게 좋은 방법입니다!
이런 상황에서 사용하는게 바로 cherry-pick 명령어 입니다!

cherry-pick

cherry-pick의 사용방법은 간단합니다.
우선 원하는 커밋의 해시번호를 알아야합니다. 커밋의 해시번호는 아래 이미지에서 빨간 상자 부분입니다.

이제 준비는 되었습니다.
방법은 다양합니다. cherry-pick용도의 브랜치를 새로 만들어서 작업을 할 수도 있고,
바로 특정 커밋을 가져와 병합을 해도 되며 사용자가 어떻게 쓰냐에 따라 방법은 다양합니다.
아래의 방법은 정말 간단하게 사용하는 방법을 예시로 설명드리는 것 입니다.

# 특정 커밋을 가져올 타겟 브랜치로 이동
$ git checkout master

# 가져올 특정 커밋의 해시 번호 입력
$ git cherry-pick 커밋 해시 번호

[Vue] Vue.js란 무엇인가?

DeveloperDH — Tue, 4 Jul 2023 23:15:05 +0900

Vue.js

Vue.js는 사용자 인터페이스 개발을 위한 자바스크립트 기반의 프로그레시브 프레임워크(Progressive Framework)입니다.
여기서 말하는 프로그레시브는 웹과 네이티브 앱의 이점을 모두 수용하고 표준 패턴을 사용해서 개발하는 것을 뜻하며,
한마디로 뷰는 웹과 앱의 장점을 모두 수용하여 진화된 웹앱을 개발할 수 있는 프레임워크 입니다.
또한 뷰는 프레임워크이기 때문에 라이브러리인 리액트와 다른 차이점도 있습니다.

Vue.js의 장점

직관적이고 배우기 쉽다.
컴포넌트 기반의 프레임워크로 코드 재사용을 높이고, 양질의 코드를 개발할 수 있다.
앵귤러(Angular)의 장점(데이터 바인딩), 리액트(React)의 장점(가상 돔)을 다 가지고 있다.

Vue.js 특징

1. MVVM 패턴

MVVM이란 Model-View-ViewModel의 약자로, 모델, 뷰, 뷰 모델 3가지 구성요소로 구성되어있는 패턴입니다.
일반적으로 웹에서는 HTML DOM이 View, 자바스크립트가 Model의 역할을 하게 되며,
MVVM패턴은 View와 Model 중간에 ViewModel을 둠으로써 데이터 바인딩 처리와 가상 돔을 통한 편의성을 제공하기 위해 만들어졌습니다.

2. 컴포넌트를 사용한 높은 재사용성

Vue로 개발이 된 파일(.vue) 하나하나 컴포넌트로, 컴포넌트가 한 화면을 이루는 작은 요소 또는 화면 전체일 수도 있습니다.
하나의 컴포넌트는 HTML + CSS + JavaScript로 이루어져 있으며, 다른 컴포넌트에서 import하여 사용할 수 있습니다.

[JavaScript] 자바스크립트 스코프(Scope) 알아보기!

DeveloperDH — Mon, 26 Jun 2023 23:54:22 +0900

스코프(Scope)

스코프란? 번역하면 "범위" 를 뜻하며, 참조 대상 식별자(변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙입니다. 자바스크립트는 이 규칙대로 식별자를 찾습니다.
예를 들어 이름이 같은 2개의 변수 중 어느 것을 참조해야 하는지, 어떻게 식별해야 할지를 정할 때 필요한 것으로,
정리하자면 "식별자에 접근할 수 있는 범위" 를 정의한 것을 스코프라고 합니다.

스코프의 구분

자바스크립트의 스코프를 구분해보면 2가지로 구분할 수 있습니다.

1. 전역 스코프 (Global Scope)
2. 지역 스코프 (Local scope)

전역 스코프는 전체 범위, 코드 어디에서든 참조가 가능한 스코프를 말합니다.
그리고 지역 스코프는 해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에선 접근할 수 없는 의미를 말합니다.
자바스크립트에서는 함수를 선언하게 되면 새로운 스코프를 생성하여 함수 안에서 선언한 변수들은 함수 밖에서 접근할 수가 없게 되는데,
이것이 바로 함수 스코프입니다. 함수 스코프가 바로 지역 스코프의 예라고 할 수 있습니다.

var a = 1; // 전역 스코프
function print() { // 지역(함수) 스코프
 var a = "Hi!";
 console.log(a); // output: Hi!
}
print();
console.log(a); // output: 1

그리고 모든 변수는 스코프를 가지게 됩니다.
따라서 변수의 관점에서 스코프를 구분하면 다음과 같이 2가지로 나눌 수 있습니다.

1. 전역 변수
2. 지역 변수

변수 선언 위치에 따라서 스코프를 가지게 되는데, 전역에서 선언된 변수의 경우에는 전역 스코프를 가진 전역 변수가 되는 것이며,
지역에서 선언이 되면 지역 스코프를 갖는 지역 변수가 되는 것입니다.

var a = 1; // 전역 스코프, 전역 변수
function print() { // 지역(함수) 스코프
 var a = "Hi!"; // 지역 변수
 console.log(a); // output: Hi!
}
print();
console.log(a); // output: 1

자바스크립트 스코프의 특징

자바스크립트의 스코프는 타 언어와는 다른 특징을 갖게 됩니다.
대부분의 C 기반 언어들은 블록 레벨 스코프(block-level scope) 를 따릅니다.
하지만 자바스크립트는 함수 레벨 스코프(Function-level scope) 를 따릅니다.
주의할 점은 화살표 함수는 함수 스코프가 아니라 블록 스코프를 따릅니다.

※ 여기서 블록이란?
블록은 하나 이상의 구문을 그룹화할 때 사용이 되며, 중괄호 {} 세트 안에 있는 코드를 말합니다.

함수 레벨 스코프(Function-level scope)

함수 레벨 스코프는 함수의 코드 블록만을 스코프로 범위 합니다.
따라서 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 접근할 수 없습니다.
또한 함수 내부에서 선언한 변수는 지역 변수가 되며 함수 외부에서 선언한 변수는 모두 전역 변수입니다.
그리하여 전역 변수를 남발할 가능성을 높이므로 주의해야 합니다.
var 키워드로 선언한 변수들은 오로지 함수 스코프 만을 따릅니다.

var a = 1; // 전역 변수
function print() { // 지역(함수) 스코프
 var a = "Hi!"; // 지역 변수
 console.log(a); // output: Hi!
}
print();
console.log(a); // output: 1

블록 레벨 스코프(block-level scope)

블록 레벨 스코프는 모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없습니다.
코드 블록 내부에서 선언한 변수는 지역 변수입니다.
기존의 자바스크립트에서는 함수 스코프만을 따랐지만,
ES6부터 let과 const 키워드가 추가되면서 블록 스코프를 따를 수 있게 되었습니다.

var a = 123; // 전역 변수
console.log(a); // 123

{
  var a = 456; // 전역 변수
}

console.log(a); // 456

let a = 123; // 전역 변수

{
  let a = 456; // 지역 변수
  let b = 456; // 지역 변수
}

console.log(a); // 123
console.log(b); // ReferenceError: bar is not defined

[JavaScript] 문자열 양 끝의 공백을 제거 - trim()

DeveloperDH — Wed, 21 Jun 2023 15:26:41 +0900

trim()

trim이란? 문자열 양 끝의 공백을 제거하고 원본 문자열을 수정하지 않고 새로운 문자열을 반환해주는 메서드입니다.
공백이란 모든 공백문자(space, tab, NBSP 등)와 모든 개행문자(LF, CR 등)를 의미합니다.
간단하게 설명하자면 자바스크립트에서 문자열의 공백을 제거할 때 사용하는 메서드입니다.

예제

const greeting = '   Hello world!   ';

console.log(greeting);
// output: "   Hello world!   ";

console.log(greeting.trim());
// output: "Hello world!";

trimStart() 또는 trimEnd()를 이용하여 한 쪽의 공백만을 제거할 수도 있습니다.

const greeting = '   Hello world!   ';

console.log(greeting.trimStart());
// output: "Hello world!   ";
console.log(greeting.trimEnd());
// output: "   Hello world!";

참고

String.prototype.trim()

[JavaScript] 호이스팅(Hoisting)이란 무엇인가?

DeveloperDH — Tue, 20 Jun 2023 17:03:02 +0900

호이스팅 (Hoisting)

호이스팅(hoisting)이란,끌어올리다, 올리다, 게양등의 뜻으로 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다.
쉽게 말해서 변수 및 함수 선언이 해당 스코프의 상단으로 "끌어올려지는" 현상을 말합니다.
예시 코드를 통해서 알아보겠습니다.

// 입력 코드
console.log(a) // undefined
var a = 5;

// 실제로는 아래와 같이 실행
var a
console.log(a) // undefined
a = 5

즉, 코드의 실행 순서와는 상관없이 변수 및 함수 선언이 스코프 상단으로 옮겨지는 것을 의미합니다.

var과 let, const의 차이

var, let, const는 자바스크립트에서 변수를 선언하기 위해 사용이 되는 키워드입니다.
자바스크립트 ES5까지는 변수 선언은 var만을 이용하여 작업을 하였는데, ES6부터 let과 const로도 변수 선언을 할 수 있게 되었습니다.
var, let, const는 호이스팅에 있어서 차이점이 크게 존재합니다.
var로 변수를 선언을 하게 되면 호이스팅 시 선언과 동시에 undefined로 변수를 초기화합니다.
하지만 let 또는 const로 변수를 선언을 하게 되면 호이스팅 시 변수를 초기화하지 않습니다.
따라서 변수의 초기화를 수행하기 전에 읽는 코드가 먼저 나타나면 예외가 발생하게 됩니다.
예시를 통해서 알아보겠습니다.

console.log(a) // undefined
var a = 5;

console.log(b) // ReferenceError: b is not defined
let b = 5;

결론

호이스팅은 JavaScript의 독특한 동작 중 하나로,
잘 이해하고 관리하지 않으면 코드의 가독성이 떨어지고, 생각지 못한 예외, 에러가 발생할 수 있으므로 주의해야 합니다.
따라서 변수 및 함수를 선언하기 전에 사용하지 않도록 주의하고, 변수 선언 시에는 var이 아닌 let 또는 const를 이용하는 방법이 좋습니다.

참고

MDN Web Docs 용어 사전: 웹 용어 정의 - 호이스팅
호이스팅(hoisting)이란?
[JavaScript] 호이스팅(Hoisting)이란

[React] CRA에서 절대경로 설정하기

DeveloperDH — Thu, 15 Jun 2023 22:38:09 +0900

리액트 절대경로

Vite와 타입스크립트 상황에서의 절대경로 설정을 하는 방법은 정리를 했었는데
create-react-app로 리액트 프로젝트를 생성을 했을 때 절대경로 설정 하는 방법을 알아보겠습니다.

[Vite, TypeScript] Vite + 타입스크립트 환경에서 절대 경로 설정하기!

jsconfig.json

우선 package.json 과 같은 위치에 jsconfig.json 파일을 생성해줍니다.
그리고 json 파일 내부에 아래와 같이 작성한다.

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

그 후 다시 서버를 실행해주면,
기존의 방식인 상대경로가 아닌 절대경로로 설정할 수 있게 됩니다.

// 상대경로
import Title from "./components/Title"

// 절대경로
import Title from "components/Title"

[자료구조] 스택(STACK), 큐(QUEUE) 비교/정리 하기!

DeveloperDH — Fri, 26 May 2023 17:03:10 +0900

스택(STACK)

1. 스택이란?

스택은 "쌓다", "쌓이다"라는 의미로, 데이터를 차곡차곡 쌓아서 후입선출 형태 즉, LIFO(List In First Out) 의 자료구조 입니다.
위의 이미지와 같이 데이터가 아래에서 부터 순서대로 쌓이며 가장 마지막에 쌓아둔 데이터부터 삭제해나가는 구조를 가졌습니다.

2. 스택의 특징

스택 내부에는 top을 통해서만 접근이 가능합니다. top은 제일 최상위에 위치한 데이터를 반환합니다.
스택에 데이터를 삽입할 때는 push를 이용하여 top 위에 쌓게 됩니다.
스택에서 데이터를 삭제할 때는 pop으로 top에 위치한 데이터를 삭제하게 됩니다.

3. 스택의 장단점

top을 통해 데이터에 접근하기 때문에 접근, 삽입, 삭제가 빠르다.
top을 통해서만 접근이 가능하기 때문에 데이터를 찾으려면, 모든 데이터를 꺼내면서 탐색해야한다.

4. 스택의 활용 예시

웹 브라우저 방문기록(뒤로가기)
실행 취소(되돌리기)
역순의 문자열 만들기
후위 표기법 계산
등등

큐(QUEUE)

1. 큐란?

큐는 "줄", "대기 행렬"이라는 뜻으로 스택과는 다르게 먼저 들어온 데이터가 가장 먼저 나가는 선입선출 형태 즉, FIFO(First In First Out) 의 자료 구조입니다.
테이크아웃 카페를 예시로 들어보면 가장 먼저 주문한 손님이 가장 먼저 음료를 받고 나가는 것이 바로 큐의 형태라고 할 수 있습니다.

2. 큐의 특징

큐는 삽입, 삭제가 다른 방향에서 이루어집니다.
삭제 연산만 수행되는 곳을 프론트(front)
삽입 연산만 수행되는 곳을 리어(rear)
프론트(front)에서 이루어지는 삭제 연산을 디큐(dnQueue)라고 합니다.
리어(rear)에서 이루어지는 삽입 연산을 인큐(enQueue) 라고 합니다.

3. 큐의 장단점

큐 역시 스택과 마찬가지로 데이터 접근, 삽입, 삭제가 빠르다
또한 마찬가지로 중간에 위치한 데이터에 접근하기가 불가능하다.

4. 큐의 활용 예시

데이터를 순서대로 처리해야 할 때
너비 우선 탐색(BFS, Breadth-First Search) 구현
프로세스 관리
대기 순서 관리

[JavaScript] 반복문 for...in, for...of의 차이 정리!

DeveloperDH — Thu, 25 May 2023 12:27:59 +0900

반복문

반복문 중에서 for 또는 forEach 말고 사용은 해봤지만 자주 사용하지 않아서 헷갈리는 for...in과 for...of를 정리하고 이 둘의 차이점을 알아보겠습니다.

for...in문

for...in문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다. (Symbol로 키가 지정된 속성은 무시합니다.)라고 MDN 사이트에 정리가 되어있습니다.
한마디로 for...in문은 객체의 속성들을 순환하면서 작업을 수행하는 것입니다.

const object = { a: 1, b: 2, c: 3 };

for (const key in object) {
  console.log(`${key}: ${object[key]}`);
}

// output
// a: 1
// b: 2
// c: 3

for...of문

for...of문은 반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하여 작업을 수행하는 것입니다. 즉 배열에서 반복 작업을 하는 것이 for...of문 입니다.
물론 배열에서 for...in문도 사용이 가능합니다.
하지만 for...of문을 사용하는 것을 권장합니다. 이유는 아래에서 확인해 보겠습니다.

// for...of문
const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}
// output
// a
// b
// c

// for...in문
const array2 = ['a', 'b', 'c'];

for (const element in array2) {
  console.log(element);
}
// output
// 0
// 1
// 2

배열도 객체이기 때문에 for...in문 사용이 가능은 하지만 위의 보이는 대로 해당하는 key,
즉 배열에서는 인덱스에 접근하게 됩니다.
그렇기 때문에 얻고 싶은 결과와 생각지 못한 차이가 생길 수 있으며,
원하는 결과를 얻기 위해서는 수정이 필요합니다.

결론

마지막으로 결론을 정리해보자면
for...in문은 객체에서 사용
for...of문은 배열에서 사용
이렇게 정리 할 수 있습니다.

참고

for...in - MDN
for...of - MDN
for ...in, for ...of 차이
[Javascript] 반복문 for.. in 과 for.. of 의 차이