I'm a Fig, Not a Pig

참여하고 있는 프로젝트에서 UI 구현을 마치고 API 연동을 하고 있는 중이다. 에러 처리를 위해 Axios Interceptor를 사용했는데, 이 과정에서 AxiosError를 처리했던 과정을 기록해보려 한다.  초기 코드초기에 작성한 에러 처리 코드는 다음과 같았다.if (error) { const errorMessage = error instanceof Error ? error.message : '알 수 없는 에러가 발생했습니다.'; return {errorMessage};} 이 코드에 대해 리뷰를 받으면서, 공통 모듈로 처리할 수 있는지에 대한 피드백을 받았다. 처음에는 이 부분을 별도의 공통 컴포넌트로 분리하라는 의미인지, 이해가 잘 되지 않아 혼란스러웠다. 리뷰어분은 Axios를 직..

try catch 문으로 에러를 처리할 때 아래와 같이 작성했더니 err에 타입에러가 뜨는 것을 보게되었다.const getSth = async (pararms) => { try { // ... actinos } catch (err) { setError(err.message) } }; err에 커서를 대보면 다음과 같은 메세지가 뜬다. 사진에서 알 수 있듯이 error는 unknown 타입이다. unknown 타입은 any 타입 외의 어떤 타입에도 할당할 수 없기 때문에 타입 좁히기를 해주어야 한다. 따라서 instanceof를 이용해서 타입을 좁혀주었더니 에러가 말끔히 사라졌다. 이렇게 타입을 좁혀주는 매커니즘을 타입 가드라고 한다.if (err instanceof Error) { setError(er..

in 문법: 객체에 특정 속성이 존재하는지 확인할 때 사용된다.typeof 문법: 변수의 타입을 확인할 때 사용된다 예제를 통해 알아보자.   1. in 문법interface Person { name: string; age?: number;}const person: Person = { name: "Alice", age: 30,};console.log("age" in person); // trueconsole.log("address" in person); // false    2. typeof 문법let x = "hello";let y = 42;let z = true;console.log(typeof x); // "string"console.log(typeof y); // "number"consol..

keyof 연산자는 객체 타입으로부터 프로퍼티의 모든 key들을 String Literal Union 타입으로 추출하는 연산자이다.주의할 점은 keyof 연산자는 오직 타입에만 적용할 수 있는 연산자라는 점이다. 따라서 값과 함께 사용하려고 하면 오류가 발생한다. typeof 연산자는 자바스크립트에서 특정 값의 타입을 문자열로 반환하는 연산자이다. 다른 기능은 타입을 정의할 때 사용하면 특정 변수의 타입을 추론하는 기능도 가지고 있다. type Person = typeof person;// 결과// {name: string, age: number, location:string}const person = { name: "John", age: 25,};   이러한 특징을 이용해 keyof 연산자를 다음과..

타입스크립트에서의 배열은 다음과 같이 정의할 수 있다.let numArr: number[] = [1, 2, 3]    문자열 배열 타입 정의만약 문자열을 담는 배열의 타입을 정의한다면 다음과 같이 하면 된다.let strArr: string[] = ["hello", "im", "winterlood"];    객체 배열 타입 정의객체를 담는 배열을 정의할 수 도 있다. 예시로 다음과 같은 객체 배열이 있다고 해보자.type Post = { title: string; content: string; author: { id: number; name: string; age: number; };};let posts: Post[] = [ { title: "첫 번째 게시글", con..

공식문서를 보면 Index Signature에 대한 내용으로 다음과 같이 적혀있다. Index SignaturesSometimes you don’t know all the names of a type’s properties ahead of time, but you do know the shape of the values. In those cases you can use an index signature to describe the types of possible values. 쉽게 말해 인덱스 시그니쳐는 객체의 프로퍼티의 key과 value의 타입을 정해주는 것을 말한다. 인덱스 시그니쳐는 객체의 모든 프로퍼티가 특정 타입을 갖도록 강제하며, {[key : T] : U} 형식이다. 예제를 통해 살펴보자...

저저번주에 모던 JS 스터디 하면서 클래스에 대해 공부했는데, 이번에는 TypeScript를 공부하며 또 만나게 되었다. 아직 class에 익숙하진 않지만, 알아갈 수록 유용하다고 생각된다. 오늘은 TypeScript에서 클래스를 사용하는 방법에 대해 살펴 볼 예정이다. 우선 JS 에서의 클래스를 먼저 간단하게 짚고가자.  1. JS Class클래스 선언class Student { } 클래스는 객체를 생성하는 틀이다. 붕어빵이 객체라면 붕어빵 기계는 클래스라고 볼 수 있다.   필드 선언class Student { // 필드 name; age; grade;}   생성자 선언생성자는 특수한 메서드로, 실질적으로 객체를 생성하는 함수이다.class Student { // 필드 name; a..

이틀 전부터 타입스크립트를 공부 중인데 any 타입이랑 unknown 타입이 헷갈린다. 둘 다 변수에 어떤 타입의 값이든 할당할 수 있는 것 같아 비슷하게 느껴져, 오늘은 둘의 차이점을 공부해보려 한다.  any 타입 타입 계층도를 보면 unknonw은 전체 집합이고 any는 치트키 같은 역할이다.any 타입이 치트키인 이유는 any 타입은 타입스크립트에서만 제공되는 특별한 타입으로 타입 검사를 받지 않기 때문이다. 예를 들어 다음과 같이 범용적으로 사용되어야 하는 변수가 있다고 가정해 보자.let anyVar = 10;anyVar = "hello"; // 오류 발생!변수 anyVar는 number 타입의 값 10으로 초기화 되었지만 이후 string 타입의 값 "hello"를 저장해야 한다. 타입스크립..