무야홍 ~

개요 🔔 프로젝트를 진행하다보면, 종속성(Package) 을 설치 해야하는 경우가 다반수 이다. 그리고 npm install 을 통해 기존에 의존하고 있는 패키지들이 ./node_modules 안에 담기는 것을 확인할 수 있다. 만약 로컬 환경에서 개발 중, 설치한 의존성들이 충돌하여 캐시를 제거하고 .lock 파일과 ./node_modules 폴더를 제거한 기억이 있지 않은가 ❔ 그리고, 이를 제거할 때 시간이 다소 오래 소요되진 않았던가 ❔ 위와같은 문제를 해결하기 위해 패키지 매니저 들은 점차 보완이 되고 있으며, pnpm 까지 등장한 것 이다 ❗ 라는 포문으로 해당 포스팅을 시작하려 한다. 패...

개요 🔔 프로젝트를 진행하다 보면, 아래와 같이 경로가 점점 깊어지는 현상을 겪었던 적이 있을 것이다. 현재는 단 두 deps 만의 경로를 불러오고 있지만, 만약 뎁스가 깊어지고, 디렉토리가 다양해진다면 ../../../../../........ 의 형태와 같이 복잡하고 가독성이 떨어지는 형태로 구현이 될 것이다. 이를 해결하기 위해 아래와 같이 절대경로(@) 를 설정하는 방법을 이번 포스팅에 정리하고자 한다. vite.config.ts ⚡ 만약, 자바스크립트 환경으로 vite 앱을 생성했다면, vite.config.js 파일에만 옵션을 설정 해 주면 간단히 절대경로를 설정할 수 있다. i...

개요 🔔 리액트 서스펜스(React Suspense) 는, 앱에서 비동기적으로 데이터를 처리하고 관리하기 위해 사용하는 리액트의 새로운 기능이다. 서스펜스는 React 16 에서 처음 선보이고, React 18 에서 정식으로 추가 된 기능이라고 한다. Why Suspense ❓ 사용자에게 구현한 웹 페이지를 보여주기 위한 UI/UX 개선사항으로 스켈레톤 UI 를 접하고, 이를 구현하기 위해 삼항연산자를 통해 LoadingComponent 를 불러오는 형태로 진행했다. 하지만, 서스펜스를 사용하면 코드가 훨씬 직관적으로 리팩토링이 되며, 코드 스플리팅을 통해 웹 성능(최적화) 에도 유의미한 영향을 끼칠...