우아한 타입스크립트에 나온 개념을 참고했습니다. 예시 코드 일부 수정왜 에러 처리를 해야 할까?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가 인터프리터 언어로 분류되었지..

읽은 내용을 간략하게 재구성 했습니다. 책과 다르니 책도 꼭 읽어보세요.웹의 본질은 변하지 않았다웹 기술은 수십 년간 빠르게 발전했지만 처음부터 지금까지 핵심은 변하지 않았습니다.하이퍼링크로 연결된 정보 네트워크브라우저를 통한 탐색HTTP로 요청하고 HTML로 구조화URL로 식별되는 문서개방적이고 표준화된 구성요소이 원칙들은 어디서부터 시작된 걸까요? 웹의 역사자세히 다루기 보다는 주요 사건과 아이디어, 발명한 사람들의 목표와 동기를 살펴봅시다. 메멕스(1945): 정보 혁명의 시작웹의 역사는 1945년, 버니바 부시가 제안한 메멕스(Memex)라는 개념에서 시작됩니다.그가 해결하고자 한 문제는 명확했습니다."인간이 효율적으로 배우고 탐색할 수 있는 방법을 제공하자."메멕스의 핵심은 정보 조회와 기록 간..

조건부 타입조건부 타입은 어떤 조건에 따라 타입을 다르게 지정하고 싶을 때 사용자바스크립트의 삼항 연산자와 비슷한 형태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..

알고리즘 문제 풀다 만난 링크드 리스트들어보긴 했지.. 근데 이게 뭔데..대충 마인크래프트 카트 마냥 연결된 구조라는거까지 알고 있다.알고리즘 문제 풀이를 위해서라도 개념에 대해 알아보자링크드 리스트(Linked List)링크드 리스트(Linked List)는 데이터를 링크(link)로 이어 붙인 구조다.Node는 뭘까?노드(Node)는 링크드 리스트에서 사용되는 기본 단위. 각 노드는 하나의 데이터 덩어리로 내부에 두 가지 정보를 담고 있다.Head → [data | next] → [data | next] → nulldata: 노드가 가지고 있는 실제 데이터나 값next: 다음 노드를 가리키는 포인터 (링크 역할)노드 하나하나가 "내 값은 이거고, 다음 친구는 저기 있어" 라고 알려주는 셈이다.단방향은..

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~10주차 나름 진지 버전으로 써왔기에 이번 회고는 새로움을 주고자 짤도 가득 담아 MZ하게 써보겠습니다. 엠지력 주의 길면 길고 짧으면 짧은 두달동안 라는 교육과정을 진행했다.직장을 다니면서 교육도 들어야하고 과제도 진행해야 되기에 얼마나 빡셀지 예상이 갔다. 그래서 처음에 3기 쯤에 신청을 했다가"내 연차에 이걸 하는게 맞을까?""혼자 공부를 더 해보고 배워야 잘 흡수하지 않을까?""...주말을 다 비워야 되는데 이미 약속이 있음""항해한테 또 통수 맞는거 아냐?(항해99 경험자)"등등 온갖 핑계로 환불을 했다.약간 완벽콤이 있음이왕 하는거 완벽하게 해내고싶다. 그렇게 여유만만 워라밸 끝장나는 삶을 살고있었다.우리 회사는 야근이 1년에 한번 할까말까 하기 때문지난 2년동안 야근시간..

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..