카카오 로그인을 구현하기 위해서 코드를 작성하고 있는데, 예상치 못한 부분에서 오류가 났습니다. 카카오톡 로그인은 위와 같은 과정으로 구현할 수 있습니다. 카카오 로그인에 대한 자세한 내용은 아래 공식문서를 참조하세요! Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 오류가 왜 났는지 결론부터 말씀드리자면, 인가코드로 토큰을 요청하는데 Strict-Mode 때문에, fetch 요청이 두 번 이루어 지게 되면서 오류가 난 것이었습니다. const Auth = () => { const params = useSearchParams(); const co..
저번 시간 SWR에 대해서 배워봤는데요, 많은 분들이 SWR대신 React Qeury를 사용하더라구요. 분명 더 좋다는 이야기가 많기는 한데, 구체적으로 어떤 차이인지 알아보기 위해서 공식문서를 뒤져가며 그 차이점을 알아보기 위해 노력했습니다. 이전 SWR에 대한 내용은 아래를 참고해주세요! [React] SWR이 무엇인가요? 우선 SWR을 알아보기 앞서 캐시에 대해서 알아보겠습니다. ❓캐시란 무엇인가 캐시는 데이터를 일시적으로 저장하는 메모리를 가리키는 용어입니다. 한 번의 요청에 비용이 큰 경우, 여러 번 요 lurgi.tistory.com 그리고 몇 일간 React Query와 SWR의 차이에 대해서 명확히 하고자 했지만, 제 지식의 한계로는 그 차이를 인지할 수 없었고, 간단한 코드를 작성하는 것..
우선 SWR을 알아보기 앞서 캐시에 대해서 알아보겠습니다. ❓캐시란 무엇인가 캐시는 데이터를 일시적으로 저장하는 메모리를 가리키는 용어입니다. 한 번의 요청에 비용이 큰 경우, 여러 번 요청을 하는 것 보다, 한 번의 요청 이후 캐시에 저장하여 재사용 하기 위한 전략입니다. ❓SWR이 무엇인가 SWR은 Stale-While-Revalidate의 약자로 HTTP 캐시 무효 전략을 뜻합니다. SWR은 우선적으로 캐시로 부터 데이터를 반환한 후, fetch 요청(Revalidate)이 필요한지 확인하고 요청을 합니다. 즉 캐시에 있는 데이터로 처리할 수 있다면, 굳이 요청을 하지 않는 것이죠. 그리고 반대로 사용자가 원하는 순간에 요청을 보내 새로 데이터를 받을 수 있습니다. 이를 통해 컴포넌트는 지속적으로 ..
useState를 잘못 사용하여 재 렌더링이 되지 않는 상황을 마주쳤습니다. 기본적인 부분이라고 생각하지만, 저와 같은 실수를 하시는 분이 있으실 수 있어 블로그 포스팅을 해봅니다! ❓React 요소가 재 렌더링 되는 시점? 기본적으로 React의 요소가 재 렌더링 되는 경우는 다음과 같습니다. State가 변경되었을 때 Props가 변경 되었을 때 부모 컴포넌트가 재 렌더링 될 때 컨텍스트(useContext 훅을 사용하여)에 의존하고 있는 경우 컨텍스트 값이 변경될 때 네 가지 상황에서 재 렌더링이 실행됩니다. 그런데 제가 마주친 상황은 State가 변경되었음에도, 재 렌더링이 되지 않는 상황이었습니다. //... const [files, setFiles] = useState([]); const in..
Swiper useSwiper()훅 useSwiper()훅은 Swiper 컴포넌트 내부에서 사용할 수 있는 훅으로, Swiper에 관련된 메서드를 제공합니다. 그런데 Swiper 컴포넌트 외부에서는 어떻게 불러올 수 있을까요? 기존 Swiper 컴포넌트 내부에서 사용하는 방법 아래 코드와 같이 버튼 컴포넌트를 하나 만듭니다. 컴포넌트 내부에 useSwiper()훅을 불러와 메서드를 사용한 다음, 버튼 컴포넌트를 Swiper 컴포넌트 내부에 불러옵니다. import { useSwiper } from "swiper/react"; export default function SlideNextButton() { const swiper = useSwiper(); return ( swiper.slideNext()}>..
캐러셀(Carousel) 이란? 캐러셀은 회전목마라는 뜻인데요, 쉽게말해서 슬라이드라고 생각하시면 됩니다. 티빙, 넷플릭스 같은 곳과 핸드폰 화면에서 많이 쓰입니다. Swiper.js를 사용하는 이유? 이전까지는 Framer-motion으로 수동으로 캐러셀을 만들었습니다. 애니메이션을 넣는 것도 여간 힘든일이 아니지만, 제일 큰 이유는 Pagination을 구현하기 위함입니다 수동으로 만들 땐 Pagination 기능을 만들 순 있어도, 애니메이션을 구현하는 것은 굉장히 복잡합니다. (적어도 저는 복잡했습니다..) 슬라이드를 한 장 넘길때의 애니메이션을 구현, 두 장 넘길 때의 애니메이션 구현, … 원하는 만큼의 애니메이션을 각각 구현해야 합니다. (저의 지식에서는 이렇게 하는게 최선이라 생각이 되네요...