타입스크립트

기존 React 프로젝트(v18.2.0)에서 Next.js(v14.1.0)로 마이그레이션

최근 쇼핑몰을 공부해보고 싶어서 리액트로 간단하게 쇼핑몰을 만들었는데, 이를 고도화시키고 싶은 욕심이 있었다. 고도화를 하면서 기존에 쇼핑몰을 어떻게 만들었는지 기억이 가물가물하기도 해서 이를 Next.js로 마이그레이션하면서 쇼핑몰에 대해 다시 복기하고 기능을 고도화시키고자 하였다. 또, 리액트로 사이트를 만들고 나서도 그랬듯이 최종적으로 다 만들고 기억이 안 날수도 있기에 이에 대해 공부도 하고 기록으로 남기고자 한다. 최초 프로젝트를 마이그레이션하고자 결심하고 뭔부터 해야할 지 막막해 검색을 하고 사이트[링크]를 참고해 프로젝트를 시작했다. 참고사이트에서는 먼저 Next.js를 CRA로 시작하라고 돼있었지만 처음 시작부터 참고하고 싶어서 새로운 깃헙 프로젝트를 파서 거기에 기존 프로젝트를 기록으로 ..

Item 9. 타입 단언보다는 타입 선언을 사용하기

// 타입 선언 const ABC : string = 'wrong'; // 타입 단언 const BCD = 'wrong' as string; 타입 선언은 할당되는 값이 해당 인터페이스 혹은 타입에 만족하는 지 검사한다. 하지만 타입단언은 강제로 지정하기 때문에 타입체크가 의미가 없다. 따라서 타입 선언보다는 타입 단언을 사용하는 것을 권장한다. 또한 잉여속성이 있을 때 타입단언문은 체크를 하지 않고, 타입단언은 잉여속성을 체크한다. 하지만 타입단언이 꼭 필요한 경우가 있다. DOM에 접근할 때인데, DOM에 접근할 때 예로 currentTarget의 타입을 지정할 때 그 타입은 엘리먼트에 없는 속성이라는 에러를 들 수 있다. 이때에는 TypeScript보다 사용자가 DOM에 대한 정보를 더 많이 알고 있..

Item 8. 타입 공간과 값 공간의 심벌 구분하기

타입은 ':' 부호 뒤에 온다. 값은 '='부호 뒤에 온다. 아래에서 interface Circle은 타입. cosnt Circle 은 값. 위 예제를 보면 instanceof 메소드 위에 오는 Circle은 값으로 받는다. instanceof 는 런타임에 작동하는데 그때에는 타입이 날아가기 때문이다. 따라서 아래에 stuff.diameter값에 오류가 난다. 한편 class나 enum은 타입과 값 두가지로 사용될 수 있다.

Item 4. 구조적 타이핑에 익숙해지기

자바스크립트는 덕 타이핑 기반이다. 클래스도 구조적 타이핑 규칙을 따른다. 구조적 타이핑을 사용하면 유닛 테스트를 수월하게 할 수 있다. 덕 타이핑(Duck Typing)? 참고 구조적 타이핑(Structural Typing)? TypeScript의 타입 호환성은 구조적 서브 타이핑(subtyping)을 기반으로 합니다. 구조적 타이핑이란 오직 멤버만으로 타입을 관계시키는 방식입니다. TypeScript의 구조적 타입 시스템의 기본 규칙은 y가 최소한 x와 동일한 멤버를 가지고 있다면 x와 y는 호환된다는 것입니다. 예를 들어: interface Named { name: string; } let x: Named; // y의 추론된 타입은 { name: string; location: string; } 입..