이전에 만들었던 리액트 프로젝트 Emotion Diary를 마이그레이션하면서, 기존에 자바스크립트로 작성된 공용 컴포넌트들을 타입스크립트로 재작성했다. 기존 프로젝트에서 이미 Button과 Header 같은 재사용 가능한 컴포넌트를 구현해두었지만, 타입 안정성이 부족했다. 타입스크립트를 도입하면서 props의 타입을 명확히 정의하고, 컴파일 타임에 오류를 잡을 수 있도록 개선했다.Button 컴포넌트props 타입 정의text, type, onClick 세 가지 props의 타입을 명시적으로 정의했다.type ButtonProps = { text: string; type: "DEFAULT" | "POSITIVE" | "NEGATIVE"; onClick: () => void;};export defau..

문제 상황Vite + TypeScript 환경에서 tsconfig.json에 정의된 절대 경로 별칭(@) 을 사용하여 모듈을 import했는데 오류가 발생했다. 원인 분석절대 경로를 설정할 때 기존에 CRA에서 사용하던 방식과 똑같이 tsconfig.json에 설정을 해주었었다.{ "paths": { "pages/*": ["pages/*"], "components/*": ["components/*"], "util/*": ["util/*"] },}그런데 알고보니 이 설정이 타입스크립트에만 유효하고, Vite는 이를 직접적으로 해석하여 모듈을 로드하지 않는다고 한다. 각각의 역할tsconfig.json의 paths: 타입스크립트가 타입 검사를 위해 사용vite.config.ts의 reso..

이전에 만들었던 리액트 프로젝트 Emotion Diary를 마이그레이션 하려고 한다. 기존의 프로젝트는 강의를 따라서 React와 CSS, LocalStorage를 이용해 만든 반응형 웹 애플리케이션이다.일기는 날짜와 감정, 그날의 기록으로 구성되어 있고, 기본적인 CRUD 기능과 정렬 및 감정 필터링 기능을 구현했었다.이 프로젝트에 최신 기술 스택을 반영하고 추가 기능을 구현해서 나만의 새로운 AI 감성 일기장을 만들어보려고 한다. 기술 스택 변경빌드 도구CRA(Create React APP)에서 Vite로 변경하려고 한다.Vite는 CRA보다 개발 서버 시작 시간과 빌드 시간이 훨씬 빠르다.(미리 번들링을 하지 않고 네이티브 ES 모듈을 활용하기 때문이다.)소스 코드를 수정했을 때 변경 사항이 브라우..