🚨 문제큰 문제는 아니고 useQuery를 사용했을 때 `isPending` 상태일 때 로딩 컴포넌트를 리턴하는데 `data`가 undefined일 수 있다는 에러가 발생했다. 1차로 시도했던 방법은 삼항연산자를 사용해서 falsy한 값일 경우 명시적으로 `null` 값을 할당하는 방법으로 변경했다. /** 실제 코드는 아닌 예시 코드 */// 에러 났던 코드const { data, isPending } = useGetDataQuery(); // 커스텀 useQueryif(isPending) return Loading . . .console.log(data) // 여기서 undefined일 수도 있다는 에러 발생함타입스크립트는 `isPending`일 경우 return을 해주는 것과 관계없이 `useQ..
간략한 팀프로젝트 소개카카오 지도 api를 이용한 등산 관련 커뮤니티 플랫폼특정 산에 같이 등산할 사람을 모집하고, 신청할 수 있다. (벙개)이전 리팩토링 과정(1) - [스켈레톤 UI] 화면 깜빡거림 해결이번 리팩토링은 페이지가 있는 게시글 목록에서 다른 페이지로 이동할 경우 화면이 깜빡거리는 현상이 발생하여 `tanstack query` 의 `prefetchQuery` 를 이용하여 해당 문제를 해결했다. 💡 변경 방법기존에는 페이지를 이동하고 나서 해당 페이지의 데이터를 요청했다. 따라서 필연적으로 깜빡거리는 문제가 발생했다.따라서 미리 데이터를 요청하는 `prefetchQuery` 를 사용해보기로 했다. 방법은 생각보다 어렵지는 않았다. `onMouseOver` 이벤트를 이용해서 페이지 버튼에..
간략한 팀프로젝트 소개카카오 지도 api를 이용한 등산 관련 커뮤니티 플랫폼특정 산에 같이 등산할 사람을 모집하고, 신청할 수 있다. (벙개)💡 화면 깜빡거림벙개 상세페이지에서 필요한 api 데이터는 다음과 같다. 상세 페이지 데이터상세 페이지 데이터에 등록된 산 데이터상세 페이지 데이터에 등록된 신청자 목록총 3번의 네트워크 요청을 필요로 한다. 신청자 목록(3번) 같은 경우 join 으로 불러오려 했으나 `json-server`를 사용했고 공식문서를 참조하여 join을 시도해봐도 빈 배열로만 데이터를 불러와지고 해결이 안되어 어쩔 수 없이 한 번 더 불러오는 과정을 거쳤다. 🚨문제점 사용자가 상세페이지를 들어오면 네트워크 요청이 처리되고 리렌더링이 발생하면서 화면이 깜빡거리는 모습을 볼 수 있다..
리액트를 배우면서 반복문으로 출력된 dom 요소의 경우 `key`를 명시해주어야 하는 것을 알고 있었다. 하지만 지금까지 `key` 를 쓰지 않거나, 대충 사용했을 경우에 대한 문제를 직면해본적이 없어서 그냥 저냥 콘솔에 `key`가 잘못 되었다는 에러를 숨기기 위한 목적 정도로만 사용을 해왔었다. 🚨 토스트 라이브러리 구현하지만 토스트 라이브러리를 직접 만들어보고, 커스텀하는 작업을 진행중에 `key` 를 쓰지 않아 버그가 발생했다. 토스트 라이브러리를 사용해본 사람은 알겠지만 순차적으로 쌓였다가 하나씩 사라지게 된다. 토스트 요소의 시간이나, 메시지, 색상 등이 전부 동일하다면 `key`를 `index`를 주어 사용해도 문제가 생기지 않는다(정확히는 문제가 생겨도 보이지 않는다). 하지만 이번에..
💡 Suspense"`` lets you display a fallback until its children have finished loading.""``를 사용하면 자식이 로딩을 완료할 때 까지 폴백을 표시할 수 있습니다." https://react-ko.dev/reference/react/Suspense 📍 fallback로딩이 완료되지 않은 경우 실제 UI 대신 렌더링할 대체 UI이다. 어떤 React 노드를 사용해도 되지만 주로 로딩 스피너, 혹은 스켈레톤 UI 처럼 가벼운 플레이스홀더 뷰르를 사용한다. 즉, Suspense는 `children` 이 중단되면 자동으로 `fallback` 으로 전환되고, 데이터가 준비되면 다시 `children` 으로 전환된다. 💡 useQuery vs us..
`img`태그에는 alt 속성이 있다. 나는 페이지의 디테일(사용자 경험)의 문제만이라고 생각했고, 크게 중요한 속성이라고 생각하지 않았다. 하지만 `SEO`까지도 영향을 줄 수 있다는 걸 알게되어서 습관을 잘 갖춰야 되겠다고 생각이 들었고, 간단하게 정리할 겸 글을 작성함 💡 SEO (검색 엔진 최적화)SEO란 정말 간단하게 구글 같은 검색 엔진에 친화적으로 사이트를 제작하는 것을 의미한다. 그럼 어떻게 최적화를 할까? 가장 쉽고 바로 적용할 수 있는 방법이 바로 메타데이터(title, description 등), 시맨틱 태그 그리고 img의 alt 속성 같은 것들을 목적에 맞게 명확하게 작성하는 것이다. 웹 크롤러가 돌아다니면서 페이지의 정보(메타데이터)를 수집하는데 그 때 해당 정보 같은 것 들..
axios 로직을 유지보수, 확장성 등의 이유로 인스턴스를 생성해서 만들 수 있다. 이 때 create를 이용해서 만드는데 (만드는 방식은 생략) 엔드포인트까지 넣어서 만든 경우 `get` 요청은 매개변수의 생략이 가능하다. 단 `body` 등 옵션이 필요한 그 외의 메서드들은 매개변수를 생략할 수 없는데 이때 첫 번째 매개변수로 `'/'`를 넣어주면 된다. 💡 예시getconst api = axios.create({ baseURL: "http://localhost:4000/posts",})const getPosts= async () => { await api.get(); /* 생략 */}`get` 메서드로 모든 게시글을 가져오는 경우 `api.get()`만 호출하면 된다. post 잘못된..
🚨 useRef + IntersectionObserver + state 충돌원인이 맞는지는 모르겠지만 `Ref`와 `Observer` 를 넣어준 DOM 요소에서 사용하는 state값을 변경하려고 하니 데이터는 변경이 되는데 리렌더링은 되지 않는 문제가 발생했다. 문제를 찾게 된 계기는 혹시나 해서 ref를 지워봤더니 setState가 제대로 동작을 했다. 문제 코드{displayedPosts.map((post, index) => ( // 기타 생략 ..setState가 안 되던 state가 `displayedPosts` 이다. 데이터 구조는 대강 이렇게 생겼다. displayedPosts 구조const [displayedPosts, setDisplayedPosts] = useState([ {..
🚨 에러 내용statusCode: '400'error: 'InvalidKey'message: 'Invalid Key: 어쩌구저쩌구파일명.jpg' 에러에 대한 코드는 다음 링크에서 확인 가능하다. [Supabase] - 스토리지 에러 코드storage에 사진 파일을 저장하려고 하니 위와 같은 에러가 나온다. 요청의 형식이 올바르지 않다는데 내 경우에는 파일명이 한글로 되어있어 나오는 오류였다. 즉, 파일명만 영어나 숫자 등으로 유니크하게 변경해서 전달하면 해결 된다. 일단 임시 방편으로 다음과 같이 처리해서 올리면 될 것 같다.const fileName = `post_img_${Date.now()}.png`;파일명을 현재 시간으로 치환하여 업로드해주니 해결되었다. 단 동시다발적으로 매우 많은 데이터를 ..
React + Vite + JS 프로젝트를 작업하고 Vercel에 배포를 하니 간헐적으로 404에러가 발생했다. 이유가 궁금해서 좀 더 테스트를 진행해보니 랜덤하게 발생하는게 아니고 `navigate`나 ``로 이동하지 않으면 해당 에러가 발생하는 것 같았다. 예를 들어 `/signin` 이라는 path에 접근할 때 버튼 클릭 등으로 이동하는게 아닌, 직접 url에 입력해서 이동하려하면 발생했다. 🚨 404 해결해결은 매우매우 간단하게 해결했다. 프로젝트 루트 경로에 `vercel.json` 이라는 파일을 생성하고 아래 내용을 복붙한다. vercel.json{ "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }]}
💡 .env`.env` 파일은 환경 변수를 설정하기 위해 사용된다. 쉽게 말해 프로젝트 전역에서 참조할 수 있는 값들을 모아놓은 파일이라고 생각하면 된다. 여러가지 목적이 있겠지만 가장 큰 2가지 이유는 다음과 같다. 1. 민감한 데이터를 보관한다.작업자이외의 사람들은 `.env`의 값들을 확인할 수 없다. (`.gitignore`필수 설정) 2. 프로젝트 환경에 맞게 데이터 설정 가능개발환경, 로컬환경, 테스트, 배포.. 등의 환경마다 값을 다르게 사용할 수 있게 된다.예를 들어 개발 환경에서는 어떤 데이터들을 불러올 때 더미데이터를 불러오는 api를 사용하고, 배포할 때는 실제 데이터의 api를 사용한다고 가정. 원래라면 api 주소값을 할당한 모든 부분을 수정해야 하지만 `.env`를 잘 사용하..
회원가입할 때 Provider메뉴의 Email - Confirm email 이 활성화 되어 있으면 발생한다. 이게 켜져 있으면 회원가입할 때 실제 이메일로 인증 메일을 보내고, 수락을 해야 회원가입이 완료 된다. 좋아 보이지만 무료 요금제는 하루에 제한이 있으며(시간당 3건인가?) 초과된 경우 발생한다. 🚨 끄는 방법1. Authentication -> Providers메뉴 이동2. Email 선택3. Confirm email 끄기4. save