TypeScript

지난 프로젝트에서 Vite (비트) + Typescript 로 리액트 프로젝트를 진행하며 상태관리 툴로 리액트 리덕스를 사용하였다. 타입스크립트 리액트 프로젝트에서 리덕스를 사용하는 방법을 정리하고 또 언제 리덕스를 사용하면 좋은지 작성해 보고자 한다. 지난 프로젝트 폴더 구성이다. 기능별로 store을 나누어 생성했고, index에서 관리하였다. 0. 라이브러리 설치 npm install @reduxjs/toolkit react-redux 1. store 생성 store/index.ts import { configureStore } from "@reduxjs/toolkit"; export const store = configureStore({ reducer: { }, }); export type Roo..

리액트와 타입스크립트 환경에서 캘린더를 구현할 때 FullCalendar 라이브러리를 이용하여 개발하게 되었다. https://fullcalendar.io/ FullCalendar - JavaScript Event Calendar Open Source... With over 10 years of open source and over 120 contributors, FullCalendar will always have a free and open source core. Learn more fullcalendar.io 기본적인 컴포넌트 구성을 파악하고 적용해 보고자 한다. 기본 제공 템플릿의 UI다 나는 Monthly 페이지만 필요했기 때문에 필요 없는 상단 버튼들은 삭제하여 주는 등 커스텀 하여 사용 할 ..

협업 프로젝트를 진행하며 여러 오류들과 만나고 있다. 이번에는 리엑트 - 타입스크립트 프로젝트를 진행하며 다른 사람의 코드를 머지했을 때 만날 수 있는 Property 'div' does not exist on type 'JSX.IntrinsicElements'. 오류에 대한 설명과 해결 방안에 대해 작성해 보도록 하겠다. 오류가 발생하는 환경은 1. React 2. Typescript 3. Vite 프로젝트를 시작하거나 수정되지 않은 템플릿을 사용했을 때 발생한다고 한다. 이에 대한 해결 방안은 1. tsconfig.json 파일 수정 "moduleResolution": "Node" 2. VS Code Typescript WorkSpace 버전 선택 3. npm Dependency 재설치 npm i 나..