React Query가 없던 시절 리덕스를 사용할때는 서버에서 데이터를 가져온뒤 리덕스에 보관해서 전역상태로 보관했다.1. Server State란그래서 서버 상태를 다른 클라이언트 상태와 똑같이 취급했다.하지만 서버 상태(사용자 정보, 글 목록 등)의 경우 클라이언트가 소유하지 않는 정보이다.유저에게 가장 최신 버전을 화면에 표시하기 위해 서버에서 빌려온 것일 뿐이다. (데이터를 소유하는 것은 서버임)2. 기본값 설명먼저 React Query는 기본 staleTime이 0인 경우에도 매번 리렌더링할때 queryFn을 호출하지 않는다.staleTimequery(데이터)를 fresh하게 놔둘 시간(fresh -> stale 시간), 기본값 0staleTime 내에 다시 query 요청 시 fetch하지 않..
전체 글
1. 문제상황 및 설정 미리보기 import를 할때 파일 위치가 깊어질수록 "../" 의 압박이 심해진다. 위 import 경로에서 ../를 지워보자 2. tsconfig, vite.config 설정하기 src/ 내부 1-depth의 파일들을 절대경로로 import 하는 것을 목적으로한다. 2.1 tsconfig 1. baseUrl을 "./src"로 설정 (L9) - 타입스크립트가 코드 상에서 import 경로를 해석할때 설정한 경로를 기준으로하여 찾는다 2. paths를 "src/*": ["../src/*]로 설정 (L10 ~ L12) - 타입스크립트가 코드 상에서 import 경로를 해석할때 설정한 경로로 매핑하여 이해한다. - 설정 경로는 "baseUrl" 기준이라는 것에 유의하자. 2.2 vi..
1. 서울에서의 첫 자취 대학시절 4년 동안 기숙사에 살았었는데, 처음으로 혼자 살아본 1년이었다. 쓰레기 배출일 준수하기, 벌레 잡기, 막힌 세면대 뚫기, 방 습도 올리기, 화장실 배수구 냄새 차단하기, 방 꾸미기 등 살면서 느끼는 불편함들을 해결하고, 소소한 이벤트들을 경험하면서 인생 경험치들을 쌓을 수 있었다. 요리는 밖에서 사 먹는 경우가 대부분이라 생각보다 많이 하지 않았다. 조금 여유가 생긴 이제야 조금씩 해보는 중이다. 처음이라 그런지 기본적인 집안일들을 배워가는 게 즐겁다. 2. 우아한테크코스 우아한테크코스 5기 프론트엔드 과정을 수료했다. 열정적인 사람들과 함께할 수 있어서 행복했다. 걱정 없이 공부할 수 있는 게 좋았고, 내 생각을 공유하고 남의 생각도 들을 수 있는 환경이 가장 좋..
1. 문제상황 vite + react 기반의 프로젝트에서 실행 시 첫번째 페이지를 /products 로 리다이렉트 하고싶었다. App 컴포넌트는 뼈대인 Header 컴포넌트를 가지고 있고, Outlet을 이용해 나머지 페이지들을 렌더링한다. 처음에는 react router dom에서 제공하는 useNavigate 훅을 이용해서 구현했으나 useEffect가 거슬린다. 코드 자체가 명령적이고 App 내부에 숨겨져 있어 기능을 추적하기 까다롭다. 2. 해결방법 react router dom에서 제공하는 Navigate 컴포넌트가 있다. A element changes the current location when it is rendered. It's a component wrapper around useNa..
웹서비스는 존재하지 않는 URL로 접근할때 대체 페이지를 보여줘야한다. 웹 서버가 요청된 리소스를 찾지 못했음(Not Found)을 나타내는 HTTP 상태 코드인 404를 이용해 404페이지라고 부르기도한다. react-router-dom은 Router 컴포넌트에서 페이지를 관리하는데, 각 경로에 맞는 페이지 컴포넌트를 조건부 렌더링하는 식이다. 나머지 모든 경로(*)에 404페이지를 보여주면 간단히 목적을 달성할 수 있다. 왜 404페이지에 오게 되었는지 그 원인을 알려주면 더 사용자 친화적인 서비스를 만들 수 있다. 더하여 상황에 맞게 "홈으로 이동" 같은 버튼도 추가해주면 사용자가 서비스를 편하게 이어서 즐길 수 있고 원하지 않는 사용자 이탈도 줄일 수 있을 것이다.
1. 분석 이유 Modal이나 BottomSheet같은 Overlay는 브라우저에서 굉장히 자주쓰이는 컴포넌트이다. 나는 Overlay를 잘 사용하고 싶어 더 나은 사용 방법을 분석하고 앞으로 프로그래밍에 사용하고자한다. 2. 이전 Modal 로직 작성 방식 이전 프로젝트를 진행할때 사용했던 모달 열고 닫기 로직이다. 모달을 사용하는 App에서 isModalOpen 상태를 선언해서 Modal 을 조건부 렌더링한다. function App() { const [isModalOpen, setIsModalOpen] = useState(false); ... const handleRestaurantClick = (e: React.MouseEvent) => { ... setIsModalOpen(true); }; co..
1. 작성 계기 LocalStroage 값을 get, set 할 수 있는 훅을 만들었다. 만들면서 고려한 부분은 다음과 같다. LocalStroage 값을 변경했을 때 같은 LocalStroage를 바라보는 컴포넌트들도 동기화되어야 한다. 같은 탭이 아닌 다른 탭에서도 1번이 적용되어야 한다. 2. 로직 작성 기본적으로 LocalStorage는 Web API이기 때문에 useEffect에서 호출하여야 한다. 눈여겨볼 부분은 다음과 같다. window 환경에서만 동작하도록 가드: L16~18, L36~38 WindowEventMap 타입에 "local-storage" 커스텀 이벤트 타입 추가: L4~8 storage, local-storage 이벤트 발생 시 동기화를 위해 updateStorageChang..
1. 문제 상황 현재 동글은 스토리북을 로컬에서만 사용 중이다. 동글의 스토리북을 chromatic으로 쉽게 배포하여 사용하려고 했으나, organization 권한 문제로 배포할 수 없는 상태다. 2. 스토리북 빌드 파일을 gh-pages로 배포하자 GitHub는 GitHub Pages라는 정적 페이지 배포 환경을 제공한다. 정적 파일인 스토리북 빌드 파일을 배포해 보자. 3. GitHub Actions로 PR 날릴 때 Storybook 배포하기 매번 수동으로 빌드하고 배포하기보다는 자동으로 지속적인 배포를 하면 훨씬 편하다. GitHub Actions를 이용해 yml 스크립트를 작성해 보자. (vars.FE_DIRECTORY === ./frontend) 이제 PR을 날릴 때마다 스토리북 빌드와 배포가..