이번 포스팅은 "덕풀" 프로젝트를 진행하면서 애플리케이션 유저 상태와 인증 로직을 관리한 방법에 대해 이야기 해보고자 한다. 모달 전역 관리에 대해서 소개했던 지난 포스팅에서는 뷰와 더 밀접하고, 애플리케이션 전체 뷰 뿐만 아니라 서브 뷰에서도 사용이 용이하기 때문에 Context API를 사용했다고 소개했지만, 유저 상태 및 인증 로직은 애플리케이션 전체에서 단 하나만 존재해야하는 앱 상태 그 자체이고, View의 라이프 사이클과 무관하게 애플리케이션 자체의 라이프 사이클을 따라가는 영속적인 상태이기 때문에 전역관리 라이브러리인 Jotai를 사용하여 구현했다. 일단 위에서 언급했듯이 전역 상태 라이브러리를 통해서 유저 상태와 인증 로직을 관리한 이유에 대해 설명했으니, 들어가기에 앞서 전역 상태 라이브..
오랜만의 포스팅이다! 3달 동안 프로젝트를 진행하느라 포스팅을 미루고 미루다가, 드디어 배포를 끝내고 아껴놨던 포스팅거리들을 풀 시간이 된 것 같다. 이번에는 "덕풀"이라는 덕질 공유 플랫폼 프로젝트를 개발했는데, 혼자서 개발 환경 세팅, 기능 개발, 배포까지 A to Z를 해야하다보니 중간중간 지칠때도 많았던 것 같다. 역시 개발은 여러명이서 함께해야 즐거워,,, 이번에 작성할 블로그 주제는 프로미스를 사용한 전역 모달 관리다. 이전의 프로젝트를 진행하면서도 전역 모달 관리를 사용했고, 관련해서 블로그 포스팅도 썼는데도 불구하고 다시 한 번 같은 주제를 들고왔다. 이전의 전역 모달 관리 방법을 "덕풀" 프로젝트에서도 사용하려고 보니 생각보다 효율적이지 않은 부분이 많다는 것을 알게되었고, 해당 문제점들..
다들 React를 처음 공부할 때 여러가지 훅의 쓰임새와 활용방법등을 공부하면서 useMemo와 useCallback이라는 훅을 접해봤을 것이다. 처음 내가 useMemo와 useCallback을 공부했을 때 사용이유는 다음과 같았다. - useMemo는 계산 비용이 높은 연산의 결과를 기억하고, 의존성 배열에 넣어준 deps가 변경되지 않으면 계산한 값을 재사용한다. - useCallback은 함수를 메모이제이션하고, 의존성 배열에 넣어준 deps가 변경되지 않으면 이전에 생성한 함수를 재사용한다. 두 훅 모두 React를 사용하면서 렌더링 성능 최적화를 위해 사용하는 훅인데, 사실 사용하지 않아도 개발자 경험에는 큰 영향을 주지않는다. 사실 큰 영향을 주지않는다기보다 개인적으로 아직 내 실력과 경험이..
개발을 진행하다보면 input의 onChange 또는 scroll에 관련 이벤트를 연결하는 경우가 종종 있다. 만약에 input의 onChange에 API를 요청하는 이벤트가 걸려있다고 가정해보자. "hello"라는 다섯글자에 총 5번의 API 요청이 실행된다. 아무리 생각해도 너무 비효율적이다. 따라서 연이어서 호출되는 이벤트 중 마지막 이벤트만 실행되도록 구현해보자. 사실 debounce는 throttle과 떼어놀 수 없는 사이이지만, 이번 포스팅에서는 debounce에 대해서 다루고, 다음에 기회가 되면 예제와 함께 throttle에 대해서 다뤄보는 시간을 가지도록 하겠다. debounce 란? debounce는 사실 전자 공학에서 유래된 용어이다. 스위치 센서나 터치 센서를 다룰 때, 순간적으로..
요즘 거의 대부분의 애플리케이션은 사용자의 쉬운 접근성을 위해 소셜로그인을 제공한다. 나도 대부분의 애플리케이션을 이용할 때, 서비스 자체 회원가입, 로그인을 거의 이용하지 않고, 소셜 로그인을 제공하지 않는 애플리케이션은 자주 사용하지 않게 되는 것 같다. 이제는 소셜 로그인이 필수라고 느끼기 때문에. 프로젝트를 진행하면서 소셜 로그인을 구현했던 방법에 대해서 정리해보려고 한다. 사전작업 카카오 로그인을 구현하기 위해서는 사전에 kakao developers에서 애플리케이션을 등록해야한다. 애플리케이션을 추가하고 요약정보를 확인해보면 생성한 애플리케이션의 앱 키를 볼 수 있다. 이번 포스팅에서는 인가코드를 받고, 해당 인가 코드를 통해 토큰을 받아 로그인을 진행하는 로직을 다루기 때문에 REST 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 ..
