본문 바로가기
반응형

전체 글

 (118)
[개인 프로젝트] MBTI 테스트 MBTI 테스트 📔본인의 MBTI를 테스트해 볼 수 있는 사이트입니다. 배포 링크 : https://mbti-test-app-six.vercel.app/깃허브 링크 : https://github.com/smu06030/mbti-test-app 파일 구조 🗂️📦src┣ 📂assets┣ 📂api┣ 📂components┃ ┣ 📂Header┃ ┣ 📂Layout┃ ┣ 📂Result┃ ┗ 📂Test┣ 📂constants┣ 📂mock┣ 📂pages┃ ┣ 📂private┃ ┗ 📂public┣ 📂queries┣ 📂routes┣ 📂store┣ 📂utils┣ 📜App.jsx┗ 📜main.jsx 주요 기능💡구현 사항✅ 회원가입, 로그인, 프로필 관리 기능 구현JWT 인증 서버를 사용하여..
[트러블 슈팅] MBTI 테스트 (Glitch에서 JSON-server의 응답 속도 차이) Glitch에서 JSON-server의 응답 속도 차이발생한 오류 🔥MBTI 테스트 앱을 개발하며 Glitch 플랫폼에서 JSON-server를 배포하여 사용했습니다. 하지만 로컬 환경에서의 실행 속도와 비교했을 때 상당한 지연이 발생하는 문제를 경험했습니다. 해결 과정 🔎로컬에서 `json-server --watch db.json --port 5000`으로 서버를 구동했을 때와`Glitch`에서 서버를 구동했을 때와 응답 시간이 거의 10배 이상 차이 나는 현상을 `console.time`을 통해 확인했습니다. 로컬서버 `네트워크 지연` : Glitch 서버가 해외에 위치하고 있기 때문에, 데이터 요청과 응답에 상당한 네트워크 지연이 발생했습니다.`리소스 제한` : Glitch는 무료 플랜에서 제한..
옵저버 패턴 알아보기 옵저버 패턴이란? 📖객체의 상태 변화를 관찰하는 옵저버(Observer)들이 있고, 관찰 대상이 되는 객체(Subject)가 상태 변화가 있을 때 옵저버들에게 알리는 디자인 패턴입니다. ❗간단하게 설명하면어떤 데이터나 상태의 변화가 일어났을 때, 실시간으로 구독자들에게 알려주는 방식 `Subject (주체)` : 상태를 보유하고 있고, 변화가 일어났을 때 옵저버들에게 알리는 역할`Observer (옵저버)` : 주체의 상태 변화를 감지하고 그에 따라 행동 옵저버 패턴 직접 만들어보기 📖subject.jsconst createSubject = () => { const observers = new Map(); const addObserver = (key, observer) => { if(!obs..
[개인 프로젝트] MBTI 테스트 - useQuery, useMutation 커스텀 훅 리팩토링 리팩토링 이유 📖Tanstack Query를 사용하면서 여러 컴포넌트에서 중복되는 로직이 발생해 유지보수가 어렵다는 생각이 들었습니다. 그래서 `useQuery`와`useMutation`을 커스텀 훅으로 리팩터링 하고 `queryKey`를 상수화 해 코드의 가독성과 재사용성을 높인 방법에 대해서 공유해보려고 합니다. 기존 코드 📖useQuery, useMutation기존에는 `useQuery`와 `useMutation`을 각 API 호출마다 직접 사용했는데, 여러 컴포넌트에서 중복되는 로직이 많아지고 가독성이 떨어 지는 문제가 있었습니다.const { data: results, isLoading } = useQuery({ queryKey: ["results"] queryFn: getTestResu..
Zustand 동작 원리 알아보기 오늘은 zustand가 내부적으로 어떻게 동작하는 알아보기 위해 zustand github를 확인해 봤습니다.  GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React🐻 Bear necessities for state management in React. Contribute to pmndrs/zustand development by creating an account on GitHub.github.com 파일이 타입스크립트로 작성되어 있는데 보기 편하기 위해 GPT의 힘을 빌려 자바스크립트로 변경했습니다.  react.ts 📖`react.ts`파일의 전체 코드이고, React와의 연동을 해줍니다.import ReactExp..
Zustand 알아보기 Zustand 📖Zustand는 React 애플리케이션에서 상태 관리를 쉽게 할 수 있게 도와주는 가벼운 상태 관리 라이브러리입니다.설치yarn add zustand 사용 방법사용 방법은 이게 끝입니다! 정말 간단하죠!// src > store > bearsStore.jsimport { create } from "zustand";const useBearsStore = create((set) => ({ bears: 0, increasePopulation: () => set((state) => ({ bears: state.bears + 1 })), removeAllBears: () => set({ bears: 0 }),}));export default useBearsStore;// src > App...
TanStack Query 알아보기 3 (Query Cancellation, Optimistic Updates, Prefetching, Paginated, Infinite Queries) Query Cancellation 📖불필요한 네트워크 요청을 제거하기 위해 사용합니다. 대용량 fetching을 중간에 취소하거나 사용하지 않는 컴포넌트에서 fetching이 진행 중이면 자동으로 취소시켜 불필요한 네트워크 비용을 줄일 수 있습니다. queryFn의 매개변수로 Abort`Signal`을 받을 수 있고 이를 활용해 Query 취소가 가능합니다. 사용 방법queryFn은 매개변수로 `QueryFunctionContext`객체를 받습니다.export const getTodos = async (queryFnContext) => { const { queryKey, pageParam, signal, meta } = queryFnContext; // queryKey: 배열형태의 쿼리키 // pag..
TanStack Query 알아보기 2 (동작 원리) SWR 전략 📖stale을 사전에 검색해 보면 `신선하지 않은``오래된`이라는 뜻을 가지고 있습니다. 말 그대로 `SWR(stale while revalidate)`은 최신 데이터가 도착하기 전까지 기존 캐시 데이터를 사용하는 전략입니다. ❓그런데 이`캐시 데이터`어디에 보관되는 걸까요캐시 데이터 📖TanStack Query는 `캐시 데이터`를 전역적으로 관리합니다. `QueryClientProvider`를 사용해 React 애플리케이션 전체에서 캐시 데이터에 접근할 수 있습니다. 이렇게 될 수 있는 이유는 TanStack Query는 내부적으로 `React Context API`를 사용해 구현되어 있어서 모든 자식 컴포넌트가 캐시 데이터에 접근할 수 있기 때문입니다. 데이터 흐름 ✨ 주요 흐름 ✨ ..

티스토리툴바