어쩌다가 도입하게 되었는지? 최근 AWS 프론트엔드 모임에서 Storybook에 대한 소개 발표를 들었다. 해당 기술을 현재 프로젝트에 도입하게 된다면 매우 실용적으로 활용할 수 있다는 생각이 들어서 대표님께 강력 어필을 하고, 결국 '당장 도입!!' 이라는 결과를 얻을 수 있었다. Storybook 도입 여정 Storybook 설치 공식 문서 https://storybook.js.org/docs/react/get-started/install Install Storybook Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, ..

서론 작년 취업 준비할 때 React Query를 공부할 때까지만 해도 공식 이름이 React Query 였는데... 이제는 TanStack Query 라는 새로운 친구가 되어버렸다 😂 기존에 공부했던 v3인 React Query 대신, 발 빠르게 업데이트된 TanStack Query로 무한 스크롤 기능을 한 번 구현해보고자 한다. (내 코드를 빠르게 레거시로 만들기는 싫어 🥺) Infinite Queries 공식 문서 https://tanstack.com/query/v4/docs/react/guides/infinite-queries Infinite Queries | TanStack Query Docs Rendering lists that can additively "load more" data onto..

🤔 왜 이런 고민을 하게 되었는가? 현재 JSON 파일들을 public 폴더에 넣고 관리하고 있었다. public path 를 짧게 단축시키기 위해 구글링을 하다가 asset 파일들을 public 폴더에 관리하는 것보다 src 폴더에 관리하는 것이 더 편리하다는 글을 종종 볼 수 있기 때문에 나도 이러한 고민을 하게 되었다. (아무 생각 없이 asset 파일을 당연하듯 public 폴더에 관리하던 나 자신 반성해...😂) 📂 public 폴더 사용하기 public 폴더는 정적 파일을 보관하기에 좋은 장소이다. 이유는 아래와 같다. public 폴더에 위치한 정적 파일은 빌드 후에 build 폴더에 복사된다. 따라서 빌드 이후에도 파일이 유지되며, 캐싱 문제도 해결할 수 있다. public 폴더는 어디에서..

🤔 내가 하고 싶은 것 기존에 매우 길었던 public path를 좀 더 단순화하여 나타내고 싶었다. 파일을 빌드할 때에도 콘솔에 다음과 같은 메세지가 나타났다. files in the public directory are served at the root path. Instead of /public/json/KoreaRegion/SigunguJSON.ts, use /json/KoreaRegion/SigunguJSON.ts. 기존의 public path import { IMetroCityTypes } from "../../../public/json/KoreaRegion/MetroCitiesJSON"; 변경하고 싶은 public path import { IMetroCityTypes } from "/json..

🤔 어떤 에러가 발생하였을까? 이전 글을 참고하면 좋다. https://programmerplum.tistory.com/199 [React 18] A component suspended while responding to synchronous input. (1) 🤔 어떤 에러가 발생하였을까? SignUpPC라는 부모 컴포넌트 안에 SignUpButton라는 자식 컴포넌트가 있다. 회원가입 버튼 클릭 시, SignUpButton 컴포넌트 안에서 Naver maps Geocoding을 통한 경도, 위도 정보 programmerplum.tistory.com 이전 글에서 { naver } = window; 위처럼 전역 변수로 네이버 객체를 가져오는 것 대신, const navermap = useNavermaps..

🤔 어떤 에러가 발생하였을까? SignUpPC라는 부모 컴포넌트 안에 SignUpButton라는 자식 컴포넌트가 있다. 회원가입 버튼 클릭 시, SignUpButton 컴포넌트 안에서 Naver maps Geocoding을 통한 경도, 위도 정보 가져오는 기능을 구현하던 도중, 다음과 같은 에러가 발생하였다. 에러 메시지 Uncaught Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition. at thro..

서론 회원가입 시 약관 동의, 사용자 유저 정보 등에 관한 state 값을 관리해야 하는 상황이 있다. [ 관리해야 할 상태 값들 ] 더보기 약관 동의 전체 동의 여부 이용 약관 동의 여부 개인정보 수집 및 이용 동의 여부 마케팅 수신 정보 동의 여부 사용자 유저 정보 휴대폰 본인인증 여부 사용자 정보 값 사용자 이름 값 사용자 생년 값 사용자 생월 값 사용자 생일 값 사용자 휴대폰 번호 값 사용자 아이디 값 사용자 닉네임 값 사용자 비밀번호 값 사용자 비밀번호 확인 값 사용자 사업자 여부 값 사용자 휴대폰 번호(거래용) 값 사용자 전화번호 값 사용자 이메일 값 사용자 도·시 값 사용자 시·군·구 값 사용자 상세주소 값 사용자 회사명 값 사용자 직급/직책 값 사용자 주요 사업 분야 값 사용자 정보 값 유..

마이그레이션 하는 방법 dependencies 설치 아래의 라이브러리를 설치하자. Vite @vitejs/plugin-react vite-tsconfig-paths vite-plugin-svgr npm install --save-dev vite @vitejs/plugin-react vite-tsconfig-paths vite-plugin-svgr vite-tsconfig-paths 설치하는 이유 Vite에 tsconfig 파일에서 절대 경로를 해결하는 방법을 알려주기 위해 vite-tsconfig-paths가 필요하다. 이렇게 하면 다음과 같이 모듈을 가져올 수 있다. // before import MyButton from '../../../components' // after import MyButto..