🌟 Svelte란?

Svelte는 현대적인 웹 애플리케이션을 구축하기 위한 혁신적인 프레임워크로, 사용자가 작성한 코드가 빌드 과정에서 최적화되어 실행될 수 있도록 돕고, 컴파일러 기반의 접근 방식을 채택하고 있어, 런타임 대신 빌드 타임에 코드를 변환하여 더 빠르고 효율적인 애플리케이션을 생성합니다.

💡 Svelte의 주요 장점

• 싱글 파일 컴포넌트 (SFC)
  • Svelte는 Vue와 마찬가지로 컴포넌트 하나를 파일 하나에 담는 방식을 사용합니다.
  • HTML, CSS, JS가 모두 같은 파일에 있어 코드 의존성을 쉽게 파악할 수 있고, 모듈 관리가 편리합니다.
  • 모든 코드가 하나의 파일에 있기 때문에 구조가 더 간결하고 읽기 쉽습니다.
• 컴파일러 기반 프레임워크
  • Svelte는 런타임에 동작하는 대신 컴파일 시점에 코드를 최적화 합니다.
  • 가상 돔(Virtual DOM)을 사용하지 않고, 브라우저가 직접 DOM을 업데이트 합니다.
  • React나 Vue와 달리 가상 돔이 없어 실제 돔을 변경하는 과정을 단순화하고, 화면 업데이트가 더 빠릅니다.
• 뛰어난 성능
  • 컴파일 단계에서 코드 최적화를 수행하기 때문에 런타임 오버헤드가 없습니다.
  • React와 같은 가상 돔 기반 프레임워크보다 더 빠르고 효율적인 성능을 보여줍니다.
  • 변경 사항이 발생할 때 화면을 더 빠르게 업데이트 합니다.
• 낮은 러닝커브
  • HTML, CSS, JS의 기존 문법을 그대로 사용할 수 있어 새로운 개념을 추가로 배우지 않아도 됩니다.
  • 기존 웹 기술을 이해하고 있으면 쉽게 시작할 수 있습니다.
  • 예를 들어, 일반 JavaScript 변수를 선언해서 상태처럼 사용할 수 있으며, 추가적인 상태 관리 도구 없이도 반응형 데이터 처리가 가능합니다.
• 보일러플레이트 코드가 없음
  • 초기 설정이 거의 필요 없고, 필요 없는 코드 없이 매우 간결하게 작성 가능합니다.
  • 추가 설정이나 복잡한 구성이 필요하지 않기 때문에 프로젝트 시작이 빠르고 직관적 입니다.
  • 컴포넌트 파일에 필수 요소만 작성하게 설계되어 불필요한 코드 작성량을 줄이고 관리가 쉽습니다.
• 타입스크립트 및 IDE 지원 개선
  • Svelte 5 업데이트 이후 타입스크립트와 IDE 지원이 강화되어, 프로젝트 설정 및 도구 통합이 더 수월해졌습니다.
  • 개발자들이 Svelte를 사용하면서 타입스크립트를 보다 원활하게 활용할 수 있도록 지원합니다.

🔴 Svelte의 단점

• 생태계 부족
  • React나 Vue에 비해 커뮤니티와 생태계가 상대적으로 작습니다.
• 상태 관리 라이브러리가 없음
  • Svelte는 자체 store를 제공해 간단한 상태 관리는 가능하지만, 복잡한 상태 관리에는 외부 라이브러리나 직접적인 코드 관리가 필요합니다.

🔄 Svelte vs React 차이점

React의 특징

• 가상 돔 사용
  • React는 가상 돔(Virtual DOM)을 활용하여 변경 사항을 효율적으로 처리합니다.
  • 변경사항이 발생할 때마다 새로운 가상 돔을 생성하고, 실제 돔과 비교한 후 필요한 부분만 업데이트 합니다.
• 상태값 변경 시 컴포넌트 전체 재실행
  • React에서는 상태값이 변경되면 해당 컴포넌트가 전체 재실행 됩니다.
  • 상태가 많은 컴포넌트에서는 성능 저하로 이어질 수 있습니다.
• 비효율적인 복사 과정
  • React는 불변성을 유지하기 위해 상태값이 변경될 때마다 새로운 값을 생성하고 복사하는 과정을 수행합니다.
  • 이 과정은 메모리와 CPU 자원을 소모하여 성능 저하를 초래할 수 있습니다.
• 최상위 앨리먼트 제약
  • React에서는 컴포넌트가 하나의 최상위 요소를 반환해야 합니다.
  • 이를 위해 <Fragment>나 <div>를 자주 사용해야 하며, 가독성 측면에서 불편함을 줄 수 있습니다.

Svelte의 특징

• 컴포넌트 전체 재실행 없음
  • Svelte에서는 상태가 변경될 때 전체 컴포넌트를 재실행하지 않습니다.
  • 이로 인해 필요한 부분만 효율적으로 업데이트할 수 있음. 단, 반응성 구문 같은 몇 가지 예외가 존재합니다.
• 컴파일러 기반 상태 변경 감지
  • 상태 변경을 감지하기 위해 컴파일러가 = 연산자를 사용합니다.
  • React처럼 상태값을 복사할 필요가 없어 코드가 간결하고 성능이 향상됩니다.
• 빌드 타임 최적화
  • 빌드 타임에 최적화된 코드가 생성됩니다.
  • 이로 인해 실행 시 매번 가상 돔을 생성하거나 비교할 필요 없이, 빠르게 화면을 업데이트할 수 있습니다.
• 최상위 앨리먼트 제약 없음
  • 실제 DOM을 직접 생성하기 때문에, React처럼 최상위 엘리먼트를 하나만 사용해야 하는 제약이 없습니다.
  • 덕분에 자유로운 구조로 HTML을 작성할 수 있습니다.

🔍 상세 비교

🌱 예시 코드 비교

1. 컴포넌트 구조

// React 예시

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0); // 상태를 관리하기 위해 useState 훅을 사용

    return (
        <div>
            <h1>{count}</h1> {/* 현재 count 상태를 출력 */}
            <button onClick={() => setCount(count + 1)}>Increment</button> {/* 버튼 클릭 시 count 증가 */}
        </div>
    );
}

export default Counter;

// Svelte 예시

<script>
    let count = 0; // 일반 변수로 상태를 관리
</script>

<h1>{count}</h1> {/* 현재 count 변수를 출력 */}
<button on:click={() => count += 1}>Increment</button> {/* 버튼 클릭 시 count 증가 */}

2. Props 전달

// React 예시

import React from 'react';

function Greeting({ name }) {
    return <h1>Hello, {name}!</h1>; // props로 전달받은 name을 출력
}

function App() {
    return <Greeting name="Svelte" />; // Greeting 컴포넌트에 "Svelte"라는 name 전달
}

export default App;

// Svelte 예시

<script>
    export let name; // props로 전달받은 name을 export하여 사용
</script>

<h1>Hello, {name}!</h1> {/* props로 전달받은 name을 출력 */}

<!-- 사용 예 -->
<Greeting name="Svelte" /> {/* Greeting 컴포넌트에 "Svelte"라는 name 전달 */}

3. 이벤트 핸들링

// React 예시

import React from 'react';

function App() {
    const handleClick = () => {
        alert('Button clicked!'); // 버튼 클릭 시 알림 표시
    };

    return <button onClick={handleClick}>Click Me</button>; // 버튼 클릭 이벤트 핸들러 설정
}

export default App;

// Svelte 예시

<script>
    function handleClick() {
        alert('Button clicked!'); // 버튼 클릭 시 알림 표시
    }
</script>

<button on:click={handleClick}>Click Me</button> {/* 버튼 클릭 이벤트 핸들러 설정 */}

4. 조건부 렌더링

// React 예시

import React, { useState } from 'react';

function App() {
    const [isVisible, setIsVisible] = useState(false); // 상태값 isVisible을 관리

    return (
        <div>
            <button onClick={() => setIsVisible(!isVisible)}>Toggle</button> {/* 버튼 클릭 시 isVisible 값 토글 */}
            {isVisible && <p>This is visible!</p>} {/* isVisible이 true일 때만 내용 표시 */}
        </div>
    );
}

export default App;

// Svelte 예시

<script>
    let isVisible = false; // 상태값 isVisible을 관리

    function toggle() {
        isVisible = !isVisible; // isVisible 값을 토글하는 함수
    }
</script>

<button on:click={toggle}>Toggle</button> {/* 버튼 클릭 시 toggle 함수 호출 */}
{#if isVisible} 
    <p>This is visible!</p> {/* isVisible이 true일 때만 내용 표시 */}
{/if}

5. 리스트 렌더링

// React 예시

import React from 'react';

function App() {
    const items = ['Apple', 'Banana', 'Cherry']; // 리스트 항목 배열

    return (
        <ul>
            {items.map((item, index) => (
                <li key={index}>{item}</li> // 각 항목을 리스트 아이템으로 표시
            ))}
        </ul>
    );
}

export default App;

// Svelte 예시

<script>
    let items = ['Apple', 'Banana', 'Cherry']; // 리스트 항목 배열
</script>

<ul>
    {#each items as item} 
        <li>{item}</li> {/* 각 항목을 리스트 아이템으로 표시 */}
    {/each}
</ul>

🖥️ 실행 컨텍스트 (Execution Context)란?

자바스크립트 코드가 실행될 때마다 "실행 컨텍스트"라는 실행 환경이 생성되는데 코드가 실행되는 동안 스코프, 변수, 함수 및 this 바인딩 정보를 관리하는데 중요한 역할을 합니다. 실행 컨텍스트는 크게 전역 컨텍스트, 함수 컨텍스트로 나뉘며, 각각 코드의 실행 환경을 설정합니다. 자바스크립트는 단일 스레드로 동작하기 때문에 실행 컨텍스트는 콜 스택(Call Stack)을 통해 순차적으로 처리됩니다.

🔍 실행 컨텍스트 종류

1. 전역 컨텍스트 : 자바스크립트 코드가 로드될 때 가장 먼저 생성되는 실행 컨텍스트이며, 전역 컨텍스트는 전역 객체인 window 또는 global을 참조하고 전역에서 선언된 변수와 함수가 이 컨텍스트에 포함됩니다.
2. 함수 컨텍스트 : 함수가 호출될 때마다 새로운 함수 컨텍스트가 생성되고, 함수 내부의 지역 변수, 함수 인수, 그리고 내부 함수들이 함수 컨텍스트에서 관리됩니다.

⚙️ 실행 컨텍스트 동작 방식

1. 평가 단계 : 코드가 실행되기 전에 자바스크립트 엔진은 실행 컨텍스트를 먼저 평가하는데 이 과정에서 변수나 함수 선언이 실행 컨텍스트에 기록되며, 이를 통해 호이스팅(Hoisting)이 일어납니다.
2. 실행 단계 : 평가가 완료된 후, 실제 코드가 실행됩니다. 이때 변수 선언을 제외한 나머지 코드가 순차적으로 처리되며, 값이 할당되거나 함수가 호출됩니다.

📚 콜 스택 (Call Stack)

실행 컨텍스트는 콜 스택이라는 구조에서 관리는데 콜 스택은 LIFO (Last In First Out) 구조로 가장 마지막에 추가된 실행 컨텍스트가 먼저 실행됩니다. 함수가 호출될 때마다 새로운 실행 컨텍스트가 콜 스택에 쌓이고, 함수 실행이 완료되면 해당 컨텍스트가 스택에서 제거됩니다. 자바스크립트는 단일 스레드 기반 언어이기 때문에, 한 번에 하나의 실행 컨텍스트만 실행됩니다.

📦 렉시컬 환경 (Lexical Environment)

실행 컨텍스트 내부에는 렉시컬 환경이라는 데이터 구조가 존재하는데 이 구조는 변수와 함수 같은 식별자들을 관리하며, 자바스크립트 코드의 상태를 유지합니다. 렉시컬 환경은 두 가지 주요 구성 요소로 나뉩니다.

1. 환경 레코드 (Environment Record) : 현재 실행 중인 코드 블록이나 함수에서 선언된 변수와 함수들이 저장되는 공간입니다.
2. 외부 렉시컬 환경 참조 (Outer Lexical Environment Reference) : 해당 렉시컬 환경이 상위 스코프를 참조할 수 있도록 연결해주는 역할을 합니다. 이를 통해 상위 스코프에 있는 변수에 접근할 수 있습니다.

렉시컬 환경의 동작 과정

1. 식별자 생성 : 함수나 변수가 선언될 때, 해당 식별자가 렉시컬 환경에 등록됩니다.
2. 외부 환경 참조 설정 : 현재 컨텍스트가 상위 스코프에 접근할 수 있도록 외부 렉시컬 환경이 설정됩니다.

예시코드

// 코드 실행 시 생성되며, globalVariable이라는 전역 변수를 선언
let globalVariable = "global variable";

function parentFunction() {
    // parentFunction 호출 시 새로운 컨텍스트가 생성되고, parentVariable이라는 지역 변수를 선언
    let parentVariable = "parent variable";

    // childFunction은 parentFunction 안에 정의되어 있으며, 호출 시 새로운 컨텍스트가 생성
    function childFunction() {

        let childVariable = "child variable";
        console.log(globalVariable); 
        console.log(parentVariable);  
        console.log(childVariable);  
      // childFunction 내에서 전역 변수(globalVariable), 외부 함수의 지역 변수(parentVariable), 자신의 지역 변수(childVariable)에 접근 가능
    }

    childFunction(); // childFunction 호출
}

parentFunction(); // parentFunction 호출

실행 컨텍스트 : 코드 실행 환경으로, 스코프와 변수 정보를 관리 콜 스택 : 실행 컨텍스트가 쌓이는 구조, 마지막에 추가된 것이 먼저 실행 렉시컬 환경 : 변수와 함수 식별자를 관리하는 데이터 구조 ( 변수, 함수들이 어떤 스코프를 참조할 수 있는지 등을 결정 )

🗂 자료구조(Data Structure)란?

*데이터를 효율적으로 저장하고 관리하는 방법을 의미합니다. * 자료구조는 크게 선형구조와 비선형구조로 나뉘는데 각각의 구조는 데이터가 어떻게 저장되고 처리되는지에 따라 성능과 사용 목적이 달라집니다.

📊 선형 구조 (Linear Structure)

데이터가 일렬로 나열되어 있는 형태로, 
각 데이터 요소가 이전과 다음 요소와 직접적으로 연결되어 있습니다.
선형구조에서는 데이터의 순서가 매우 중요하며,
주로 순차적으로 접근하거나 처리해야 하는 경우에 사용됩니다.

>> 대표적인 선형 구조

• 배열(Array): 고정된 크기의 연속된 메모리 공간에 데이터를 저장하는 구조.

• 연결 리스트(Linked List): 각 데이터가 포인터로 다음 데이터와 연결되는 방식.

• 큐(Queue): 선입선출(FIFO) 방식으로 데이터를 처리하는 자료구조.

• 스택(Stack): 후입선출(LIFO) 방식으로 데이터를 처리하는 자료구조.

🌳 비선형 구조 (Non-linear Structure)

데이터들이 계층적이거나 네트워크 구조로 연결되어 있어,
각 데이터 간의 관계가 1:1이 아닌 1:다 또는 다:다로 연결됩니다. 
비선형구조에서는 특정 데이터와 그 주변 데이터 간의 관계가 중요하며, 
복잡한 데이터 구조를 효율적으로 표현하고 처리할 수 있습니다.

>> 대표적인 비선형 구조

• 트리(Tree): 계층적 구조로, 루트 노드를 시작으로 각 노드가 부모-자식 관계를 가지며 여러 레벨로 나뉨

• 그래프(Graph): 정점(Node)과 간선(Edge)으로 구성된 네트워크 구조로, 다양한 경로를 통해 데이터가 연결

🚶‍♂️🚶‍♀️ 큐 (Queue)

큐는 *선입선출(FIFO, First In First Out) *원칙에 따라 데이터를 저장하고 처리하는 구조입니다. 즉, 먼저 들어온 데이터가 먼저 나가게 됩니다. 
큐는 일상 생활에서도 흔히 볼 수 있는 구조로, 식당에서 웨이팅을 기다릴때
빈자리가 생기면 표를 뽑은 순서대로 들어가게 되는 경우를 예를 들 수 있습니다.

큐의 동작 방식

• 입구 (Enqueue): 데이터를 큐에 추가하는 과정이며, 큐의 맨 뒤에 데이터를 추가합니다.
• 출구 (Dequeue): 큐에서 데이터를 제거하는 과정이며. 큐의 맨 앞에서 데이터를 제거합니다.

큐의 특징

• 데이터를 입력한 순서대로 처리할 수 있도록 설계되어 있습니다.
• FIFO 원칙에 따라, 큐의 앞쪽에서 데이터가 먼저 처리됩니다.
• 응용 예: 프로세스 스케줄링, 버퍼 관리 등

예시코드

// 큐를 생성하고 초기 상태 선언
let queueData = [];


// 큐에 데이터를 추가하는 함수
const enqueue = (queue, data) => {
    // 큐의 맨 뒤에 데이터를 추가
    queue.push(data); 
};


// 큐에서 데이터를 제거하는 함수
const dequeue = (queue) => {
    // 큐가 비어있는 경우 에러 메시지를 반환
    if (queue.length === 0) {
        return { error: 'Queue is empty' };
    }
    // 큐의 맨 앞에서 데이터를 제거하고 반환
    return queue.shift();
};


// 큐의 첫 번째 데이터를 확인하는 함수
const frontQueueData = (queue) => {
    // 큐가 비어있는 경우 에러 메시지를 반환
    if (queue.length === 0) {
        return { error: 'Queue is empty' };
    }
    // 큐의 맨 앞 데이터를 반환
    return queue[0];
};


// 큐가 비어있는지 확인하는 함수
const isEmpty = (queue) => {
    // 큐의 길이가 0이면 true, 아니면 false를 반환
    return queue.length === 0;
};


// 큐의 크기를 확인하는 함수
const size = (queue) => {
    // 큐의 현재 길이를 반환
    return queue.length;
};


// 큐의 모든 데이터를 출력하는 함수
const printQueue = (queue) => {
    // 큐의 모든 데이터를 문자열로 변환하여 반환
    return queue.join(', ');
};


// 사용 예시
enqueue(queueData, 'A'); // 큐에 'A' 추가
enqueue(queueData, 'B'); // 큐에 'B' 추가
console.log(printQueue(queueData)); // A, B 출력
console.log(dequeue(queueData)); // A 출력 후 큐에서 제거
console.log(printQueue(queueData)); // B 출력
console.log(frontQueueData(queueData)); // B 출력 (큐의 첫 번째 데이터)
console.log(isEmpty(queueData)); // false 출력 (큐가 비어있지 않음)
console.log(size(queueData)); // 1 출력 (큐의 크기)

📚 스택 (Stack)

스택은 후입선출(LIFO, Last In First Out) 원칙에 따라 데이터를 저장하고 처리하는 구조입니다. 즉, 마지막에 들어온 데이터가 가장 먼저 나가게 됩니다. 박스에 책을 넣을때 가장 마지막에 넣은 책이 가장 먼저 나오는 것처럼
스택도 마지막에 들어온 데이터가 먼저 처리됩니다.

스택의 동작 방식

• 푸시 (Push): 데이터를 스택에 추가하는 과정입니다. 스택의 맨 위에 데이터를 추가합니다.
• 팝 (Pop): 스택에서 데이터를 제거하는 과정입니다. 스택의 맨 위에서 데이터를 제거합니다.

스택의 특징

• 데이터가 들어온 순서와 반대로 처리됩니다.
• LIFO 원칙에 따라, 스택의 위쪽에서 데이터가 먼저 처리됩니다.
• 응용 예: 함수 호출 스택, 재귀 호출 등

예시코드

// 스택을 생성하고 초기 상태 선언
let stackData = [];


// 스택에 데이터를 추가하는 함수
const push = (stack, data) => {
    // 스택의 맨 위에 데이터를 추가
    stack.push(data); 
};


// 스택에서 데이터를 제거하는 함수
const pop = (stack) => {
    // 스택이 비어있는 경우 에러 메시지를 반환
    if (stack.length === 0) {
        return { error: "Stack is empty" };
    }
    // 스택의 맨 위에서 데이터를 제거하고 반환
    return stack.pop();
};


// 스택의 가장 위 데이터를 확인하는 함수
const peek = (stack) => {
    // 스택이 비어있는 경우 에러 메시지를 반환
    if (stack.length === 0) {
        return { error: "Stack is empty" };
    }
    // 스택의 맨 위 데이터를 반환
    return stack[stack.length - 1];
};


// 스택이 비어있는지 확인하는 함수
const isEmpty = (stack) => {
    // 스택의 길이가 0이면 true, 아니면 false를 반환
    return stack.length === 0;
};


// 스택의 크기를 확인하는 함수
const size = (stack) => {
    // 스택의 현재 길이를 반환합니다.
    return stack.length;
};


// 스택의 모든 데이터를 출력하는 함수
const printStack = (stack) => {
    // 스택의 모든 데이터를 문자열로 변환하여 반환
    return stack.join(', ');
};


// 스택 사용 예시
push(stackData, 10); // 스택에 10 추가
push(stackData, 20); // 스택에 20 추가
push(stackData, 30); // 스택에 30 추가
console.log('스택 출력:', printStack(stackData)); // 스택 출력: 10, 20, 30
console.log('스택 크기:', size(stackData)); // 스택 크기: 3
console.log('스택에서 pop한 값:', pop(stackData)); // 스택에서 pop한 값: 30
console.log('스택의 최상위 값:', peek(stackData)); // 스택의 최상위 값: 20
console.log('스택이 비었는지:', isEmpty(stackData)); // 스택이 비었는지: false

🐱 (내가) 실무에서 자주 쓰는 Git 명령어 정리

Git이란? Git은 소스 코드의 버전 관리를 위한 분산 버전 관리 시스템(DVCS) 개발자들이 협업하여 소프트웨어를 개발할 때, Git은 코드의 변경 이력을 추적하고, 여러 개발자가 동시에 작업할 수 있도록 지원

1. 초기 설정

git config --global user.name "Your Name"
git config --global user.email "your_email@example.com"
git init
git remote add origin https://github.com/username/repository.git

2. 브랜치 생성 및 전환

// 새 작업 시작 시
git checkout -b 브랜치명

// 생성된 브랜치로 이동
git checkout 브랜치명

3. 파일 추가 및 커밋, 푸시 (변경 사항 저장 및 공유)

git add .
git commit -m "커밋 메시지"
git push

// 새로운 브랜치에서 최초 push 시
git push -u origin 브랜치명

4. 브랜치 병합 (작업 완료 후 병합)

git merge 머지할 브랜치명

// merge 취소
git merge --abort

// 원격 브랜치의 최신 변경 사항을 병합
git pull origin 브랜치명

5. 브랜치 삭제 (필요 없는 브랜치 정리)

// 로컬 브랜치 삭제
git branch -d 브랜치명

// 원격 브랜치 삭제
git push origin --delete 브랜치명

6. 커밋 취소 (최근 커밋 또는 특정 커밋 취소)

// 최근 커밋 취소
git reset --soft HEAD~1 // 커밋은 삭제되지만, 변경 사항은 유지 (스테이징 상태)
git reset --hard HEAD~1 // 커밋과 변경 사항 모두 삭제 (복구 불가능)
git push origin 브랜치명 --force

// 특정 커밋 취소
git revert 커밋ID // git log로 커밋ID 확인 가능
git push origin 브랜치명

7. 병합 전 빌드 파일 제외

git checkout main // main 브랜치로 이동
git merge test --no-commit // test 브랜치와 병합
// ( --no-commit 옵션을 사용하여 병합 후 자동 커밋을 방지 )
git reset HEAD build/ // build 파일을 변경 사항에서 제외하기
git checkout HEAD build/ // build 디렉토리의 변경 사항을 원래 상태로 되돌리기

// 변경 사항 커밋 및 푸시
git add .
git commit -m "Merged test branch into main, excluding build files"
git push origin main

8. 그 외

// 현재 작업 중인 변경 사항을 임시로 저장
git stash

// 저장된 변경 사항을 적용
git stash apply

// 저장된 변경 사항을 적용하고, 해당 스택에서 제거
git stash pop

// 필요 없는 stash 항목을 삭제
git stash drop

// 원격 저장소의 최신 상태를 가져옴
git fetch

📚 호이스팅 ( Hoisting ) 이란?

자바스크립트에서 호이스팅은 코드 실행 전에 변수와 함수 선언을 메모리에 등록하여, 코드 어디에서나 참조할 수 있게 하는 과정입니다. 사전적 정의 : 끌어올리기

우선, 호이스팅에 대해 더 자세히 설명하기 전에 먼저 자바스크립트에서의 변수 처리 과정에 대해 알아보도록 하겠습니다.

🔍 자바스크립트 변수 처리 과정

• 자바스크립트에서는 총 3단계에 걸쳐 변수를 생성합니다.
  1. 선언 단계 : 변수를 생성하고 등록
  2. 초기화 단계 : 변수는 undefined로 초기화
  3. 할당 단계 : undefined로 초기화된 변수에 실제 값을 할당

코드 실행 전 변수와 함수를 메모리에 저장하기 때문에 변수나 함수 선언이 코드 내 어디에 있더라도, 실제 실행 전에 메모리에 할당되어 사용자가 아무 문제 없이 해당 변수나 함수를 사용할 수 있게 됩니다.

⚙️ 호이스팅 동작 방식

1. 자바스크립트 parser가 함수 실행 전 해당 함수전체를 훑습니다.
2. 함수 내 존재하는 변수, 함수 선언에 대한 정보를 기억하고 실행합니다.
3. 유효범위는 함수 블록 {} 내에서 변수와 함수 선언을 블록의 상단으로 끌어올리는 것입니다.
4. 실제 코드가 끌어올려지는 것이 아니고 자바스크립트 parser가 내부적으로 끌어올려 처리하는 것이므로 실제 메모리에서는 변화가 없습니다.

실제로 호이스팅은 자바스크립트에서 규범적으로 정의된 용어가 아닙니다.
위 설명과 같이 끌어올려지는 현상을 영어로 "hoisting"이라 하여
많은 사람들이 호이스팅이라는 명칭을 사용하게 되었습니다.

📦 var 선언문 호이스팅

  console.log(test); //undefined

  var test = 123;
  console.log(test); //123

변수 test가 선언되기 전에 참조 시 에러가 발생하지 않고 undefined가 출력됩니다.

이는 코드 실행 전에 자바스크립트 내부에서 미리 test변수를 선언하여 undefined로 초기화를 해두었기 때문입니다.

따라서 var 키워드 변수는 호이스팅 과정에서 선언 및 초기화 단계가 동시에 진행됨을 알 수 있습니다.

📦 let, const  선언문 호이스팅

  console.log(test); // ReferenceError: test is not defined

  let test = 123;
  console.log(test); // 123

같은 상황에서 let과 const의 경우 error를 발생시키는데 바로 TDZ(Temporal Dead Zone) 때문입니다.

TDZ란 스코프 시작 지점에서 초기화 시작 지점까지의 영역을 의미하며, 이 영역에 있는 변수들은 사용할 수 없습니다. let과 const는 TDZ에 영향을 받기 때문에 할당을 하기 전에는 사용이 불가합니다.

즉, let의 경우 선언 단계까지는 완료되었지만 초기화가 되지 않아 에러가 발생하는 것입니다.
이는 잠재적인 버그를 줄일 수 있다는 장점이 있습니다.

🛠️ 함수선언문 호이스팅

  test(); //test

  function test() {
    console.log("test");
  }

함수 호출이 함수선언문의 위에 있든 아래쪽에 있든 함수 선언문은 호이스팅 영향으로 끌어올려지기 때문에 에러가 발생하지 않습니다.

🛠️ 함수표현식 호이스팅

  test(); // TypeError: test is not a function

  var test = function () {
    console.log("test");
  };

  test(); // test

함수 표현식의 경우, 변수 선언(var test)은 호이스팅되지만, 함수의 초기화와 할당은 호이스팅되지 않습니다. 따라서 test를 호출하기 전에 test는 undefined로 초기화되며, 이 상태에서 호출하면 TypeError가 발생합니다. 이후 test에 함수가 할당된 후에 호출하면 정상적으로 "test"가 출력됩니다.

📚 프로토타입 ( prototype ) 이란?

자바스크립트에서 모든 객체는 프로토타입을 가지며, 프로토타입은 객체의 메서드와 속성을 정의하는 객체입니다. 객체가 생성될 때, 생성자 함수의 prototype 속성에 정의된 메서드와 속성은 생성된 객체의 프로토타입으로 설정됩니다. 이를 통해 생성된 모든 인스턴스는 이 프로토타입을 통해 메서드와 속성을 상속받습니다.

🙋🏻‍♀️ 상속이란?

자바스크립트는 프로토타입을 기반으로 상속을 구현하는데
여기서 상속이란, 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속 받아 
그대로 사용할 수 있는 것을 말하며 이를 통해 코드의 재사용성을 높이고,
유지보수가 용이해지며 불필요한 중복을 제거합니다.

🛠️ 프로토타입을 통한 메서드 공유

function Test(name) {
  this.name = name;
}

Test.prototype.introduce = function() {
  return `안녕하세요. ${this.name}입니다!`;
};

const test1 = new Test("JavaScript");
const test2 = new Test("React");

console.log(test1.introduce === test2.introduce); // true

Test 생성자 함수의 prototype 프로퍼티로 프로토타입에 접근하여 공유 메서드 introduce 를 생성했습니다. 그리고 Test 생성자 함수가 생성한 모든 인스턴스는 부모 객체 역할을 하는 프로토타입 Test.prototype 으로부터 introduce 메서드를 상속받습니다.

🔍 프로퍼티의 소유와 공유

name 과 같이 개별적으로 소유(인스턴스마다 고유한 값을 가지는 프로퍼티)하는 프로퍼티만 개별적으로 소유하고, 내용이 동일한 메서드는 프로토타입 상속을 통해 공유하여 사용합니다.

이처럼, 프로토타입은 객체 간 상속을 구현하기 위해 사용되며 부모의 역할을 하는 객체로서 다른 객체에 공유 프로퍼티, 메서드를 제공합니다.

🔗 프로토타입 체인

모든 객체는 프로토타입의 계층 구조인 프로토타입 체인에 묶여있습니다.

function Test(name) {
  this.name = name;
}

Test.prototype.introduce = function() {
  return `안녕하세요. ${this.name}입니다!`;
};

const test1 = new Test("JavaScript");
console.log(test1.hasOwnProperty("name")); // true
console.log(test1.hasOwnProperty("introduce")); // false
// 'introduce'는 test1 객체의 직접적인 프로퍼티가 아니라 Test.prototype에서 상속된 메서드입니다.

자바스크립트 엔진은 객체의 프로퍼티에 접근하려고 할 때, 해당 객체에 접근하려는 프로퍼티가 없다면 접근자 프로퍼티가 가리키는 참조를 따라 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색하는데 이를 프로토타입 체인이라고 합니다.

프로토타입 체인은 자바스크립트의 상속 메커니즘의 핵심이기도 합니다. 객체가 프로퍼티를 찾을 때, 먼저 자신의 프로퍼티를 확인하고, 없으면 프로토타입 체인을 따라 상위 프로토타입을 검색합니다. 이 과정은 객체가 생성될 때 설정된 프로토타입 링크에 따라 이루어집니다. 따라서, 프로토타입 체인을 이해하는 것은 자바스크립트의 객체 지향 프로그래밍을 이해하는 데 매우 중요합니다.

var, let, const는 모두 자바스크립트에서 변수를 선언할 때 사용하는 키워드이며 각 키워드는 변수의 범위와 재선언 및 재할당 가능 여부 등에 차이가 있습니다.

1. 재할당 및 중복 선언

• var ( 중복 선언 및 재할당 가능 )

   var test = 1;
   console.log(test); // 1
  
   var test = 2;
   console.log(test); // 2
  
   test = 3;
   console.log(test); // 3

  자바스크립에서는 변수를 먼저 선언 후 값을 할당하는 게 정상적입니다.

  하지만 var의 경우 선언 전에 값을 미리 할당할 수 있으며 출력까지도 해볼 수 있습니다.

  위 코드와 같이 이미 선언한 변수를 동일한 이름으로 재선언(중복 선언) 할 수 있으며 값을 재할당하는 것 또한 가능합니다.

  그리고 마지막에 할당된 값이 최종 변수에 저장됩니다.

  추가적으로 var의 경우 변수를 유연하게 사용할 수 있지만, 기존에 선언해둔 변수의 존재를 잊고 재선언 하는 경우 문제 발생 여지가 있을 수 있습니다. 또한, 간단한 코드가 아닌 길고 복잡한 코드에서 같은 이름의 변수가 여러번 선언되어 사용된다면 어떤 부분에서 값이 변경되고 문제가 발생하는지 파악하기 힘든 단점이 있습니다.

• let ( 중복선언 불가, 재할당 가능 )

   let test = 1;
   console.log(test); // 1
  
   let test = 2;
   console.log(test);
   //Uncaught SyntaxError: Identifier 'title' has already been declared
  
   test = 3;
   console.log(test); // 3

  let은 var와 달리 중복 선언 시, 해당 변수는 이미 선언되었다는  SyntaxError를 발생시킵니다. 즉, 중복 선언이 불가합니다. 하지만 변수에 값을 재할당하는 것은 가능합니다.

• const ( 중복 선언 및 재할당 불가 )

   const test = 1;
   console.log(test); // 1
  
   const test = 2;
   console.log(test);
   //Uncaught SyntaxError: Identifier 'title' has already been declared
  
   test = 3;
   console.log(test);
   //Uncaught TypeError: Assignment to constant variable

  let와 const의 차이는 재할당 가능 여부입니다.

  재할당이 가능한 let과 달리 const의 경우 재할당 및 중복 선언이 불가합니다.

  그리고 const의 경우 let과 var와 달리 선언을 했을 때 할당도 같이 해주어야 합니다. 그렇지 않으면 SyntaxError를 발생시킵니다.

2. 스코프 ( Scope )

• 함수레벨 스코프 (Function Level Scope) with var

   function functionLevelScope() {
     if (true) {
       var test = 123;
       console.log(test); //123
     }
     console.log(test);
   }
  
   functionLevelScope(); //123
   console.log(test); //ReferenceError: a is not defined

  함수내에서 선언된 변수는 함수 내에서만 유효하고, 함수 내에서는 블록 내외부에 관계없이 유효합니다. 그리고 함수 외부에서는 참조가 불가합니다.

• 블록레벨 스코프 (Block Level Scope) with let, const

   function blockLevelScope() {
     if (true) {
       let test = 123;
       console.log(test); //123
     }
  
     console.log(test); // ReferenceError: a is not defined.
   }
  
   console.log(test); // ReferenceError: a is not defined.

  함수, if절 외 for, while, try/catch 등 모든 코드블록 ({..}) 내부에서 선언된 변수는 코드 블록 내부에서만 유효합니다.

  그리고 블록 외부에서 부터는 참조가 불가합니다.

결과적으로 재할당이 필요없는 상수와 객체에는 기본적으로 const를 사용하는 것이 의도치 않은 재할당을 방지해주기 때문이 안전하며, 재할당이 필요한 경우엔 한정적으로 let을 사용하는 것이 좋습니다. 단! 이때 변수의 스코프는 최대한 좁게 만드는 것이 좋습니다.