우아한 타입스크립트에 나온 개념을 참고했습니다. 예시 코드 일부 수정왜 에러 처리를 해야 할까?API 호출이 실패했을 때 적절한 안내를 하지 않으면 사용자는 시스템에 문제가 생겼는지조차 알 수 없습니다.또한 개발자 입장에서도 디버깅하기 어렵습니다. 에러 상황을 명확하게 구분해야 유지보수도 훨씬 쉬워집니다.예를 들어인증이 만료되었을 땐 로그인 페이지로 이동네트워크가 끊기면 다시 시도하라는 안내서버가 에러 메시지를 주면 그대로 사용자에게 보여주기이런 처리들이 필요합니다. API 에러 처리 가이드프론트엔드 개발에서 API를 호출하다 보면 다양한 에러 상황을 마주하게 됩니다. 인증이 되지 않은 사용자(401), 존재하지 않는 리소스를 요청한 경우(404), 서버 내부 에러(500), 또는 CORS 정책 위반 등..

✅ 비동기를 위해 필요한 정보현재 비동기 동작이 어떤 상태인가비동기 동작을 위해 필요한 정보가 무엇인가요청이 성공했다면 받아온 정보를 어떻게 저장하고 관리할 것인가요청이 실패했다면 실패에 대한 정보를 어떻게 예측할 것인가비동기 요청에 대한 코드를 쉽게 유지보수할 수 있도록 어떻게 구조화하고 관리할 것인가1. API 요청컴포넌트 안에서 API를 직접 호출import React, { useEffect, useState } from "react";const CartBadge: React.FC = () => { const [cartCount, setCartCount] = useState(0); useEffect(() => { fetch("https://api.baemin.com/cart") ...

1. 런타임과 컴파일타임의 차이컴파일타임소스코드를 실행 가능한 프로그램으로 변환하는 과정입니다.보통 고급 언어 코드를 기계가 이해할 수 있는 형태로 바꾸는 것을 말합니다.런타임프로그램이 실행되는 시점을 의미합니다.즉, 사용자가 프로그램을 실행했을 때 일어나는 모든 과정이 런타임입니다. 2. 자바스크립트의 런타임자바스크립트가 실행되는 환경을 의미하며 대표적인 JS 런타임으로 인터넷 브라우저와, Node.js 등이 있다.주요 구성 요소자바스크립트 엔진(V8 등): 코드를 해석하고 실행합니다.웹 API: 브라우저에서 제공하는 타이머, DOM 등 기능입니다.콜백 큐 / 이벤트 루프 / 렌더 큐: 비동기 작업을 처리하는 구조입니다.ℹ️ 자바스크립트는 인터프리터 언어?전통적으로는 JS가 인터프리터 언어로 분류되었지..

조건부 타입조건부 타입은 어떤 조건에 따라 타입을 다르게 지정하고 싶을 때 사용자바스크립트의 삼항 연산자와 비슷한 형태extends를 활용한 조건부 타입T extends U ? X : Y//T가 U 타입에 할당 가능하면 X 타입, 아니면 Y 타입 실무 예시 코드로 보자. API 응답 타입 요청한 경로에 따라 정확한 응답 타입을 자동으로 설정하는 코드다.// API 경로를 문자열 유니온으로 정의type Endpoint = "/users" | "/products" | "/orders";// 요청 경로에 따라 응답 타입 자동 선택type ApiResponse = T extends "/users" ? User[] : T extends "/products" ? Product[] : T extends "/o..

4장. 타입 확장하기와 좁히기타입 확장타입 확장은 기존 타입을 기반으로 새로운 타입을 정의하는 방법으로 코드 중복을 줄이고 명확한 타입 구조를 유지할 수 있다.// type 확장type User = { name: string };type Admin = User & { role: string };// interface 확장interface User { name: string;}interface Admin extends User { role: string;}const admin :Admin = { name: "이름", role: "관리자"}장점코드 중복을 줄일 수 있다.기존 타입 정의를 안전하게 확장할 수 있다.변경이 필요한 부분만 추가하거나 수정할 수 있다. 유니온 타입유니온 타입은 두 개 ..

타입스크립트만의 독자적 타입 시스템타입스크립트는 자바스크립트의 자료형을 기반으로 독자적인 타입 시스템을 구축하고 있다.엄밀히 말하면 타입스크립트의 타입 시스템이 내포하고 있는 개념은 모두 자바스크립트에서 기인한다.단지 자바스크립트로 표현할 수단과 필요성이 없었을 뿐이다.타입스크립트의 계층구조1. any자바스크립트에 존재하는 모든 값을 오류 없이 받을 수 있다.타입을 명시하지 않은 것과 동일하며 타입 검사를 완전히 우회한다.let state: any;state = 1; state = "hello"; state = {}; state.foo.bar; // 오류 없음 (런타임 에러 가능성)타입 강제하기{ "compilerOptions": { "noImplicitAny": t..

1. 타입이란?자바스크립트의 데이터 타입자바스크립트는 다음과 같이 7가지 데이터타입(자료형)을 정의한다.undefinednullBooleanStringSymbolNumeric //(Number와BigInt)Object여러 종류의 데이터를 식별해서 컴파일러에 값의 형태를 알려준다. 메모리에 저장된 값을 데이터 타입으로 설명할 수 있고 모든 데이터를 해석할 때 데이터 타입 체계가 사용된다.집합으로서의 타입프로그래밍에서 타입은 값이 가질 수 있는 유효한 범위의 집합을 말한다.function greet(name: string): string { return `Hello, ${name}!`;}greet("World");greet(42); // Error: Argument of type '42' is not as..

1. 웹 개발의 역사자바스크립트1990년대 : 마이크로 소프트의 인터넷 익스플로러, 넷스케이프 커뮤니케이션즈의 넷스케이프 내비게이터 를 가장 많이 사용1995년대 : 넷스케이프의 브랜든 아이크는 웹의 다양한 콘텐츠를 표현하기 위해 플러그인 요소를 쉽게 조합 할 수 있는 새로운 언어가 필요하다고 생각 => 자바스크립트의 탄생익스플로러의 Jscript vs 넷스케이프의 Javasciprt : 둘다 사용자에게 유의미한 편의성은 제공하지 못함자바스크립트의 표준, ECMAScript 경쟁관계이던 익스플로러와 넷스케이프는 자신들의 브라우저 기능을 빠르게 늘리기 시작추가된 기능은 각자의 브라우저에서만 동작해, 웹페이지가 다르게 동작하거나 제대로 동작하지 않는 크로스 브라우징 이슈 발생개발자들은 어떤 기능을 추가하기 ..

Could not find a declaration file for module 'module-name'.Could not find a declaration file for module (모듈에 대한 선언 파일을 찾을 수 없습니다) 문제 발생구글 스프레드시트를 연동하는 라이브러리 사용중 다음과 같은 에러가 발생했다. 자바스크립트만 지원하는 npm 모듈을 TypeScript에서 사용할 때 발생하는 오류이다.npm 모듈 개발자가 TypeScript 타입을 지정하지 않고 자바스크립트만 지원하는 npm 모듈을 만든 경우 TypeScript에서 사용할 때 오류가 발생한다. 해당 라이브러리가 타입 정의를 지원할 경우 오류코드에 나와있는 것처럼 @types/google-spreadsheet 를 설치해도 해결되지만, ..

1. Interface란?인터페이스는 객체, 클래스, 함수 타입을 지정하는 또 다른 방법 중 하나이다. //객체 타입을 지정하는 여러가지 방법let person: { name: string; age: number } = { name: 'John', age: 30 };type TPerson = { name: string; age: number };let person: TPerson = { name: 'John', age: 30 };interface IPerson { name: string; age: number;}let person: IPerson = { name: 'John', age: 30 }; 보통 인터페이스는  I 를 붙여 명명한다.interface I인터페이스_이름 { 속성?: 타입;} 2...