[꼼꼼한 개발자] 꼼코더

[JS] - 원시값, 래퍼 객체란? 간단하고 쉽게 이해하기(원시값도 메서드를 사용할 수 있다)

꼼코더 — Thu, 18 Sep 2025 19:32:08 +0900

간단 정리

원시값(Primitive): 숫자, 문자열, boolean 등 변경 불가능한 단일 값.
객체(Object): 여러 값을 묶어둔 구조.
메서드(Method): 객체에 붙어 있는 함수.
원시값도 메서드를 사용할 수 있다?! → 예! (하지만 사실은 살짝 속임수…!?)

이게 무슨 말인지 아래에서 쉽게 설명하겠다!

원시값(Primitive Value) 이란?

원시값(Primitive)은 자바스크립트에서 가장 기본이 되는 데이터 단위
속성이나 메서드를 가지지 않으며, 변경(수정)할 수 없는 값(immutable)

원시값 종류

종류	예시
number	1, 3.14, -100, Infinity, NaN
string	'hello', "JavaScript", 템플릿
boolean	true, false
null	null
undefined	undefined
symbol	Symbol('id'), Symbol()
bigint	123n, BigInt(999)

근데 잠깐… 변경(수정)할 수 없는 값?? 무슨 소리!

아래처럼 string, number 등 전부 다 변경했었는데..?

let greeting = 'hi';
greeting = 'hello';

엄연히 말하자면 기존 문자열인 'hi'를 ‘hello’로 수정한 게 아니다 그림을 보고 설명을 하자면

greeting이 'hi'를 원시값을 할당받았다가
greeting이 이제 'hello'라는 원시값을 재할당 받은 것.

원시값 재할당 예시 이미지

greeting은 처음 "hi"라는 원시값을 스택에 할당받았다가
이후 "hello"라는 전혀 다른 원시값으로 재할당된 것
기존 "hi"는 그 어떤 수정도 받지 않았고
단지 더 이상 사용되지 않게 되었을 뿐.

다시 말해 'hello'는 한번 생성되면 절대 바뀌지 않는 것이 맞다

그래서 원시값은 변경 및 수정할 수 없는 값이라고 한다!

( ‍??? : 이봐!! 그럼 ‘hello’는 어떻게 되는 거냐!)

(궁금하면 아래 링크 클릭!)

[JS] - 가비지 컬렉션 (원피스로 이해하는 가비지 컬렉션)간단하고 쉽게 이해하기

‍ 소개“자바스크립트는 메모리 관리를 알아서 해주니까 굳이 신경 안 써도 된다”는 말이 있다실제로 “언제 메모리에서 제거되는가?” 라는 건 생각보다 깊은 개념이다. 오늘은 복

ccomccomhan.tistory.com

✨ 원시값도 메서드를 쓴다?

위에서 우리는 원시값의 특징을 보았다.

속성이나 메서드를 가지지 않으며 → 맞아 객체가 아니니깐!
변경할 수 없는 값 → 응 이해했어!

하지만 객체가 아닌 원시값이 메서드를 사용할 수 있다는 사실..!

아래코드를 보면 문자열은 원시값인데 .toUpperCase() 메서드가 되네??

바로 자바스크립트의 임시 객체 변환기능 덕분.

임시 객체 변환 기능 예시 이미지

let str = "CcomCoder";
alert(str.toUpperCase()); // CCOMCODER

‍♀️ 원시값 → 래퍼 객체(Wrapper Object)

• 래퍼 객체 : 원시값(primitive value)을 감싸서 객체처럼 다룰 수 있게 해주는 기본 내장 객체

JS는 원시값에 접근할 때 잠깐 동안 객체처럼 변환해 준다

쉽게 말해, 원시값을 객체처럼 사용가능한 것!

const str = "CcomCoder";
// 위 코드를 자바스크립트는 아래처럼 처리합니다.
const temp = new String("CcomCoder");
temp.toUpperCase(); // "CCOMCODER"

String, Number, Boolean 등 원시값은 모두 래퍼 객체가 있다.
메서드를 호출 시도 시 자바스크립트가 임시로 객체로 변환한 뒤
메서드 실행 후에는 다시 객체가 사라진다.

하지만 조심해야 할 점!

변환된 임시 객체는 읽기만 가능, 변경은 불가능하다는 점.

const str = "hello";
str.test = "world";
console.log(str.test); // ❌ undefined

✋ why? (앞서 말했듯이) 임시 객체는 메서드 호출이 끝나면 바로 사라지기 때문

여기서 의문점이 드시죠? (전 그랬습니다)

다시 원시값으로 돌아올 거면 왜 굳이 왜 변환해서 접근하는 거야? → 객체로 선언해서 처음부터 ‘객체’로 해!
객체, 원시값 모두 접근할 때 전부 객체라면 JS는 2가지를 왜 구분 지어 놓은 거야? → 그냥 전부다 객체로 하지

✅ 왜 “원시값”과 “객체”를 구분할까?

1. 성능(Performance) 때문

원시값은 가볍고 빠르다.
모든 값이 객체였다면, 메모리 사용량이 늘고 처리 속도가 느려졌을 것!

const age1 = 27; // 그냥 숫자. 메모리 한 칸에 값 저장

const age2 = new Number(27); // 객체로서 속성, 메서드, 프로토타입 등등이 따라옴

원시값은 그냥 메모리 한 칸에 “값”만 저장하면 되지만
객체는 그보다 훨씬 복잡한 구조를 갖기 때문에
무조건 객체로 만들면 낭비가 크다.

2. 값 자체가 변하지 않도록 보장해야 할 때가 많다.

예를 들어 문자열은 복잡한 텍스트 조작이 많기 때문에 변하지 않는 값으로 다루는 게 실수도 줄이고 안전하다.

let str = 'hello';
str.toUpperCase(); // 'HELLO' 반환, 원래 문자열은 그대로

이 불변성 덕분에, 문자열을 여러 군데에서 공유해도 걱정이 없다!

요약

자바스크립트는 모든 걸 객체처럼 다룰 수 있다
다만 성능과 안정성을 위해 원시값을 따로 둔다

개발 시 고려사항

원시값인 문자열을 자주 조작 한다면 "abc" 같은 리터럴을 사용하자.
⇒ typeof, ===시 의도와 다르게 나올 수 있음
객체처럼 .prop = value 하려고 하지 말자. 사라지기 때문..
따라서 혼란 방지를 위해 원시값은 원시값답게 다루는 게 좋다!

‍ 마무리

자바스크립트의 원시값은 간단하지만, 임시 객체 덕분에 마치 객체처럼 사용 가능해요.

하지만 변경 불가, 잠깐만 존재라는 특성을 기억하세요!

✅ 한 줄 요약

“원시값은 잠깐 객체 코스프레는 가능하지만, 진짜 객체는 아니다!”

[JS] - 가비지 컬렉션 (원피스로 이해하는 가비지 컬렉션)간단하고 쉽게 이해하기

꼼코더 — Thu, 18 Sep 2025 19:01:32 +0900

‍ 소개

이 글에서는 자바스크립트 가비지 컬렉션을 원피스 캐릭터에 비유해 정말 쉽게 설명하려고 한다.

참조가 끊기면 메모리에서 사라지는 원리와 Mark & Sweep 알고리즘, 메모리 누수 주의까지 재미있게 풀어보겠다!

(마지막 눈물 주의 )

가비지 컬렉션(Garbage Collection)이란?

우리가 생성한 모든 값(변수, 객체, 함수 등)은 메모리에 저장된다.

하지만 “더 이상 사용되지 않는 값”들은 불필요하게 메모리를 차지하곤 한다..

그래서 자바스크립트는 자동으로 메모리를 관리해 주는 기능(가비지 컬렉터)을 가지고 있으며

그 가비지 컬렉터가 이를 자동으로 찾아서 삭제(clean up) 해주는 과정(가비지 컬렉션)을 실행한다.

따라서 JS는 C언어처럼 명령어로 직접 메모리를 관리하지 않아도 된다.

(그렇다고 신경쓰지 않아도 된다는건 아니니 쭉 읽어보도록 하자!)

➡️ 가비지 컬렉션 (Garbage Collection)

불필요한 메모리를 자동으로 정리하는 메커니즘 또는 과정 = 청소 작업 자체

➡️ 가비지 컬렉터(Garbage Collector)

더 이상 사용되지 않는 메모리(데이터)를 찾아서 자동으로 정리하는 자바스크립트 엔진의 기능 = 청소부(도구)

사용되지 않는 메모리란? (가비지 컬렉션 원리 - 사라진 해적왕 비유)

간단히 말해, ‘더 이상 참조되지 않는 값’을 말한다.

아래 코드에서 변수에 객체를 할당한 후 null을 재할당하는 과정을 확인해 보자!

// 사람들은 해적왕을 로저라고 기억했습니다.(1번 사진) 
//  ‍♂️ : 해적왕은 누가 뭐래도 'Roger'야!!
let pirateKing = {
  name: "Roger"
};

// 하지만 점점 해적왕이라는 말 자체가 사라지게 되고.. (2번 사진)
pirateKing = null; 


// 자연스레 로저라는 인물도 잊혀져갔습니다..
// 따라서, 로저는 메모리에서 제거(가비지 컬렉션)됩니다. (2번 사진)

사용되지 않는 메모리

객체 { name: "Roger" }는 더 이상 접근할 방법이 없다. → 따라서 GC의 대상.

두 개의 참조 - 2개의 타이틀을 가진 사나이

또 다른 예시를 확인해 보자!

사람들은 해적왕을 '로저'라고 정했습니다.

'전설의 해적'은 자연스레 '해적왕'이 되었죠.

let pirateKing = {
  name: "Roger"
};


let legendaryPirate = pirateKing;

하나의 객체를 두 개의 변수가 동시에 참조하는 구조

시간이 지나 '해적왕'이라는 호칭 자체가 사라졌습니다.

pirateKing = null;

하지만 여전히 로저는 '전설의 해적'인건 변함이 없었죠 *(GC 대상 아님!)

한 변수가 참조를 끊었지만 다른 변수가 여전히 객체를 참조하는 구조

하지만 점차 '전설의 해적' 호칭도 사라지게 되었고

legendaryPirate = null;

자연스레 '전설의 해적'이자 '해적왕'이었던 '로져'는 거론될 호칭이 없어 완전히 잊혀 갔습니다..
따라서, 로저는 메모리에서 제거(가비지 컬렉션)됩니다.

쉽게 말해 ‘접근할 수 없다면 GC의 대상이 되는구나!’라고 이해하면 쉽다!

이제 감이 잡혔다면 이어서 GC에 대해서 자세히 알아보자

GC가 동작하는 시점은?

자바스크립트는 명시적인 타이밍 없이 백그라운드에서 주기적으로 메모리를 검사하고 GC를 수행한다.

이 동작은 V8 엔진, SpiderMonkey, Chakra 등 엔진마다 방식이 다를 수 있지만, 원리는 비슷하다.

자바스크립트 Mark & Sweep 알고리즘 (가비지 컬렉션 핵심)

자바스크립트는 우리 대신 필요 없는 메모리를 정리해 주는 똑똑한 청소 시스템을 갖고 있다 했는데

그 시스템이 작동하는 가장 대표적인 방식이 바로 “Mark & Sweep(표시하고 쓸어버리기)”이다

작동 방식

‘루트(Root)’부터 출발해서 도달 가능한 객체를 ‘Mark(표시)’하고.
도달할 수 없는 객체는 ‘Sweep(제거)’한다.

루트(Root) 간단설명

전역 변수 (let, var, const로 선언된 변수들)
현재 실행 중인 함수의 지역 변수
클로저에서 참조되는 변수

쉽게 말해 ‘접근 가능한 값은 남기고, 쓸모없는 값은 쓸어버리는’ 메모리 청소 방식

Mark & Sweep 알고리즘 이미지

메모리 누수(Memory Leak) 주의!

자동 청소 기능 가비지 컬렉션이 있다고 해도, 메모리 누수는 실제로 자주 발생할 수 있다.

간단하게 2가지 정도만 알아보자!

전역 변수에 계속 데이터 추가 - 저격왕의 가면

//   (써니호)창고에 소중히 보관 중인 저격왕 가면
let warehouse = {
  item: "저격왕 가면"
};

아무도 쓰지 않지만, 여전히 (전역변수) 창고에 들어 있으므로 메모리에서 제거되지 않음!

타이머(setInterval, setTimeout) 사용 후 해제 안 함 - 쵸파의 럼블볼

let rumbleBall = { type: "3단 변신 캡슐" };

// 쵸파가 5초 뒤에 변신할 준비
setTimeout(() => {
  console.log(`${rumbleBall.type} 덕분에 쵸파가 변신 준비 완료!`);
}, 5000);

// 쵸파가 실수로 럼블볼을 잃어버림 
rumbleBall = null;

rumbleBall은 null로 재할당되었지만
setTimeout의 콜백 함수가 클로저 형태로 이전 변수(rumbleBall)를 참조하고 있어서
자바스크립트 엔진은 아직 메모리에서 제거하지 않는다.
즉, 함수가 실행되어 참조가 완전히 끊기기 전까지는 해당 객체가 메모리에 남아 있게 된다.
- 따라서 꼭 clearTimeout이나 clearInterval을 써서 정리해 주도록 하자!

이제 마지막 감동의 스토리 예재를 끝으로 마무리해 보겠다!

☠️ 마크 앤 스위프 (Mark & Sweep)예제 - 메모리가 언제 죽는다고 생각하나?

원피스의 ‘드럼왕국(drumKingdom)’에는 의사가 3명이 있었다. [히루루크, 쿠레하, 쵸파]

function connectDoctors(hiruluk, kureha, chopper) {
  hiruluk.friend = kureha;        // '히루루크' 친구는 '쿠레하'
  hiruluk.son = chopper;          // '히루루크' 아들은 '쵸파'

  kureha.friend = hiruluk;        // '쿠레하' 친구는 '히루루크'
  kureha.student = chopper;       // '쿠레하' 의료제자는 '쵸파'

  chopper.father = hiruluk;       // '쵸파' 아버지는 '히루루크'
  chopper.teacher = kureha;       // '쵸파' 스승은 '쿠레하'

  return {
    firstDoctor: hiruluk,
    secondDoctor: kureha,
    thirdDoctor: chopper
  };
}

// 드럼왕국의 의사 명단
let drumKingdom = connectDoctors(
  { name: "히루루크" },
  { name: "쿠레하" },
  { name: "쵸파" }
);

히루루크와 쿠레하는 서로를 친구라고 생각했었다.

쵸파는 쿠레하를 ‘의료스승’으로 히루루크는 ‘아버지’처럼 따랐다.

쿠레하는 쵸파를 ‘의료 제자’로 여겼고

히루루크는 쵸파를 ‘아들’처럼 여겼다…

하지만 쿠레하는 히루루크의 만행(강도, 방화, 평범한 감기를 중증으로 악화..등)을 보고 친구관계를 끊었다..

delete drumKingdom.secondDoctor.friend;

며칠 뒤 아픈 히루루크를 위해 쵸파는 약을 가지고 왔다.

쵸파가 약인 줄 알고 가져온 ☠️ 독버섯 수프를 먹고 위독해진 히루루크는

쵸파에게 사실을 숨긴 채 드럼왕국으로 달려가 죽음을 기다린다.

이때 드럼왕국 은 ‘히루루크’가 곧 죽을 것을 알고 첫 번째 의사 명단에서 제외시킨다.

delete drumKingdom.firstDoctor;

히루루크는 쿠레하에게 손절당하고, 왕국에서도 잊혔다.

하지만 GC에 의해 사라지지 않는다.

바로 여전히 그를 ‘아버지(father)’로 기억해 주는 단 하나의 존재 ‘쵸파’가 있기 때문이다..

사라지지 않는 히루루크가 말한다. (BGM ON)

브라우저가 오디오를 지원하지 않습니다.

“어이, 메모리는… 언제 죽는다고 생각하나···?”

“오류가 났을 때…? 아니.”

“delete 키워드를 만났을 때…? 아니야!!”

“···’ 루트객체’에게서 잊혀졌을 때다···!!!”

가비지 컬렉션 이미지 설명

(정확히는 루트 객체에서 접근 불가할 때 입니다 )

마무리

잘 이해가 되셨나요? 이해가 잘 되셨으면 좋겠네요!

자바스크립트 메모리 관리와 가비지 컬렉션의 원리를 알면, 불필요한 메모리 누수를 방지하고 성능을 최적화할 수 있습니다.

특히 대규모 프로젝트에서는 메모리 관리가 안정성과 직결되므로 꼭 알아두시면 좋습니다!

⁇ 번외 편 : 루트가 끊기게 된다면? - 버스터콜 발동

버스터콜 ⇒ 드럼왕국 지도에서 삭제 ⇒ 의사들 접근 불가 ⇒ GC 대상!

drumKingdom = null

루트 객체가 접근할 수 없을때 GC 대상이 되는 구조

[JS] - 자바스크립트 동작 원리 간단하고 쉽게 이해하기(콜스택, 이벤트 루프, 태스크 큐)

꼼코더 — Thu, 11 Sep 2025 20:43:39 +0900

간단 정리

JS 엔진: 자바스크립트 코드를 읽고, 해석하고, 실행하는 프로그램
싱글 스레드 : 한 번에 하나의 작업만 처리 가능한 개념.
Web API : 한 번에 여러 작업이 가능한 비동기 처리 도우미. (브라우저/Node가 제공)
- 예) setTimeout, fetch, DOM 이벤트, Node의 fs, http 등
콜스택(Call Stack) : 함수 실행이 쌓이는 스택. 실행 끝나면 빠져나옴.
태스크 큐(Task Queue) : 완료된 Web API(비동기)의 속에 있는 콜백 함수가 대기하는 공간
이벤트 루프(Event Loop) : (콜스택 비어있음 확인 후) 태스크 큐에서 대기하던 콜백을 꺼내 콜스택으로 전달

위 내용만 봐서는 모르는 게 당연합니다!

아래에 정말 정말 재밌고 쉽게 설명했으니 꼭! 확인해 보세요!

(개념 훝고 -> 맨 마지막 영상을 보시면 완벽하게 이해할 수 있어요!)

☕️ 자바스크립트는 싱글 스레드 - 우리 카페는 바리스타가 1명

브라우저 속에 있는 자바스크립트 엔진은 자바스크립트 코드를 읽고 실행합니다.

다만 싱글 스레드이기에 동시에 실행하지 못하고 한 줄씩 차례대로 처리해야 하죠.

그래서 자바스크립트는 싱글 스레드 언어라고 불립니다.

싱글 스레드 이미지 비유설명

‍ 비유설명

마치 카페에 바리스타(JS 엔진)가 한 명뿐인 상황과 같습니다.

손님이 커피 주문하면 → 바리스타는 바로 커피를 만듭니다.
동시에 다른 손님들이 주문하여도 동시에 만들 수 없이 한 사람씩 차례대로 처리해야 하죠.
결국, 중요한 건 바리스타(JS 엔진)가 주문(함수)을 차례대로 실행하는 것입니다.
- (??? : 내가 아는 바리스타는 동시에 음료 여러개 만들던데요?!!?)

콜스택(Call Stack) - 할 일 모음 집

콜스택(Call Stack)은 실행할 함수가 담겨있는 공간입니다.

먼저 들어온 요소가 나중에 나가는 ‘스택 구조(LIFO)’이죠.

함수 실행 → 스택에 push, 실행 종료 → 스택에서 pop

콜 스택 이미지 비유설명

‍ 비유설명

스택은 바리스타(JS 엔진)의 할 일 메모지 모음집 같은 존재입니다.

“아메리카노 만들기” 메모 붙임(push) → 끝나면 메모 떼기(pop)
“라떼 만들기” 메모 붙임(push) → 끝나면 메모 떼기(pop)
결국, 콜스택(할 일 모음집)은 바리스타(JS 엔진)가 어떤 일들을 처리 중인지 확인하는 공간입니다.

‍ 비동기 처리(Web API) - 만능 알바생 등장이요

이전에 JS 엔진(바리스타)은 싱글 스레드이기에 한 번에 하나의 일만 처리할 수 있다고 했는데..

만약 콜스택(할 일 메모지)에 ‘긴 작업(예: 오래 걸리는 계산)’이 쌓여 있다면?

그동안 버튼 클릭 이벤트나 모달 열기 같은 동작이 전혀 처리되지 않습니다.

즉, 화면이 “먹통”처럼 멈춘 것처럼 보이게 되죠.

비유하자면, 바리스타가 너무 바빠서 손님 주문이 줄줄이 쌓여 있는 상황과 같습니다.

이럴 때 필요한 게 비동기 처리!

비동기 처리를 활용하면 동시에 여러 일을 효율적으로 처리할 수 있습니다.

비동기 처리 종류 : Web API(setTimeout, fetch), DB 요청, 파일 읽기 등..
(다만, 이 글에서는 Web API를 이용한 비동기 처리만 다루겠습니다!)

(번외) Web API 목록 - 만능 알바생의 능력치

setTimeout, DOM 이벤트, fetch… 등

setTimeout → “3초 뒤에 실행해 줘”라고 알바생(Web API)에게 맡김
fetch → 서버에 요청 보내고, 응답 오면 알려줌
addEventListener → 클릭이 발생할 때까지 계속 기다려줌

이렇게 하면 ‘메인 스레드(JS 엔진)’는 다른 일을 처리하면서도, 나중에 일이 끝났을 때 다시 실행할 수 있습니다.

Web API 이미지 비유설명

‍ 비유설명

바리스타는 한번에 하나의 일만 처리가 가능하기에 주방 알바생(Web API)에게 도움을 요청합니다.

“2분 뒤에 샌드위치 만들어줘(setTimeout)“라고 부탁 후 바리스타는 다른 주문을 처리할 수 있어요.
주방 알바생이 2분 후 시간이 되면 “다 됐습니다!” 하고 픽업대에 올려놓습니다.
- ‍ 알바생 : “다 만들었고 픽업대(task Queue)에 올려놓을테니 나머지 작업(콜백함수)은 대신해주세요!"

태스크 큐(Task Queue)

1. Web API가 작업을 마무리 후

2. 그 속에 있는 콜백 함수(남은 작업)를 태스크 큐에 올려 차례대로 올려놓습니다.

3. 콜백 함수들은 올려진 순서대로 실행될 차례를 기다리며 대기합니다.

대기하는 이유? => 콜스택이 비워지기 전에는 실행이 불가하기 때문.
큐는 먼저 들어온 요소가 먼저 나가는(FIFO) 구조입니다.

Task Queue 이미지 설명

‍ 비유설명

알바생(Web API)이 완료 후 남은 작업(콜백함수)들을 ‘픽업대(Task Queue)’에 올려놓았네요.
남은 작업(콜백 함수)은 바로 바리스타에게 가지 않고 '픽업대(Task Queue)'에 줄 서서 대기합니다.
왜냐고요? 아직도 바리스타(Call Stack)의 일이 끝나지 않았기 때문이죠!
- (??? : 바리스타 아직까지도 아메리카노 만들고 있네)
- (??? : 우리 팀 바리스타 뭐 함?)

이벤트 루프(Event Loop) - 악덕 매니저 등장 (바리스타 퇴사각)

이벤트 루프(Event Loop)는 2가지 역할을 가지고 있습니다.

콜스택이 비어 있는지 확인
비어 있으면 태스크 큐(Task Queue)에서 대기 중인 콜백 함수를 하나씩 콜스택(Call Stack)에 전달

중요한 점은 항시적으로 확인하는 것이 아닙니다!

처리해야 할 태스크가 있는 경우: 먼저 들어온 태스크부터 순차적으로 처리
처리해야 할 태스크가 없는 경우: 잠들어 있다가 새로운 태스크가 추가되면 다시 '1'로 돌아감

Event Loop 이미지 비유설명

‍ 비유설명

매니저(Event Loop)는 평소에는 꾸벅꾸벅 졸고 있습니다.
바리스타(Call Stack)가 모든 일을 마무리하고 손이 비면, 얼른 픽업대(Task Queue)에 있는 샌드위치(콜백 함수) 1개를 가져와 바리스타에게 전달합니다.
바리스타는 남은 작업(콜백 함수)인 샌드위치를 데우며(함수 실행) 작업을 계속 진행합니다.
- (??? : 어제 그 바리스타분 왜 안 보이시지?)

(이제 얼추 개념은 이해했으니 예제 코드를 보면서 확인해 봅시다.)

‍ 예제 코드 - 자바스크립트 동작 순서(JavaScript event loop video)

예제 코드 확인 후 영상 아래 설명을 참고해 주세요!!

설명 부분을 반복해서 보다 보면 완벽히 이해가 되실 겁니다!

// 함수 선언 영역
function First() { console.log('1') }
function Second() { console.log('2') }
function Third() { console.log('3') }

// 함수 실행 영역
First();
setTimeout(Second, 5000);
Third();

이해하기 쉽게 비유도 참고해 봅니다!

- ️ 브라우저 = JS 엔진이 있는 곳 = 카페 = 바리스타의 소속

- JS 엔진 = 바리스타 = Call Stack 속 작업(함수) 실행자

- ‍♂️ JS 함수 = 손님의 주문 = First(), Second(), Third(), console.log()

- Call Stack = 할 일 모음 집 = 함수가 모여져 있는 곳 *원시값 변수도 저장되는 공간이지만 여기선 패스!

- ‍ Web Apis = 알바생(도우미) = 비동기 작업 처리자

- ️ Task Queue(CallBack Queue) = 픽업대 = 비동기 함수 속 인자(콜백 함수)의 대기 공간 = Call Stack에 전달될 콜백함수

- event Loop = 카페 매니저 = Task Queue에 콜백 함수를 Call Stack에 전달 = 바리스타 괴롭히는 사람

자바스크립트 이벤트 루프 예시 비디오

1. First() 실행

First() 호출 → 콜스택에 First() push → 콜스택에서 First() 실행
console.log('1') 호출 → 콜스택에 console.log push → console.log('1') 실행 → 콘솔에 1 출력
console.log 실행 완료 → 콜스택에서 console.log pop
First() 실행 완료 → 콜스택에서 First() pop

2. setTimeout(Second, 5000) 실행

setTimeout(Second, 5000) 호출 → 콜스택에 setTimeout push
콜스택에서 setTimeout 실행 → 브라우저(Web API)에 “5초 뒤에 Second 실행” 요청
Web API는 타이머를 설정하고, setTimeout 실행 완료 → 콜스택에서 setTimeout pop
Web API 영역에서 5초 카운트다운 시작

3. Third() 실행

Third() 호출 → 콜스택에 Third() push → 콜스택에서 Third() 실행
console.log('3') 호출 → 콜스택에 console.log push → console.log('3') 실행 → 콘솔에 3 출력
console.log 실행 완료 → 콜스택에서 console.log pop
Third() 실행 완료 → 콜스택에서 Third() pop

4. 5초 후 (Web API → Task Queue 이동)

Web API의 타이머 종료 → Second 함수(콜백)를 태스크 큐(Task Queue)에 넣음
콜스택이 비어 있을 때까지 대기

5. 이벤트 루프(Event Loop), Second() 실행

이벤트 루프 콜스택 비어 있음 확인
태스크 큐에서 Second 함수 꺼내 → 콜스택에 push → 콜스택에서 Second() 실행
내부 console.log('2') 호출 → 콜스택에 console.log push → console.log('2') 실행 → 콘솔에 2 출력
console.log 실행 완료 → 콜스택에서 console.log pop
Second() 실행 완료 → 콜스택에서 Second() pop

️ 개발 시 고려할 점

콜스택(Call Stack)을 바쁘게 하지 말자

콜스택에서 오래 걸리는 작업(예: 무한 루프, 복잡한 계산, 대량의 DOM 조작 등)이 쌓이면 → 다른 이벤트가 처리되지 못합니다.

긴 작업은 잘게 나누어 처리하거나(setTimeout, requestIdleCallback, Web Worker 사용), 메인 스레드를 막지 않도록 분리해 보세요!

태스크 큐(Task Queue)를 바쁘게 하지 말자

태스크 큐는 완료된 비동기 작업(콜백 함수)이 줄 서는 공간입니다.
너무 많은 setTimeout, setInterval, 이벤트 핸들러가 동시에 쌓이면 큐가 과부하될 수 있습니다.
그러면 실행이 지연되고, UI 반응이 늦어져서 사용자가 느끼기에 '버벅거린다'는 느낌을 줍니다.

불필요한 이벤트 리스너 남발을 피하고, 이벤트 최적화(debounce, throttle) 기법을 활용해 보세요!

마무리

잘 이해가 되셨나요..? 워낙 방대한 개념이라 Micro task Queue, Promise 등은 다루지 않았고

일부 개념들은 간단하게 설명하고 넘어간 부분들이 있기에 걱정은 되지만 이 글을 통해서 JS 동작 흐름을 잡는데 도움이 되었으면 좋겠네요!

[개발 관련 도움] - 코드 스니펫(Code Snippet)이란? - 간단하고 쉽게 알아보기(나만의 코드 스니펫 만들기, VS code 스니펫 설정)

꼼코더 — Wed, 30 Jul 2025 11:07:12 +0900

순서 소개

코드 스니펫을 간단하게 알아보고

실제로 Mac VS code에 코드 스니핏을 만들어 보도록 하겠다!

코드 스니펫이란?

프로그래밍에서 자주 사용되는 코드의 작은 조각을 의미한다.

따라서 코드 스니핏 템플릿을 설정하게 된다면

'자주 사용하는 코드를 반복해서 타이핑 하는 불편함을 없애준다'.
팀 내 코드 스타일, 사용 패턴을 통일할 수 있다.

‍♂️ 코드 스니펫 템플릿 필요성

개발자 A : “함수 선언마다 'const, function, () ⇒ {}'들을 매번 입력하기 귀찮아! 이 모든걸 쉽게 딸깍하면 짜잔하고 나타났으면 좋겠어!!” ⇒ 그걸 해결해 주기 위한 것이 ‘코드 스니핏’이다.

코드 스니펫 템플릿 사용 흐름

순서 : 1. 코드의 스니핏 ‘단축어’를 정의 > 2.정의한 단축어를 입력 > 3.자주 사용하는 작은 코드가 즉시 작성’

예시 1) 딸깍 ⇒ useEffect 기본 작성 틀 자동완성(의존성 배열, 콜백 함수 등..)
예시 2) 딸깍 ⇒ Component 기본 작성 틀 자동완성 (function, return, export 등..)

쉽게 ‘요리’로 비유하자면 : 요리시작! → 딸깍! → ‘양파 다지기’ 끝! (… ‍♂️)

코드 스니펫의 구조

정말 간단한 기본 구조만 알아 보자 (실습 및 예재 코드가 급하다면 아래로 넘어가자!)

JSON 또는 XML 형식으로 작성된다.

{
  "스니핏 이름": {
    "prefix": "단축어",
    "body": [
      "스니핏에 삽입될 코드",
      "필요하면 여러 줄을 포함할 수 있습니다."
    ],
    "description": "스니핏에 대한 설명 (선택 사항)"
  }
}

스니펫 이름: 단순히 스니핏을 식별하는 이름
prefix (단축어): 스니핏을 호출할 때 사용할 단축어. (이 값을 통해 body의 값을 불러온다!)
body (코드 본문): 실제로 삽입될 코드 내용.
description (설명): 스니핏에 대한 짧은 설명으로. (선택사항)

‍ 실습) VS Code에서 코드 스니펫 템플릿 작성하기

우선 본인은 TypeScript를 사용한 React 컴포넌트 생성 코드 스니핏을 작성해 보겠다.

(다른 언어를 사용하여도 똑같이 진행하면 된다!)

(좌측 상단) Code → 설정 → 코드 조각 구성 클릭

2. 원하는 언어의 ‘코드 조각 파일’을 선택한다.(typesciptreact.json)

원하는 언어가 없다면 새 코드 조각을 만들어도 좋다!

3. ‘기본 템플릿’이 나온다면 수정으로 진행하면 된다.

4. 아래와 같이 “TypeScript 기반의 컴포넌트를 작성할 때 사용할 기본 코드 스니핏을 정의해 보았다”

prefix (단축어)는 ‘fsf’로 지정해 주었다.

{
  "Flow Component Template": {
    "prefix": "fsf",
    "body": [
	"import React from 'react';",
	"",
      "type ${TM_FILENAME_BASE}Props = {",
      "  $1", // 첫 번째 커서 위치: props를 정의할 곳
      "};",
      "",
      "export default function ${TM_FILENAME_BASE}(props: ${TM_FILENAME_BASE}Props) {",
      "  const { } = props;",
      "",
      "  return (",
      "    <div>",
      "      $0", // 마지막 커서 위치: div 내부에 커서가 위치
      "    </div>",
      "  );",
      "};"
    ],
    "description": "Flow component template with filename as the component name"
	}
}

5. tsx 파일 생성 후 ⇒ 지정한 단축어 ‘fsf’를 입력하면 정의한 ‘코드 스니핏’이 자동완성으로 나타난다.

6. enter를 통하여 정의한 스니핏이 작성된 것을 볼 수 있다.

이때 마우스 커서의 위치까지 정의하였기에 type지정 ⇒ jsx 문법까지 순차적으로 편리하게 진행이 가능하다!

✋ 마무리

팀 내 코드 컨벤션에 따라 [type, interface], [함수 선언식, 함수 표현식] 등을 잘 구분하여 정의해 보자!

또한 예시처럼 꼭 컴포넌트 스니핏 정의가 아니더라도 자주 사용하는 패턴이 있다면 정의해서 편리하게 개발해 보면 좋겠다!

[ERROR] - This key is not known by any other names해결 (GitLab SSH 연결 오류 해결방법, SSH 접속, SSH Key 등록)

꼼코더 — Mon, 26 Aug 2024 23:26:06 +0900

Error 발생(GitLab SSH 연결 오류)

GitLab에서 프로젝트 clone 도중 This key is not known by any other names.가 확인되었다.

번역하면 ‘이 키는 다른 이름으로 알려져 있지 않습니다.’

쉽게 말해, 연결할 GitLab에서 사용하는 SSH 키가 사용자 쪽에 연결되어 있지 않음을 확인하는 메시지

"Are you sure you want to continue connecting (yes/no/[fingerprint])?"

→ 당신은 이 서버가 신뢰할 수 있는 서버라 믿고 연결을 계속할 건가? / yes를 눌렀지만 오류가 나왔다…

"yes"를 입력하면 어떻게 되는가

'yes'를 입력하면 해당 서버의 SSH 키가 로컬 머신에 저장
이후부터 동일한 GitLab 서버에 연결할 때 더 이상 이 경고 메시지를 보지 않게 된다.

✅ 해결책 - SSH key Gen 등록

1. 터미널 프로그램 열기 (CMD, items, 터미널 등…)

2. SSH key 생성 명령어 ‘ssh-keygen’를 입력

이때 key - value 형식으로 생성된다.

ssh-keygen

3. Enter 키 입력 (기본 경로로 key 저장) → 다른 경로나 파일 이름을 지정하고 싶다면, 경로를 입력.

이때 저장한 id_???.pub 파일은 SSH로 등록할 파일이기에 공유하면 안 되는 중요한 파일이다.

4. 'Enter passphrase (empty for no passphrase)'

SSH 키를 생성할 때, 키 파일에 추가적인 보안을 위해 비밀번호를 설정할지 묻는 단계.
비밀번호 설정하지 않는다면 ⇒ enter (만약 본인 컴퓨터가 안전하고 SSH Key 도난 우려가 없다면)
설정하고 싶다면 ⇒ 비밀번호 입력

5. SSH 키 쌍이 성공적으로 생성하게되면 아래와 같은 형식의 성공 메시지를 확인할 수 있다.

6. cd ~/.ssh 명령어 입력

cd ~/.ssh

7. ls -al 명령어 입력 ⇒ 생성한 .pub 파일 확인

ls -al

8. cat id_???.pub 명령어 입력 후 → 출력된 SSH key 내용 복사 ([ssh- ~ ..local 까지)

## 이전에 생성한 .pub 파일명 (???에 생성된 이름과 동일하게 맞추기)
cat id_????.pub

9. Git Lab 서버의 SSH 등록 페이지로 이동

방법 1 : 접속하려고 하는 Git Lab 프로젝트 상단 [Add SSH Key] 버튼 클릭

방법 2 : Git Lab 좌측 메뉴 → profile → Edit profile → SSH keys

10. 우측 상단 [Add new key] 버튼 클릭

11. SSH key 정보 입력 후 → [Add key] 버튼을 클릭

key : 이전에 복사한 SSH key 값
Title : 자유롭게 작성
Expiration date : 유효 기간 설정 (선택하지 않을 시 무기한)

12. Git Lab 주소 복사

13. 복사한 URL로 git clone 명령어 입력

git clone ‘복사한 URL’

이전과 달리 정상적으로 clone에 성공한 것을 볼 수 있다.

참고 1 : https://unwritten.tistory.com/91
참고 2 : https://git-scm.com/book/ko/v2/Git-서버-SSH-공개키-만들기