발견한 에러위도와 경도, Google Map API를 사용해 현재 유저의 위치를 반환하는 역지오코딩 함수 FetchAddress를 만들었다.const FetchAddress = () => { return new Promise((resolve, reject) => { if ('geolocation' in navigator) { navigator.geolocation.getCurrentPosition( position => { const { latitude, longitude } = position.coords; const apiKey = import.meta.env.VITE_Google_API_KEY; fetch( ..
낙관적 업데이트낙관적 업데이트란 UX를 위해 빠르게 UI를 갱신하거나 업데이트하는 방법 중 하나로, 어떤 작업에 대한 응답을 서버로부터 받기 전에 해당 응답이 성공적으로 돌아올 것이라고 가정(낙관적)해서 먼저 업데이트를 진행한다. 만약 실패한다면 실행했던 낙관적 업데이트를 롤백하면 된다. 여태까지 작업했던 웹 애플리케이션은 이벤트를 CRUD하는 구조였는데, 이벤트의 제목을 수정하면 새로고침을 해야만 수정된 내용이 반영되는 불편함이 있다. 우리는 수정하고 [확인]버튼을 누르면 바로 수정된 내용이 반영되어 보여지길 원한다. 이 때 onSuccess로 쿼리를 무효화 시켜서 구현하려고 하면 변형이 완료될 때까지 기다려야 하는 불편함이 있다. 또 이벤트의 제목이 빈 문자열이면 에러가 뜨기 때문에 이 부분을 고려해..
useMutationTanStack Query로 데이터를 가져오는 것 뿐만 아니라 새 이벤트 생성같이 데이터를 전송하는 것도 가능하다.폼을 제출해 데이터를 전송하는 예제를 통해서 데이터를 전송하고 수집해보자! 먼저 아래와 같은 api를 http.js에 추가해준다.export async function createNewEvent(eventData) { const response = await fetch(`http://localhost:3000/events`, { method: 'POST', body: JSON.stringify(eventData), headers: { 'Content-Type': 'application/json', }, }); if (!response.o..
동적으로 쿼리 사용하기input에 검색어를 입력하고 검색하면 해당되는 데이터를 받아오려고 한다.이전 게시물에서 분리해두었던 http.js의 url에 쿼리 파라미터를 추가해 동적인 쿼리를 만들어보자. export default function FindEventSection() { const searchElement = useRef(); function handleSubmit(event) { event.preventDefault(); } return ( Find your next event! Search Please enter a search term and to find events..
useQuery 사용하기npm install @tanstack/react-queryyarn add @tanstack/react-query 먼저 TanStack Query 사용을 위해 설치를 해준다. 강의를 따라가면서 기존 코드에서 useQuery를 도입해보자. NewEventsSection이라는 컴포넌트에는 커스텀 상태 관리와 useEffect hook이 있다.컴포넌트가 마운트 될 때마다 fetchEvents라는 함수가 실행된다. 이 함수가 실행되면서 setIsLoading(true)가 되고, response 또는 error를 받아 그에 맞는 content를 보여준다.export default function NewEventsSection() { const [data, setData] = useStat..
unknown 타입의 error 객체를 만나다커피빈 클론 중 로그인 폼을 제출했을 때, 실패 시 error status에 따라 적절한 alert을 띄우려고 한다.이 때 try catch문으로 erorr를 다루는데 error에서 자꾸만 빨간 줄이 떴다. error 뒤에가 보이지 않는데, 처음에는 error의 타입을 any로 줬다. 하지만 eslint에서 에러를 내기도 했고 (Unexpected any. Specify a different type 라고 off를 하지 않았다.), 되도록 any는 지양하려고 해서 하라는대로 unknown을 주었다. 그런데 error의 타입을 unknown으로 지정했는데도 자꾸만 error 타입은 unknown이야! 이런다.아니 unknown으로 했잖아 왜 그러는데! 하다가 ..
들어가기(v4부터 다른 프레임워크도 지원함에 따라 더 이상 React Query가 아니라 TanStack Query가 되었지만 여전히 많은 유저들이 React Query라고 하는 것 같다. 나도 그게 더 손에 붙지만 공식 문서에 TanStack Query로 명명되어 있으므로 앞으로는 TanStack Query라고 하겠다.) 최근 '좋은 상태 관리'에 대한 고민을 하고 있다. 이전에 작업한 곰곰 다이어리를 리팩토링하려고 하는데 상태가 매우 더러워 손을 댈 엄두를 내지 못하고 있기 때문이다. 클라이언트에서 쓰는 상태와 서버 데이터를 받는 상태들이 복잡하게 섞여 있는 게 가장 큰 이유인데, 이걸 어떻게 개선하면 좋을지 알아보다 TanStack Query를 적용해보면 좋겠다는 생각을 하게 됐다. 상태란?먼저 맨..
들어가기 예전부터 React로 개발하면 맨 윗줄에 import React from 'react'를 쓰는 게 거의 관행이었다. 뭔가 왜? 라는 의문을 가질 것도 없이 그렇게 해야 React를 쓸 수 있다고 이해했기 때문이었고, 단축키인 rafce를 사용하면 알아서 import React from 'react'가 포함된 화살표 함수 컴포넌트를 만들어주기 때문에 크게 불편함을 느끼지 못하고 있었다. 그런데 어느 순간부터 import React from 'react'에 밑줄이 쳐지면서 아래와 같은 메세지가 생겼다. 이게 불편하다는 걸 인지하게 된 첫 번째 이유는 "안 쓰고 있는데... 왜 이걸 import 해야 하지?" 라는 의문이었다. 두 번째로는 저걸 지우지 않은 상태로 Vercel을 사용해 빌드를 했더니 ..
들어가기 프로젝트의 규모가 커지고 관리해야 할 상태가 더 많아진다면 여러 가지 문제가 생길 수 있다. 먼저 리듀서 함수의 액션 타입(식별자)에서 오타가 난다거나, 식별자의 이름이 충돌되는 경우가 그렇다. 또 데이터와 상태가 많아질수록 리듀서 함수의 길이가 점점 길어지면서 유지보수하기 어려워질 수 있다. const counterReducer = (state = initialState, action) => { if (action.type === 'plus') { return { counter: state.counter + 1, showCounter: state.showCounter, }; } if (action.type === 'minus') { return { counter: state.counter - ..
들어가기 이전 글에서 + 버튼과 - 버튼을 눌러 1씩 증감하는 카운터를 만들었다. 매우 단순하게 하나의 action을 다뤘는데, 지금부터는 아주 약간 더 다양한 것을 하려고 한다. 예를 들어 1가 아니라 5씩 증가하는 버튼이나, 카운터 버튼이 보였다/보이지 않는 토글 같은 것은 어떻게 만들 수 있을까? payload 먼저 5씩 증가하는 버튼을 만들고 싶다면 어떻게 해야 할까? if (action.type === '5 plus') { return { counter: state.counter + 5, }; } 물론 이렇게 해도 상관 없지만, 이는 확장성이 떨어진다. action에 원하는 속성을 추가하는 더 좋은 방법이 있다. action은 객체라는 점을 기억하고 가자. const morePlusHandler..
