072DATA

Toast란? Toast는 화면의 특정 위치에 잠깐 나타났다가 사라지는 간단한 알림 메시지를 제공하고사용자에게 빠르게 정보를 전달하거나 작업의 피드백을 제공하기 위해 사용됨 특징 일정 시간 동안만 화면에 표시된 후 자동으로 사라짐에러, 성공, 경고 등의 간단한 상태 메시지를 전달하는 데 적합함팝업과 달리 사용자의 작업을 방해하지 않으며 인터랙션이 필수가 아님 커스텀 상단, 하단, 왼쪽, 오른쪽 등 화면의 어느 위치에 표시할지 설정할 수 있음토스트 메세지가 사라지는 시간을 설정할 수 있음필요에 따라 사용자가 수동으로 닫을 수 있도록 닫기 버튼을 추가할 수 있음 사용 예시 성공 메시지: 데이터 저장, 사용자 로그인 등 성공적으로 작업이 완료되었을 때.에러 메시지: 네트워크 오류, 잘못된 입력 등 실패한 작업..

공부하다보니 상태 관리 라이브러리에 대해서 정리하면 도움이 될 것 같아서 정리해보려고 한다  상태 관리의 필요성리액트에서는 컴포넌트의 상태를 props와 state를 통해 관리하는데다음과 같은 상황에서는 효율적인 상태 관리가 어렵다.여러 컴포넌트가 동일한 상태를 공유해야 하거나 상태 구조가 복잡해질 때.컴포넌트 트리 구조에서 상태를 여러 단계에 걸쳐 전달해야 할 때 (prop drilling이라고 함).로그인 정보나 테마 설정 등 전역에서 사용되는 상태를 관리할 때.이러한 문제를 해결하기 위해 상태 관리 라이브러리를 사용함각 라이브러리마다 특징과 장단점을 가지고 있고프로젝트에 알맞은 도구를 선택하는 것이 중요하다고 생각한다  Context API Context API는 리액트에 내장된 상태 관리 기능인데..

오늘은 useSuspenseQuery(그리고 React Suspense)와 ErrorBoundary를 사용하여비동기 데이터를 요청할 때 로딩과 에러 처리를 효율적으로 다뤄보겠슨비다. useSuspenseQuery 란..? React Suspense와 Tanstack Query를  함께 사용하여데이터 로딩 상태를 관리하는 훅입니다. useQuery와 비슷하지만 Suspense와 함께 작동합니다.기본적으로 Suspense에서 로딩 상태를처리하고 useSuspenseQuery는  성공적인 응답 데이터를 반환할 때까지컴포넌트의 렌더링을 중단하는 역할입니다!  여기서 React Suspense는 비동기 데이터를 가져올 때 동안 UI를 렌더링하지 않고 대기하는 기능입니다따라서 Suspense를 사용하여 로딩중이라는..

오늘은 팀원분이 구현해주신 로그인 기능에서 로그인된 유저의 정보를 props로 전달하지 않고zustand를 사용하여 유저의 정보를 전역 상태로 관리하는 과정을 기록해볼게요 API 요청export const login = async (userData) => { const response = await axios.post(`${API_URL}/login`, userData); return response.data;}; 로그인 핸들러 const handleLogin = async (formData) => { try { const loginData = await login(formData); localStorage.setItem("accessToken", loginData.acces..

북마크 구현하기  북마크 기능을 구현하기 위해서 유저가 게시물에 북마크를 누르면 해당 게시물에 유저 아이디를 담아서 내가 누른 북마크의 데이터를 불러오고이미 눌러진 북마크에 대해선 UI를 북마크 취소로 변경시켜 UX를 향상 시킬 수 있도록 구현하기로 했다  원래 게시물에 유저의 아이디를 담는 형태가 아닌 유저에 게시물을 담는 형태가 일반적이지만캠프에서 제공되는 데이터 베이스에 유저의 정보를 관리하고 있기 때문에 게시물에 담아북마크 데이터를 관리할 수 있도록 이 방법을 사용했다. 게시물 불러오기const fetchPlaces = async () => { try { const response = await axios.get(API_URL); return response.data; } catch..