전체 글

비동기 호출을 하다보면 다양한 상태코드에 따라 401(인증되지 않은 사용자), 404(존재하지 않는 리소스), 500(서버 내부 에러) 혹은 CORS 에러와 같은 다양한 에러가 발생합니다.타입 스크립트에선 이러한 비동기 API 에러를 어떻게 처리 및 명시할 수 있는지 6가지 정리해보았습니다.  1. 타입 가드 활용하기타입 가드를 활용하면 서버 에러를 명시적으로 확인할 수 있습니다.1) 명시적으로 표시하기아래와 같이 서버에서 전달하는 공통 에러 객체에 대해 타입을 정의할 수 있습니다.// 서버에서 전달하는 공통 에러 객체 타입 정의interface ErrorResponse { status: string; errorCode: string; errorMessage: string;}2) Axios 라이브러리의 ..

자바스크립트의 유연함이 때로는 장점이 되기도 하지만, 종종 예상치 못한 런타임 오류의 원인이 되기도 합니다. 타입스크립트는 이러한 자바스크립트의 한계를 극복하기 위해 만들어졌습니다.  정적 타입 시스템을 통해 코드 실행 전 많은 오류를 미리 잡고, 더 안전하고 유지보수하기 쉬운 코드를 작성할 수 있게 해줍니다.  하지만 브라우저와 Node.js는 여전히 자바스크립트만 이해할 수 있는데, 타입스크립트 코드는 어떻게 동작하는 걸까요? 타입스크립트 컴파일러의 내부 동작 원리를 살펴보고, 소스 코드가 어떻게 검사되고 변환되는지, 컴파일 과정의 각 단계를 살펴보며, 타입스크립트의 안전성과 한계도 정리해보았습니다.  1. 자바스크립트의 런타임과 타입스크립트의 컴파일// 🎯 타입스크립트에서는 컴파일 시점에 타입 검..

이번 글에서는 Typescript의 타입을 활용하는 방법들을 정리해보았습니다.  1) 조건부 타입타입에서 조건에 따라 다른 타입을 반환해야 할 때 사용합니다. 타입스크립트의 조건부 타입은 자바스크립트의 삼항 연산자와 동일한 Condition ? A : B 형태를 가집니다.  (1) extends와 제네릭을 활용한 조건부 타입 extends는 타입 확장 뿐 아니라 조건부 타입 설정에서도 사용되고, 제네릭 타입에서는 한정자 역할로도 사용됩니다.  아래 코드들은 결제 수단과 관련된 타입입니다.  // 결제 수단 관련 타입 정의interface Bank { financialCode: string; name: string; // 기타 은행 관련 속성}interface Card { financialCode:..

이번 글에서는 Typescript의 타입 확장과 타입 좁히기에 대해 정리해보았습니다.  1. 타입 확장하기타입 확장은 기존 타입을 사용해 새로운 타입을 정의하는 것을 의미합니다. 타입 확장의 가장 큰 장점은 기존 타입을 바탕으로 타입을 확장함으로서 불필요한 코드 중복을 줄일 수 있다는 점입니다.   interface와 type 키워드로 정의된 타입은 extends, 교차 타입, 유니온 타입을 사용해 타입을 확장합니다. extends, 교차 타입, 유니온 타입 간의 차이를 파악하고 언제 사용하면 좋은지 정리해보았습니다.  1) extends extends를 활용하면 기존 타입을 확장해 새로운 타입을 정의할 수 있습니다. 아래 예시 코드를 살펴보겠습니다. 예시 코드// 기본 장바구니 아이템 타입interfa..

이번 글에서는 브라우저 렌더링에 대해 자세히 알아보고, 렌더링 최적화 기법에 대해 정리해보았습니다.  0. 브라우저 렌더링브라우저 렌더링, 다양한 웹 리소스를 최적화 하는 방법을 이해하여 잘 읽힐 뿐 아니라 빠른 웹을 구현해야 합니다.마크업 작성 시, 불필요한 태그는 제거하고 필요한 태그만 사용해 간단 명료하게 구조화하는 것이 중요합니다.구조가 복잡하고 태그의 깊이가 깊어질수록 DOM 트리를 생성하는 비용이 많이 듭니다. 1. 브라우저의 구조구조 그림과 함께 각 구조에 대해 설명1) 사용자 인터페이스웹 페이지 표시 영역을 제외한 주소표시줄, 이전/다음 버튼, 새로고침 버튼 등 나머지 부분에 해당됩니다.2) 브라우저 엔진사용자 인터페이스와 렌더링 엔진을 연결하며, 사용자가 주소창에 웹 주소 입력 시 네트워..

이번 글에서는 웹 리소스(CSS,JS, 외부 라이브러리 등)와 이미지, 동영상, 오디오, 검색에 이르기 까지 전반적인 웹 최적화 방법에 대해 정리해보았습니다.  웹 리소스 최적화웹 개발 시 사용되는 CSS, JS를 비롯한 외부 오픈소스 라이브러리들의 로드 시점을 잘 분산하면 웹페이지 로드 시간을 최적화 할 수 있습니다.  1. preload preload는 현재 페이지에서 필요한 리소스를 미리 가져오게 할 수 있는 속성값 입니다.  반드시 as 속성으로 브라우저에 리소스 유형을 알려줘야 하며, href 속성에 정의되어 있는 리소스 유형 또한 맞게 설정되어야 합니다.  preload는 중복 선언 시, 선언된 수만큼 리소스를 가져오기 때문에 중복에 유의해야 합니다. preload를 통해 가져와진 리소스가 현..