주니어에서 시니어로

기존 프로젝트는 Create React App(CRA)으로 시작했다. 하지만 2월 14일, CRA는 공식적으로 Deprecated 되었다.React 공식 문서에서도 이제 CRA를 권장하지 않는다. 이제 보안 업데이트나 호환성 패치 외에 추가 개선은 없다. 상황을 인지하면서도 바쁘다는 핑계로 미뤄왔다. 그런데 프로젝트가 커지면서 로컬 개발 서버 구동 시간은 점점 늘어나고, 빌드와 배포 시간도 함께 늘어났다.생산성이 떨어지는 게 느껴졌다. 그 시간을 기다리는 내 인내심도.. 이제 마이그레이션을 미룰 수 없다. 마이그레이션 과정 1. 플러그인 설치npm i --dev vite @vitejs/plugin-react 2. vite.config.js 작성import { defineConfig } from 'vite..

진행 중인 리액트 프로젝트를 타입스크립트로 바꾸고 있는데,객체의 타입을 줄 때 어떤건 type으로 주고, 어떤건 interface로 주기에 무슨 차이인가 알아보게 되었다.확장interfaceinterface Person {  name: string;  age: number;}interface Student extends Person {// 확장(상속)  school: string;}const hello: Student = {  name: 'hello',  age: 11,  school: 'world'} typetype Person {  name: string;  age: number;}type Student = Person & { // 확장(상속)  school: string;}const hello: S..

개발을 하면서 기존 pagination으로 관리되던 리스트 목록을 페이지 넘기지 않고 한 스크롤에서 보기 편하게 됐으면 좋겠다는 요청이 들어왔다. 리스트 목록이 적으면 상관이 없으나, 몇백 개의 리스트를 한 스크롤에 한 번에 불러오면 렌더링 시의 속도 면이나 자원 면에서도 좋지 않다고 판단됐다. 그래서 무한 스크롤로 구현하되, 현재 보고 있는 페이지만 점차 렌더링되도록 하기로 했다. chatGPT에 물어본 결과 현재 사용중인 react 에서는 react-virtualized와 react-window를 많이 사용하고 있는 듯 했다. 그 중 react-window가 용량이 작아 비교적 간단한 구현에서는 유리하다고 생각되어 사용하려고 했다. 하지만 고정 높이를 사용해야 하는 단점이 있었다. 높이의 경우 유동적..