개발을 진행하다보면 input의 onChange 또는 scroll에 관련 이벤트를 연결하는 경우가 종종 있다. 만약에 input의 onChange에 API를 요청하는 이벤트가 걸려있다고 가정해보자. "hello"라는 다섯글자에 총 5번의 API 요청이 실행된다. 아무리 생각해도 너무 비효율적이다. 따라서 연이어서 호출되는 이벤트 중 마지막 이벤트만 실행되도록 구현해보자. 사실 debounce는 throttle과 떼어놀 수 없는 사이이지만, 이번 포스팅에서는 debounce에 대해서 다루고, 다음에 기회가 되면 예제와 함께 throttle에 대해서 다뤄보는 시간을 가지도록 하겠다. debounce 란? debounce는 사실 전자 공학에서 유래된 용어이다. 스위치 센서나 터치 센서를 다룰 때, 순간적으로..
현재 네컷지도라는 프로젝트를 진행하면서 카카오맵을 사용하고 있다. Api 응답값으로 해당 지점의 위도, 경도를 받아 마커를 뿌려줘야 되는 기능을 구현하면서 스크립트를 불러오는 방식에 대해서 고민한 흔적에 대해 정리하고자 해당 포스팅을 준비했다. 카카오맵을 사용하는 자세한 방법에 대해서는 이번 포스팅에서는 다루지 않기 때문에 이 점은 고려하여 읽어주시면 되겠다. 사전 준비 카카오 맵 API를 사용하기 위해서는 Kakao Developers에 접속해서 애플리케이션을 추가하고 해당 애플리케이션의 javascript 키 값을 알아야한다. 이 과정에 대해서는 카카오 로그인 구현 포스팅에서 다루기 때문에, 사전 준비에 해당하는 과정은 이전 카카오 로그인 구현 포스팅을 참고하기 바란다. 카카오맵 API 불러오기 위..
요즘 거의 대부분의 애플리케이션은 사용자의 쉬운 접근성을 위해 소셜로그인을 제공한다. 나도 대부분의 애플리케이션을 이용할 때, 서비스 자체 회원가입, 로그인을 거의 이용하지 않고, 소셜 로그인을 제공하지 않는 애플리케이션은 자주 사용하지 않게 되는 것 같다. 이제는 소셜 로그인이 필수라고 느끼기 때문에. 프로젝트를 진행하면서 소셜 로그인을 구현했던 방법에 대해서 정리해보려고 한다. 사전작업 카카오 로그인을 구현하기 위해서는 사전에 kakao developers에서 애플리케이션을 등록해야한다. 애플리케이션을 추가하고 요약정보를 확인해보면 생성한 애플리케이션의 앱 키를 볼 수 있다. 이번 포스팅에서는 인가코드를 받고, 해당 인가 코드를 통해 토큰을 받아 로그인을 진행하는 로직을 다루기 때문에 REST API..
Yarn-berry란? 기본적으로 가장 접근성이 좋고 많은 사람들에게 사용되는 패키지 매니저를 꼽자면, npm과 yarn을 꼽을 수 있다. 그 중 yarn의 개발자가 내놓은 새로운 패키지 매니저이다. 기존의 npm과 yarn을 사용하면서 높은 용량의 node_modules 폴더, 해당 node_modules의 디렉토리 구조를 만들기 위한 무수히 많은 입출력 작업등의 단점이 존재했다. yarn-berry는 node_modules를 생성하지 않고 Plug'n'Play(PnP)를 이용하여 효율적으로 패키지를 찾을 수 있고, 의존성을 압축파일로 관리하기 때문에 기존 node_modules에 비해 용량이 매우 적어 zero-install로 git을 통한 버전관리가 가능하다. 보일러 플레이트 만들기 NextJS C..
지난 포스팅에서 custom hook으로 구현한 React-query의 useMutation에 대한 제네릭 타입에 대해서 살짝 알아보았지만, useMutation에 대해 자세하게 알아보지는 않았기 때문에, 이번 포스팅에서는 낙관적 업데이트와 함께 useMutation의 옵션들과 쓰임에 대해서 조금 더 자세하게 알아보도록 하자. 낙관적 업데이트란? 일반적으로는 useMutation을 사용하여 서버 측에 API 요청을하고, API 요청이 정상적으로 진행되었다면, 응답으로 받은 서버 데이터를 통해 UI를 업데이트 한다. 이 때 낙관적 업데이트는 API 요청이 성공적이라는 것을 전제로 두고 UI를 업데이트 하게되고 사용자는 빠르게 업데이트 된 UI를 볼 수 있게 된다. API 요청이 정상적으로 이루어지지 않았을..
저번 포스팅에서는 React-query를 활용하여 custom hook을 만들어 사용하는 과정을 소개했다. 이번에 다뤄볼 내용은 React-query를 활용한 데이터 필터링이다. 아띠즈 프로젝트에서 해당 데이터 필터링 기능이 사용되는 컴포넌트가 몇개 있었지만, 그 중에서 검색된 작품들의 경매상태가 경매중인지 경매 완료인지 필터링하는 기능에서 React-query를 사용했던 부분에 대해 다뤄보려고 한다. React-query select 옵션 select 옵션을 사용하지 않고 데이터를 직접 가공하여 state로 관리하는 방법을 사용할 수 있겠지만, React-query에서 제공하는 select 옵션을 사용하면 클라이언트 단에서 필터링을 진행하지 않을 수 있다. select 옵션은 React-query를 통..
지난 포스팅에서도 이야기 했듯이 아띠즈 프로젝트를 진행하면서 사용된 API의 개수는 60개 이상이었기 때문에, 서버 데이터 관리가 필수적이었다. 많은 사용자들이 사용한다는 것을 가정하고, 데이터 캐싱 또한 필수적이었는데, React-query를 도입하면서 보다 간편하게 위에서 언급했던 사항들을 처리할 수 있었다. React-query에서 제공하는 useQuery, useMutation 등을 사용하는 것 또한 간편하지만, 여러 컴포넌트에서 데이터가 필요한 경우도 많았기에 재사용성을 고려하여 custom hook을 만들어 관리했다. 추가적으로 React-query에서 제공하는 제네릭을 사용하여 관리하는 데이터의 타입 또한 같이 다뤄보자. useQuery와 useMutation 훅에서 사용되는 제네릭 타입은 ..
이번에 새로 프로젝트를 하나 진행하면서 Axios의 모듈화가 프로젝트 전반에 큰 영향을 미친다는 것을 알게되었다. 프로젝트의 규모가 크기도 했고, 사용됐던 API의 개수가 60개 정도였기 때문에, Axios 사용에 있어서 모듈화는 필수였다. 비록 API의 개수가 적거나, 프로젝트의 규모가 작다고 해도, Axios의 모듈화는 앞으로 진행될 수도 있는 사이드 프로젝트나 개인 프로젝트에 있어서 필수적으로 도입해야겠다라고 생각했기 때문에, 다시 한 번 정리하면서, 이 글을 읽는 다른 개발자 분들에게도 도움이 됐으면 하는 바람이다. Axios란? Axios는 HTTP 비동기 통신을 위한 라이브러리이다. 쉽게 말해 프론트엔드와 백엔드 간의 원활한 통신을 위해 사용된다. 기존에 Axios를 사용했던 방법 Axios ..
