[week9] 프론트엔드 기초 : React + TypeScript (2) - 03/10

Kyulee·2026년 3월 10일
프로그래머스 데브코스

TIL 

목록 보기
44/85
post-thumbnail

데이터 처리

Flow Control

명령형 프로그램의 개별 명령문, 명령 또는 함수 호출이 실행되거나 평가되는 순서입니다.

제어 흐름의 종류

제어 흐름의 종류에는 5가지가 있습니다.
1. goto - 다른 구문에서 시작
2. choice - 일부 조건이 충족되는 경우에만 일련의 명령문 실행 (If-else, switch)
3. 어떤 조건이 충족될 때까지 일련의 명령문을 0회 이상 실행 (Collection loop, General loop)
4. 현재 실행 구문에서 떨어진 한 구문의 집합을 실행 (Loop continuation)
5. 프로그램 실행을 중단 (Loop early exit, 함수 실행 정지)

표현식과 문의 이해

표현식 (expression)

  • 어떤 값으로 이행되는 임의의 유효한 코드 단위입니다.
  • 표현식이 평가되면, 새로운 값을 생성하거나 기존 값을 참조합니다.
  • 값으로 평가될 수 있는 문은 모두 표현식입니다.
  • 표현식의 종류로는 리터럴 표현식, 함수 표현식 등이 있습니다.

문 (Statement)

  • 프로그램을 구성하는 기본 단위, 최소 실행 단위 입니다.
  • 문의 종류로는 선언문, 할당문, 반복문, 블럭문 등이 있습니다.

조건문

조건문은 일부 조건이 충족되는 경우에만 일련의 명령문을 실행합니다.

조건문의 종류로는 If ...else문 / switch문이 있습니다.

if..else문

  • 논리조건이 참/거짓에 따라 명령문을 실행해야할 경우 사용합니다.
  • if 논리조건에는 true, false로 평가할 수 있는 표현식을 대입가능합니다.
  • 논리 조건이 참인경우 if 블럭문 실행, 거짓인 경우 else 블럭문을 실행합니다.
  • else if 절을 사용하여, 다수의 조건을 순차적으로 검사할 수 있습니다.
const score = 85;

if (score >= 90) {
  console.log("A학점");
} else if (score >= 80) {
  console.log("B학점");  // ← 이 줄이 실행됩니다
} else if (score >= 70) {
  console.log("C학점");
} else {
  console.log("F학점");
}

switch문

  • switch에서 명시된 표현식을 평가한 후, 평가된 값과 case 라벨 값을 비교하여 일치하는 case의 명령문을 실행합니다.
  • default 작성
    • 평가된 값에 case문이 없을 경우 default의 명령문이 실행됩니다.
const day = 3;

switch (day) {
  case 1:
    console.log("월요일");
  case 2:
    console.log("화요일");
  case 3:
    console.log("수요일");
  case 4:
    console.log("목요일");
  case 5:
    console.log("금요일");
  case 6:
    console.log("토요일");
  default:
    console.log("일요일");
}

반복문

Conditional loop (조건부 loop)

대부분의 프로그래밍 언어에는 일부 조건이 변경될 때까지 루프를 반복하는 구조가 있습니다.

while문

  • 시작할 때 조건을 평가하는 타입
    • 본문 생략 가능
let count = 1;

while (count <= 5) {
  console.log(count);  // 1, 2, 3, 4, 5
  count++;
}

do..while문

  • 마지막에 조건을 평가하는 타입
    • 본문은 항상 한번 이상 실행
let count = 10;

do {
  console.log(count);  // 10 (조건이 false여도 1번은 실행됨)
  count++;
} while (count <= 5);

For loop

특정 부분의 코드가 반복적으로 수행될 수 있도록 합니다.
언어별로 지원하는 형식이 다릅니다.

[초기화-조건식-증강문]의 형식

  • c언어에서 유례한 문법입니다.
  • while 문과 다르게, 해당 루프와 관련된 loop 변수가 존재합니다.
for (let i = 0; i < 5; i++) {
  console.log(i);  // 0, 1, 2, 3, 4
}
  • 초기문 (let i = 0) : loop 내에서 사용할 loop 변수를 초기화합니다.
  • 조건문 (i < 5) : loop 내 코드 실행 전, 조건을 평가하여 loop를 지속할지 판단합니다.
  • 증감문 (i++) : loop 내 코드 실행 후, 실행되는 문장입니다. (loop 변수 증강 용도)

for...of문

반복 가능한 객체를 통해 반복하는 루프를 만듭니다.
배열의 값을 하나씩 꺼내서 반복합니다.

const fruits = ["사과", "바나나", "딸기", "포도"];

for (const fruit of fruits) {
  console.log(fruit);
  // 사과
  // 바나나
  // 딸기
  // 포도
}

for..in문

객체의 열거속성을 통해 지정된 변수를 반복합니다.
객체의 키(key)를 하나씩 꺼내서 반복합니다.

const person = {
  name: "Alice",
  age: 25,
  city: "Seoul"
};

for (const key in person) {
  console.log(`${key}: ${person[key]}`);
  // name: Alice
  // age: 25
  // city: Seoul
}

breack / continue

break문

  • 제어흐름의 종류 중 프로그램 실행 중단 종류입니다.
  • 반복문 switch문을 종료시킬 때 사용합니다.
for (let i = 0; i < 10; i++) {
  if (i === 5) break;
  console.log(i);  // 0, 1, 2, 3, 4
}
console.log("반복 종료");

continue문

  • 제어흐름의 종류 중 현재 실행 구문에서 떨어진 한 구문의 집합을 실행 종류에 속합니다.
  • while, do...while, for문을 다시 시작하기 위해 사용합니다.
for (let i = 0; i < 5; i++) {
  if (i === 2) continue;
  console.log(i);  // 0, 1, 3, 4  (2는 건너뜀)
}

예외상황의 종류

예외상황 Exception

  • 런타임 때 발생할 수 있는 의도치 않은 상황을 뜻합니다.
  • 흐름 제어 시 발생할 수 있는 예외 상황이므로, 이를 이해하여 코드 레벨에서 대응해야 합니다.
  • 예외상황을 핸들링하지 않는다면, 기능이 동작하지 않거나, 어플리케이션이 shut down될 수 있습니다.

예외의 원인

  • 언어 레벨 - 외부 요인에 의한 예외 상황까지 다양합니다.
  • 코드 레벨에서의 문제
  • 하드웨어, 디바이스의 문제
  • 라이브러리 손상
  • 사용자의 입력 실수
  • 사용자의 입력 실수
  • ...

ECMAScript Error

자바스크립트 언어에서 발생하는 Error Type입니다.

  • RangError - 값이 집합에 없거나, 허용범위가 아닐 때
  • ReferenceError - 존재하지 않는 변수 참조 시
  • SyntaxError - 문법을 지키지 않았을 때
  • TypeError - 값이 거대한 자료형이 아니여서 연산이 불가능할 때

DOMException

Web API 레벨에서 발생하는 Error Type입니다.

  • NetworkError - 네트워크 에러 발생 시
  • AbortError - 작업이 중단되었을 때
  • TimeoutError - 작업 시간이 초과되었을 때

그 외

  • 개발자도 예상치 못한 예외 상황
    • 개발자가 직접 예외 상황을 예상하여 핸들링 할 수 있습니다.
    • 자바스크립트의 Error 객체를 사용하여 직접 에러를 정의내리고 핸들링 할 수 있습니다.

throw와 Error 객체

throw문

예외를 발생시킬 때 사용합니다.

예외가 발생하면,
1. 현재 함수의 실행이 중지
2. 에러 객체와 함께 에러가 throw
3. 제어흐름은

  • 호출자 사이에 catch블록이 있으면, catch블럭으로 전달
  • 호출자 사이에 catch블록이 없다면, 프로그램 종료

Error객체

사용자가 직접 Error 객체를 정의하여 사용할 수 있습니다.

function enterClub(age) {
  if (age < 19) {
    throw new Error("미성년자는 입장할 수 없습니다.");
  }
  return "입장 가능합니다. 즐거운 시간 되세요! ";
}

try {
  console.log(enterClub(15));
} catch (e) {
  console.log("알림: " + e.message);
}

try..catch문

에러 catch

예외가 발생하면,
1. 현재 함수의 실행이 중지
2. 에러객체와 함께 에러가 throw
3. 제어흐름은

  • 호출자 사이에 catch블록이 있으면, catch블럭으로 전달
  • 호출자 사이에 catch블록이 없다면, 프로그램 종료

에러를 catch하여 프로그램이 종료되지 않도록 해야합니다.
예외 처리를 담당하는 핸들러를 찾기 위해, 순서대로 콜 스택을 거슬러 올라가 올바른 핸들러를 찾아내어 그곳에서 처리되도록 합니다.

콜스택

스택 자료구조

  • 출입구가 하나인 데이터 구조입니다.

call stack

  • 자바스크립트 코드가 실행되며 생성되는 실행 컨텍스트를 저장하는 자료구조
  • 함수를 호출할 때마다 스택이 쌓이고, 함수의 실행이 종료되면, 콜 스택에서 스택을 제거하는 원리

에러 throw되면

  • 콜 스택을 확인하여, 핸들링하고 있는 catch문이 있는 스택에서 처리

try..catch문

try...catch 문은 블록문 내에서 예외가 발생한 경우, 예외 처리를 맡을 하나 이상의 반응 명령문을 지정합니다.

  • try 블록의 명령문 중 하나가 실패하면, catch로 제어권이 넘어간다.
  • try 블록의 명령문 중 하나가 성공하면, catch로 제어권이 넘어가지 않는다.

try..catch문의 finally 블록

finally 블록은 try 블록에서 예외 상황이 발생하지 않더라고, 실행합니다.

  • 예외 상황이 발생되면 : try->catch -> finally
  • 예외 상황이 발생되지 않으면 : try-> finally
function readFile(filename) {
  let file = null;

  try {
    file = openFile(filename);        // 에러가 날 수 있음
    return processFile(file);
  } catch (error) {
    console.log("파일 처리 실패:", error.message);
  } finally {
    if (file) closeFile(file);        // 에러 여부와 관계없이 파일을 반드시 닫음
    console.log("항상 실행됩니다");
  }
}

객체와 빌트인 객체

객체 Object

객체는 속성을 가진 독립적인 개체 (entity)입니다.

  • 객체는 속성으로 구성된 집합이다.

자바스크립트는 객체기반의 프로그래밍언어 입니다.

  • 자바스크립트를 구성하는 대부분이 객체이다.
const person = {
  name: "Alice",
  age: 25,
  job: "개발자",
};

객체 Object - 속성 property

속성은 키와 값 사이의 연결관계입니다.

점 표기법

console.log(person.name);  // "Alice"
console.log(person.age);   // 25

괄호 표기법

console.log(person["name"]);  // "Alice"

// 변수로 키를 동적으로 접근할 때 유용
const key = "age";
console.log(person[key]);     // 25

객체 Objecet - 생성 방법

1. 리터럴 표기로 객체 생성

가장 직관적이고 흔히 사용되는 방식입니다. 중괄호 {}를 사용하여 프로퍼티를 직접 나열합니다.

const user = {
  name: "Gemini",
  greet: function() { console.log("안녕!"); }
};

2. 생성자 함수로 객체 생성

new 연산자와 함께 함수를 호출하여 동일한 구조의 객체를 여러 개 생성할 때 유용합니다.

function Person(name) {
  this.name = name;
  this.sayHello = () => console.log(`난 ${this.name}이야.`);
}

const person1 = new Person("철수"); // 인스턴스 생성

3. Object.create로 객체 생성

지정된 객체를 프로토타입으로 가지는 새로운 객체를 만듭니다. 상속을 구현할 때 주로 사용합니다.

const proto = { concept: "상속 예제" };
const child = Object.create(proto); // proto를 부모로 삼는 객체 생성

console.log(child.concept); // "상속 예제"

객체 속성 control

객체는 원시타입과 다르게 변경 가능한 값입니다.
객체는 전달하는 과정에서 참조형태로 전달됩니다.

  • 이는 객체의 변경이 일어날 때 참조된 객체들도 같이 변경되는 문제점을 야기합니다.
  • 때문에 의도한 동작이 되기 위해서는 아래와 같은 조작을 적절히 사용해야 합니다.

1. 객체의 속성 동적 생성

객체에 존재하지 않는 속성을 참조하고 할당문을 통해 값을 할당하면 동적으로 생성되고 추가됩니다.

2. 객체의 속성들 나열하기

객체의 속성을 나열하는 3가지 방법

  1. for...in
    모든 열거 가능한 속성을 순회합니다.
  2. Object keys(객체)
    객체 자신의 열거 가능한 속성 이름을 배열로 반환합니다.
  3. Objet getOwnPropertyNames(객체)
    객체 자신만의 모든 속성을 배열로 반환합니다.

3. 객체의 속성 삭제하기

delete 연산자로 속성을 삭제합니다.

객체간 비교와 복사

객체 비교와 Reference

객체 참조 타입 : 모든 연산이 참조값(메모리 주소)로 처리됩니다.

객체 비교

객체를 서로 비교하면

  • 객체 속성과 값이 같은 객체여도, 참조값이 다르므로 서로 다름
  • 자기 자신과의 비교에서만 true

얕은 복사

객체의 최상위 수준만 복사합니다. 내부의 중첩된 객체는 복사되지 않고 주소값(참조)만 공유하므로, 원본을 변경하면 복사본도 영향을 받을 수 있습니다.

const original = { a: 1, b: { c: 2 } };
const shallow = Object.assign({}, original); // 얕은 복사

shallow.b.c = 99; // 복사본의 내부 값을 바꿨는데...
console.log(original.b.c); // 99 (원본도 같이 변함!)

깊은 복사

객체의 내부 값까지 전부 다 새로 복사합니다. 원본과 복사본이 메모리상에서 완전히 독립된 남남이 되므로 서로 영향을 주지 않습니다.

const original = { a: 1, b: { c: 2 } };
const deep = structuredClone(original); // 깊은 복사 (최신 표준 방식)

deep.b.c = 99; // 복사본의 내부 값을 바꿔도...
console.log(original.b.c); // 2 (원본은 그대로 유지됨!)

객체의 종류

객체의 분류

객체는 아래와 같이 분류할 수 있다.

표준 빌트인 객체 ECMAScript

  • 기초 객체: Object, Function, Boolean, Symbol
  • 오류 객체: Error (예외 처리 시 사용)
  • 숫자 및 날짜: Number, BigInt, Math, Date
  • 텍스트 처리: String, RegExp (정규표현식)
  • 컬렉션 (데이터 집합):
    - 인덱스 기반: Array (배열)
    - 키 기반: Map, Set
  • 구조화된 데이터: JSON (데이터 변환 및 전송)
  • 제어 추상화: Promise, Generator (비동기 처리 등)

빌드인 객체 형태

  • 정적 static: 속성, method
  • 인스턴스 instance: 속성, method
    • {{ 객체.prototype.인스턴스method }}
    • e.g. Number.prototype.toFixed()
  • 기본적으로 Object 객체의 속성을 상속 받음
    • -> 프로토타입 메서드들을 모두 상속 toString(), toLocaleString(), valueOf()
  • 함수로서 바로 호출 사용

호스트 객체 [브라우저 기준] : DOM API

Buil-in 객체

Number 객체

숫자 타입 변환 및 상태를 확인하는 도구입니다.

  • 타입 변환: Number('1.2')와 같이 문자열을 숫자로 바꿀 때 사용합니다.
  • 정적 메서드: Number.isNaN(), Number.isInteger() 등으로 숫자의 상태를 체크합니다.
  • 인스턴스 메서드: 숫자.toFixed()로 소수점 자리를 제어하거나, toLocaleString()으로 콤마를 찍습니다.
  • 특징: 변수가 숫자 값을 가지고 있다면 별도의 객체 생성 없이도 메서드 사용이 가능합니다.

Math 객체

수학적인 계산과 상수를 제공하는 전용 도구입니다.

  • 상수: Math.PI를 통해 원주율(3.1415...) 값을 바로 가져올 수 있습니다.
  • 수학 계산: abs(절대값), pow(거듭제곱), sqrt(제곱근) 등을 지원합니다.
  • 숫자 처리: ceil(올림), floor(내림), round(반올림) 기능을 제공합니다.
  • 비교 및 랜덤: max/min으로 최대/최소를 찾고, random으로 0~1 사이의 난수를 생성합니다.
  • 특징: 생성자 함수가 아니므로 new Math()와 같은 방식으로는 사용할 수 없습니다.

Date 객체

날짜와 시간을 다루는 빌트인 객체입니다.

  • 생성 방법:
    • new Date(): 호출 직후의 현재 날짜와 시간을 생성합니다.
    • Date.now(): 현재 시간을 밀리초 단위의 숫자(타임스탬프)로 반환합니다.
  • 주요 메서드 (가져오기/설정하기):
    • 연/월/일: getFullYear(), getMonth() (0~11 주의), getDate()
    • 시/분/초: getHours(), getMinutes(), getSeconds()
    • 요일: getDay() (0:일요일 ~ 6:토요일)
    • 설정: setFullYear(), setMonth(), setDate() 등으로 특정 시점 수정이 가능합니다.
  • 문자열 변환:
    • toString(): 전체 날짜/시간 정보를 문자열로 반환합니다.
    • toDateString(): 날짜 부분만 사람이 읽기 편한 형태로 반환합니다.
    • toLocaleString(): 현지 국가 설정에 맞게 날짜와 시간을 변환합니다.
  • 특징:
    • 월(Month)은 0부터 시작하므로 1월은 0, 12월은 11로 처리됨에 유의해야 합니다.
    • UTC(협정 세계시) 기준의 메서드(getUTCDate() 등)도 별도로 제공합니다.

문자열 (String)

텍스트 데이터를 표현하고 저장하는 데이터 타입입니다.

  • 생성 방법:
    • 리터럴 표기: 쌍따옴표(""), 따옴표('') 사용
    • 템플릿 리터럴: 백틱(`)을 사용하여 줄바꿈이나 변수 삽입 가능
    • String 객체 이용: new String()으로 생성 가능
  • 주요 특징:
    • 이스케이프 문자: \n 등을 사용하여 문자열 내 줄바꿈 등이 가능합니다.
    • 유사 배열: 배열처럼 인덱스로 개별 문자에 접근할 수 있습니다.
    • 비교: 알파벳 순서대로 비교하며, 뒤에 올수록 크다고 판단합니다.
    • 데이터 보관: 객체 형태를 JSON.stringify()를 통해 문자열로 변환하여 저장하기 유용합니다.

String 객체

문자열을 다루기 위한 다양한 속성과 메서드를 제공하는 래퍼 객체입니다.

  • 정적(Static) 메서드: fromCharCode, fromCodePoint, raw 등
  • 인스턴스 속성: length (문자열의 길이를 반환합니다.)
  • 인스턴스 메서드 (주요 기능):
    • 체크(Get):
      • 접근: at(), charAt()
      • 찾기: indexOf(), search()
      • 포함 여부: includes(), startsWith(), endsWith()
    • 변경(Set):
      • 케이스 변경: toLowerCase(), toUpperCase()
      • 교체: replace(), replaceAll()
      • 추가/합치기: padEnd(), padStart(), repeat(), concat()
      • 분리/추출: slice(), substring(), split()
      • 공백 제거: trim(), trimStart(), trimEnd()
  • 특징: 원시 타입 문자열도 마침표(.)를 찍으면 String 객체의 메서드를 바로 사용할 수 있습니다.

정규 표현식 (Regular Expression)

문자열에서 특정 문자 조합을 찾기 위한 패턴(정규식)입니다.

  • 문법: /pattern/flags 형태로 작성합니다. (예: /\w+\s/g)
  • 패턴 작성 방법:
    • 단순 패턴: 문자열 그대로를 매칭합니다.
    • 특수 문자: 어서션, 문자 클래스, 그룹과 범위, 수량자 등을 활용합니다.
  • 플래그(flag): 탐색 방식을 설정합니다. (g: 전체 탐색, i: 대소문자 무시, m: 다중행 탐색 등)

RegExp 객체

정규 표현식을 다루는 자바스크립트의 내장 객체입니다.

  • 생성 방법:
    • 리터럴 표기법: /패턴/플래그 (정규식이 변하지 않을 때 권장, 평가 시 컴파일됨)
    • 생성자 함수: new RegExp('패턴', '플래그') (패턴이 동적으로 변할 때 사용, 런타임 시 컴파일됨)
  • 주요 속성:
    • lastIndex: 다음 매칭을 시작할 인덱스 위치를 나타냅니다.
    • flags, global, ignoreCase 등: 설정된 플래그 정보를 반환합니다.
  • 주요 메서드:
    • test(): 패턴이 일치하는지 확인하여 true/false를 반환합니다.
    • exec(): 일치하는 정보를 배열로 반환하거나 없으면 null을 반환합니다.

RegExp 객체 🤝 String 객체

문자열 메서드 중 "찾는" 과정이 포함된 경우 정규식을 활용할 수 있습니다.

  • 일치 확인: match(정규식), matchAll(정규식)
  • 단순 검색: search(정규식)
  • 교체하기: replace(정규식), replaceAll(정규식)
  • 분리하기: split(정규식)

Collection 객체

데이터 항목들의 그룹을 의미하며, 상황에 맞는 효율적인 데이터 처리를 위해 사용됩니다.

  • 개념: 비용 절감 및 효율성을 위해 상황마다 적절한 데이터 형태로 처리해야 합니다.
  • 포함 종류: 일반적인 자료구조인 List, Set, Tree, Graph 등이 포함됩니다.

index collection - 배열

  1. Array (배열) 정의
    이름과 인덱스로 참조되어 정렬된 값들의 집합입니다. (인덱스는 "색인"과 같은 의미입니다.)
  • 특징: 자바스크립트는 명시적인 배열 데이터 타입 대신 배열 객체를 사용합니다.
  • 유사성: List와 비슷한 객체이며, 순회와 변형 작업을 수행하는 다양한 method를 가집니다.
  1. JavaScript Array 객체의 특징
    0개 이상의 식(expression) 목록으로 구성됩니다.
  • 가변성: 배열의 길이(length)와 각 요소의 데이터 타입은 고정되어 있지 않습니다.
  • 유연함: 모든 요소가 필수값은 아니며, undefined를 포함한 빈 값을 가질 수 있습니다.
  • 초기화: 배열을 만들 때 지정된 값으로 즉시 초기화됩니다.
  1. Array 객체 - 생성 및 참조
  • 생성 방법:
    • 배열 리터럴: 대괄호 []를 사용합니다.
    • Array 생성자: new Array(length) 또는 new Array(element0, element1, ...)
  • 인덱스 참조:
    • 0부터 시작: 반드시 정수로만 참조하며, 문자열은 사용할 수 없습니다.
    • 속성 저장: 인덱스로 참조하지 않으면 배열 요소가 아닌 객체의 속성으로 저장됩니다.
  • 배열의 길이: 마지막 인덱스에 +1 한 값이며, 직접 수정하여 배열을 자르거나 늘릴 수 있습니다.
  1. 주요 인스턴스 메서드 (요소 조작 및 순회)
  • 요소 체크(get):
    • 접근/찾기: at(), indexOf(), includes(), find(), findIndex()
    • 판별: every(), some()
  • 요소 조작(set):
    • 추가/제거: push(), pop(), unshift(), shift()
    • 변경/추출: map(), filter(), slice(), splice(), fill()
  • 배열 변형 및 재배치:
    • concat(), reverse(), sort(), flat()
  • 타입 변환:
    • 문자열로: join(), toString()
    • 누적 계산: reduce()

Keyed collection - Map, WeakMap

  1. Map 객체
    키-값 쌍을 저장하며, 삽입 순서대로 요소를 기억하는 콜렉션입니다.
  • 특징: 키(Key)로 객체를 포함한 모든 타입을 사용할 수 있습니다. (일반 객체는 문자열/심볼만 가능)
  • 주요 메서드:
    • 값 설정/가져오기: set(key, value), get(key)
    • 존재 확인/삭제: has(key), delete(key), clear()
    • 크기 확인: size 속성 사용
  1. WeakMap 객체
    키에 대한 참조가 "약하게" 연결된 Map입니다.
  • 특징: 키는 반드시 객체여야 합니다.
  • 가비지 컬렉션: 키로 사용된 객체에 대한 참조가 없어지면, 해당 항목은 자동으로 메모리에서 제거됩니다.
  • 제한: size 확인이나 순회(forEach 등)가 불가능합니다.

Keyed collection - Set, WeakSet

  1. Set 객체
    중복되지 않는 유일한 값들의 집합을 저장하는 콜렉션입니다.
  • 특징: 어떤 값이라도 유일하게 저장하며, 이미 존재하는 값을 추가하면 무시됩니다.
  • 주요 메서드:
    • 추가/삭제: add(value), delete(value), clear()
    • 존재 확인: has(value)
    • 크기 확인: size 속성 사용
  1. WeakSet 객체
    객체들만을 "약한" 참조로 저장하는 Set입니다.
  • 특징: 요소로 객체만 저장할 수 있습니다.
  • 가비지 컬렉션: 저장된 객체에 더 이상 접근할 수 없게 되면 자동으로 삭제되어 메모리 누수를 방지합니다.
  • 제한: size 확인이나 순회가 불가능합니다.

JSON 객체

데이터를 저장하거나 전송할 때 사용하는 경량의 데이터 교환 형식입니다.

  • 특징: JavaScript 객체 문법을 따르지만 엄격한 텍스트 형식입니다. (키와 문자열은 반드시 쌍따옴표 "" 사용)
  • 주요 메서드:
    • JSON.stringify(obj): JavaScript 객체를 JSON 문자열로 변환합니다. (직렬화)
    • JSON.parse(jsonText): JSON 문자열을 JavaScript 객체로 변환합니다. (역직렬화)
  • 주의: 함수나 undefined, 심볼 등은 JSON으로 변환될 때 생략되거나 null로 처리됩니다.

Intl 객체

각 국가나 언어에 맞는 형식(날짜, 숫자, 통화 등)을 제공하는 국제화 API입니다.

  • 특징: 사용자의 지역(Locale) 설정에 맞춰 데이터를 자동으로 포맷팅해 줍니다.
  • 주요 서비스:
    • Intl.DateTimeFormat(): 언어에 맞는 날짜와 시간 형식을 생성합니다.
    • Intl.NumberFormat(): 언어에 맞는 숫자, 통화, 퍼센트 형식을 생성합니다.
    • Intl.Collator(): 언어별 특성에 맞는 문자열 비교 및 정렬 기능을 제공합니다.
    • Intl.RelativeTimeFormat(): "3일 전", "내일"과 같은 상대적 시간 표현을 생성합니다.

프로토타입

프로토타입과 생성자 함수

자바스크립트는 프로토타입 기반 언어이며, 모든 객체는 자신의 부모 역할을 하는 '프로토타입' 객체와 연결되어 있습니다.

  • 생성자 함수 (Constructor): new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수입니다.
  • 프로토타입 (Prototype) 객체: 생성자 함수로 만든 모든 객체들이 공유하는 유전자와 같습니다.
    • 함수.prototype: 생성자 함수가 가진 설계도 공간입니다.
    • 객체.__proto__: 생성된 객체가 자신의 부모 설계도를 참조하는 링크입니다.
  • 이점: 메서드를 생성자 내부가 아닌 프로토타입에 정의하면, 수만 개의 객체를 만들어도 메모리에는 메서드가 단 하나만 존재하여 메모리를 절약할 수 있습니다.

프로토타입 Chain과 상속

객체의 속성을 찾을 때 해당 객체에 없으면 부모 프로토타입을 타고 올라가며 찾는 과정을 말합니다.

  • 프로토타입 체인 (Prototype Chain): * 객체에 특정 속성이나 메서드가 없다면 __proto__를 따라 상위 프로토타입을 계속 검색합니다.
    • 이 체인의 최상단은 항상 Object.prototype이며, 여기서도 못 찾으면 null을 반환합니다.
  • 상속 (Inheritance): * 자바스크립트는 클래스 기반 상속 대신 프로토타입 체인을 이용해 상속을 구현합니다.
    • 부모 객체의 기능을 자식 객체가 직접 가지지 않아도, 체인을 통해 마치 자신의 것처럼 공유해서 사용하는 방식입니다.
  • 작동 원리: 인스턴스 -> 생성자.prototype -> Object.prototype -> null 순으로 거슬러 올라갑니다.

Class 문법

프로토타입 기반의 상속을 더 쉽고 명확하게 사용하기 위해 도입된 '문법적 설탕(Syntactic Sugar)'입니다.

  • 기본 구조: class 키워드를 사용하며, 객체를 초기화하는 constructor() 메서드를 가집니다.
    • 인스턴스 메서드: 클래스 내부에 정의하며, 자동으로 프로토타입에 등록됩니다.
    • 정적(Static) 메서드: static 키워드를 붙이며, 인스턴스 없이 클래스 이름으로 직접 호출합니다.
  • 상속 (extends & super):
    • extends: 부모 클래스의 기능을 물려받을 때 사용합니다.
    • super(): 부모 클래스의 생성자를 호출하여 부모의 속성을 자식에게 전달합니다.

컨텍스트

this와 화살표 함수 (Arrow Function)

this는 함수가 호출되는 방식에 따라 결정되는 "누가 나를 불렀는가"를 나타내는 예약어입니다.

  • 일반 함수: 호출한 대상(객체)에 따라 this가 동적으로 변합니다. (단독 호출 시 전역 객체)
  • 화살표 함수: 자신만의 this를 가지지 않습니다. 함수가 선언된 위치의 상위 스코프 this를 그대로 물려받습니다(Lexical this).
  • 특징: 화살표 함수는 new 연산자로 생성자 함수로 쓸 수 없으며, arguments 객체도 가지지 않습니다.

스코프 (Scope)

변수에 접근할 수 있는 "유효 범위"를 말합니다.

  • 글로벌 스코프: 코드 어디서든 접근 가능한 최상위 범위입니다.
  • 함수 스코프: 함수 내부에서 선언된 변수는 함수 안에서만 유효합니다. (var 키워드 특징)
  • 블록 스코프: 중괄호 {}로 둘러싸인 영역 안에서만 유효합니다. (let, const 키워드 특징)
  • 스코프 체인: 현재 스코프에 변수가 없으면 상위 스코프로 거슬러 올라가며 변수를 찾는 경로입니다.

클로저 (Closure)

함수가 선언될 당시의 외부 환경(Lexical Environment)을 기억하여, 함수가 외부에서 호출되어도 그 환경에 접근할 수 있는 현상입니다.

  • 활용: * 상태 유지: 현재 상태를 기억하고 변경을 제어할 때 사용합니다.
    • 정보 은닉: 프라이빗 변수처럼 외부에서 직접 수정할 수 없는 데이터를 만들 때 유용합니다.
  • 원리: 외부 함수가 종료되어도 내부 함수가 외부 함수의 변수를 참조하고 있다면, 그 변수는 메모리에서 해제되지 않고 유지됩니다.

실행 컨텍스트 (Execution Context)

자바스크립트 코드가 실행되기 위해 필요한 환경 정보를 담은 객체입니다.

  • 구성 요소: * Variable Environment: 현재 컨텍스트 내의 식별자 정보(호이스팅 관련).
    • Lexical Environment: 변수 및 함수 선언과 상위 스코프에 대한 참조.
    • ThisBinding: this가 가리키는 객체.
  • 콜 스택 (Call Stack): 실행 컨텍스트가 쌓이는 구조입니다. 새로운 함수가 호출되면 스택에 쌓이고(Push), 실행이 끝나면 제거(Pop)됩니다.
  • 동작 단계: 1. 생성 단계: 선언문만 먼저 읽어 호이스팅을 수행하고 스코프를 결정합니다.
    1. 실행 단계: 변수에 값을 할당하고 실제 코드를 한 줄씩 실행합니다.
profile
Kyulee
안녕하세요 매일의 배움을 기록으로 자산화하는 개발자 이규현입니다 😊
이전 포스트

[week9] 프론트엔드 기초 : React + TypeScript (1) - 03/09

다음 포스트

[week9] 프론트엔드 기초 : React + TypeScript (3) - 03/11

0개의 댓글