React로 돌아가기 전에 배워서 다행인 JavaScript 기본

발행: 3주 전 (2025년 12월 26일 오후 11:57 GMT+9)

6 min read

원문: Dev.to

Source: Dev.to

내 첫 번째 (웃긴) JavaScript 오해 😅

JavaScript에 처음 접했을 때 나는 솔직히 이렇게 생각했었다:

“Java와 JavaScript는 아마 같은 언어일 거야… 끝에 script만 붙이면 되겠지.”

큰 실수였지 😄. Java와 JavaScript는 사용 사례, 문법, 그리고 세계가 완전히 다른 언어다. 그 가정을 버리고 나니 나는 이렇게 결심했다:

이번엔 서두르지 않을 거야. 절대 기본부터 시작하겠다.

JavaScript의 모든 일은 실행 컨텍스트 안에서 일어난다 🧠

내가 처음 배운 (그리고 가장 중요한) 개념 중 하나는 **Execution Context(실행 컨텍스트)**였다. 이것을 JavaScript가 코드를 실행하는 밀폐된 용기로 생각하면 된다. 이 용기 안에는 다음이 들어 있다:

변수에 대한 정보
함수에 대한 정보
코드가 실행되는 순서

JavaScript가 프로그램을 실행할 때마다 실행 컨텍스트가 생성된다.

실행 컨텍스트 안에는 무엇이 있을까?

메모리 컴포넌트 (Variable Environment)

변수와 함수를 저장한다
키‑값 쌍 형태로 보관한다
변수는 처음에 undefined 로 저장된다

코드 컴포넌트 (Thread of Execution)

코드를 한 줄씩 실행한다
엄격한 순서를 따른다

이 때문에 JavaScript는:

Synchronous(동기식) → 한 번에 하나의 명령만 실행
Single‑threaded(단일 스레드) → 특정 순서대로 코드를 실행

JavaScript는 두 단계로 실행된다 ⚙️

단계 1: 메모리 생성 단계

모든 변수와 함수에 메모리를 할당한다
변수는 undefined 로 초기화된다
함수는 전체가 메모리에 저장된다

단계 2: 코드 실행 단계

코드를 한 줄씩 실행한다
실제 값이 할당된다
함수가 호출된다

간단한 예제로 이해해 보자 👇

var n = 2;

function square(num) {
  var ans = num * num;
  return ans;
}

var square2 = square(n);
var square4 = square(4);

🧠 메모리 생성 단계

JavaScript는 먼저 전체 코드를 스캔하고 메모리를 할당한다:

n → undefined
square → 함수 정의
square2 → undefined
square4 → undefined

아직 실행은 전혀 일어나지 않는다.

▶️ 코드 실행 단계

이제 JavaScript가 실행을 시작한다:

n에 값 2가 할당된다
함수 square는 아직 건너뛰어진다

square(n)이 호출될 때:

새로운 실행 컨텍스트가 생성된다
num과 ans에 메모리가 할당된다
num = 2, ans = 4
return ans가 실행되어 제어가 돌아온다

square(4)도 같은 절차를 반복한다. 모든 작업이 끝나면 전역 실행 컨텍스트가 파괴된다.

Call Stack: 배경을 관리하는 매니저 📚

JavaScript는 **Call Stack(호출 스택)**을 이용해 모든 실행 컨텍스트를 추적한다:

LIFO(Last In, First Out) 방식으로 동작
함수가 끝나면 해당 실행 컨텍스트가 스택에서 제거

호출 스택은 다음과 같이 불리기도 한다:

Execution Context Stack(실행 컨텍스트 스택)
Program Stack(프로그램 스택)
Runtime Stack(런타임 스택)

왜 이것이 중요한가? (특히 React에서) 💡

내가 결국 다음을 이해했을 때:

실행 컨텍스트
메모리 할당
호출 스택

다음과 같은 개념들이 의미를 갖게 되었다:

호이스팅(Hoisting)
클로저(Closures)
useEffect
상태 업데이트(State updates)
React에서의 예상치 못한 동작

React가 더 이상 “마법”처럼 느껴지지 않았다— 논리적으로 느껴졌다.

마무리 생각 🙌

이번엔 서두르지 않고 React에 뛰어들었다. 천천히 JavaScript를 존중하며, 그 내부에서 실제로 어떻게 동작하는지 배웠다.

솔직히 말해서? 그 덕분에 나는 훨씬 더 나은 React 학습자가 되었다.

React를 시작하려고 하거나 막힌 느낌이 든다면: JavaScript 기본기를 건너뛰지 마세요. 선택 사항이 아니라, 바로 기초다.