어쩌다가 도입하게 되었는지? 최근 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..
서론 회원가입 시 약관 동의, 사용자 유저 정보 등에 관한 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..
오늘은 React Vite TypeScript 환경에서 SPA 프로젝트 세팅하는 방법에 대한 이야기를 해보려고 한다. (feat. chatGBT) 내가 하고 싶은 것 현재 레거시 프로젝트는 Creat-React-App 으로 SPA 프로젝트가 만들어져 있다. CRA는 번들러로 Webpack 을 사용하기 때문에 빌드 시 속도가 상대적으로 esbuild 보다 느리다. 그렇기 때문에 React Vite 환경에서 SPA 프로젝트로 마이그레이션을 시도하였다. (이참에 JavaScript 도 TypeScript로 마이그레이션!) 방법 React Vite로 SPA를 만드는 경우가 많지 않나 보다... 구글링을 해도 내가 원하는 코드를 찾기가 어려웠다 ^_ㅜ chatGBT에게 물어봤더니 아주 친절하게 답변을 해주었다. ..
useMemo와 useCallback React에서 제공하는 Hook API 중 하나이다. 컴포넌트의 렌더링 성능을 최적화하는 역할을 한다. 컴포넌트는 언제 렌더링 될까요? 자신의 state가 변경되거나, 부모에게서 받은 props가 변경 되었을 때마다 다시 렌더링 된다. 심지어 자식 컴포넌트에서 렌더링 최적화를 위한 별도의 코드를 추가하지 않으면, 부모에게서 받는 props가 변경되지 않았더라도 다시 리렌더링 된다. 예시 코드 https://codesandbox.io/s/angry-bash-ovd8pk?file=/src/App.js angry-bash-ovd8pk - CodeSandbox angry-bash-ovd8pk by leehwarang using react, react-dom, react-sc..
Comment