[항해 플러스 프론트엔드 7기] 사전 스터디 1주차 - TS

Jaehyun Ahn·2025년 9월 15일

항해 플러스

목록 보기

1/13

과거 (현재도 유효한 방식들)

템플릿 리터럴

백틱(``)을 사용하여 문자열을 선언하는 방식. ES6부터 백틱을 사용하여 문자열을 정의할 수 있게 됨


const name = 'Jaehyun';

console.log('My name is' + name + '. nice to meey you'); // My name is Jaehyun. nice to meet you

// 백틱 사용
console.log(`My name is ${name}. nice to meey you`); // My name is Jaehyun. nice to meet you

템플릿 리터럴 태그

템플릿 리터럴 앞에 함수 이름을 붙이면 템플릿 리터럴과 템플릿 값의 일부가 전달됨.

템플릿 리터럴로 선언한 문자열 앞에 함수를 붙여 기능을 붙이는 느낌


// values 길이는 2라고 가정 (템플릿 리터럴 안에 number 타입의 변수(${...})가 2개)
// reduce를 통해 식을 작성하는 것이 보통. (values의 길이를 단정지을 수 없기 때문에) 편의를 위해 아래와 같이 예시를 작성함
const formatNumbers = (strings: TemplateStringsArray, ...values: number[]) : string => {
	return strings[0] + values[0].toFixed(2) + values[1].toFixed(2) + strings[1];
}

console.log(formatNumbers`This is value: ${0}, ${4}, it's important.`) // This is value: 0.00, 4.00, it's important.

심볼(Symbols)

객체의 고유한 키값

Symbol('foo') === Symbol('foo') // false
Symbol.for('a') === Symbol.for('a') // true

Symbol() 과 Symbol.for()의 차이는?

Symbol() : 매번 고유한 심볼을 생성. 해당 심볼의 description은 식별에 도움을 주지 않음.

Symbol.for() : 전역 심볼 레지스트리에 등록된 심볼을 찾거나 생성. 동일한 key가 있으면 동일한 심볼을 재사용

ES2020

옵셔널 체이닝 (?.)

?. 앞의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환


const user = {
  name: null
}

console.log(user.name.first) // 타입 에러
console.log(user.name?.first) // undefined

인덱싱 및 함수에도 사용할 수 있음. (ex. array?.[3], func?.())

널 병합 연산자 (??)

||과 함께 조건부 할당에 사용할 수 있는 연산자

|| vs ??

|| : 모든 falsy 값에 적용

?? : undefined, null에만 적용

import()

동적 import, 정적 임포트인 import ... from "..."와 비슷하지만 런타임에 동작하고 Promise를 반환하며 변수를 사용한다는 차이가 있음

String.matchAll

루프를 사용하지 않고 캡처 그룹을 포함하여 정규식의 여러 개의 일치 항목을 가져오는 메서드, str.matchAll(regexp) 와 같은 형태로 사용. (regexp는 g 플래그 필수)

캡쳐 그룹 : 정규식에 ()로 묶은 부분, 매치된 값이 따로 저장됨

const text = "cat, bat, rat";
const regex = /(\w)at/g;

console.log(text.match(regex));
// ["cat", "bat", "rat"]

console.log([...text.matchAll(regex)]);

/*
[
  ["cat", "c", index: 0, input: "cat, bat, rat", groups: undefined],
  ["bat", "b", index: 5, input: "cat, bat, rat", groups: undefined],
  ["rat", "r", index: 10, input: "cat, bat, rat", groups: undefined]
]
*/


const text = "2025-09-15, 2024-12-31";
const regex = /(\d{4})-(\d{2})-(\d{2})/g;

for (const match of text.matchAll(regex)) {
  const [full, year, month, day] = match;
  console.log({ full, year, month, day });
}

// { full: "2025-09-15", year: "2025", month: "09", day: "15" }
// { full: "2024-12-31", year: "2024", month: "12", day: "31" }

Promise.allSettled()

Promise 배열 중 1개라도 실패하면 즉시 reject 처리하는 Promise.all과 달리 모든 Promise가 끝날 때 까지 기다리며 실패하더라도 결과 배열에 rejected로 저장함

또한, Promise.all은 실패한 Promise 1개만은 반환하여 이후 Promise의 성공/실패 유무를 판단하기 까다로움 + 성공한 promise에 접근할 수 없음
모든 Promise의 결과가 필요할 때 유용하게 사용 가능


const promises = [
  Promise.resolve(42),
  Promise.reject("에러 발생"),
  new Promise((resolve) => setTimeout(() => resolve("done"), 1000))
];

Promise.allSettled(promises).then((result) => {
	console.log(result);
})

/*
[
  { status: "fulfilled", value: 42 },
  { status: "rejected", reason: "에러 발생" },
  { status: "fulfilled", value: "done" }
]
*/

BigInt

매우 큰 정수를 표현하기 위해 도입된 원시 타입, Number.MIN_SAFE_INTEGER ~ Number.MAX_SAFE_INTEGER 범위를 넘어가면 정확도가 낮아질 수 있음

BigInt() 생성자 사용 시, 오류 방지를 위해 문자열과 함께 사용하는 것이 좋음.
BigInt와 Number 타입은 연산 시 같이 사용 불가. BigInt 타입 끼리 연산, Number 타입 끼리 연산 가능

globalThis

전역 객체를 가리키는 표준화된 식별자, 환경에 따라 동일하게 전역 객체에 접근할 수 있도록 하는 메서드


console.log(globalThis); // 브라우저면 window, Node면 global

import.meta

ES 모듈 환경에서 모듈 자체에 대한 메타데이터를 담고 있는 객체

import.meta.url : 현재 모듈 파일의 url을 반환

export * as ~~ from ...

ES 모듈에서 다른 모듈을 통째로 재추출 할 때 사용하는 방식

여러 유틸 함수들을~~. 로 사용할 수 있게끔 묶어서 재추출 할 때 사용

Jaehyun Ahn

미래 프론트 어쩌고

다음 포스트

[항해 플러스 프론트엔드 7기] 사전 스터디 1주차 - TS