저번 포스팅에는 recoil을 설치하고, nextjs에서 세팅하는 방법과 기본적인 recoil의 사용법에 대해 포스팅을 진행했다. 해당 포스팅을 하면서 recoil을 통해 애플리케이션의 모달 상태를 전역으로 관리하는 방법에 대해서 포스팅을 진행할 것이라고 언급했는데, 이 포스팅에서 한 번 소개해보도록 하겠다. 현재 진행중인 프로젝트는, 로그인 유저와 비로그인 유저에 따라서 처리해야할 로직이 존재한다. 로그인 유저는 애플리케이션의 모든 기능에 접근이 가능하지만, 비로그인 유저에 한해서는 특정 기능에서, 로그인이 필요하다는 모달을 띄워줘야만 했다. recoil을 통해 모달의 상태를 전역관리 하기 이전에는, 각 페이지에서 작성한 모달 컴포넌트와 모달의 상태 함수인 setState 함수를 관련 컴포넌트에 pro..
프로젝트를 진행하면서, 프로젝트의 볼륨이 커질수록 관리해야 하는 상태가 많아지고, 컴포넌트 중첩 구조가 발생함에 따라 관련 state를 상위 컴포넌트에서 하위컴포넌트로 반복적으로 전달하게 되는 props drilling 문제가 발생했다. 따라서 코드 유지보수를 원활하게 관리하고, 상태관리를 간편하게 하기위해 상태관리 라이브러리를 도입하게 되었는데, 이전 프로젝트에서는 redux를 사용하여 상태관리를 진행했었지만, 보일러 플레이트가 적고 비교적 간단한 recoil을 도입하게 되었고, 해당 과정을 포스팅하려고 한다. 1. recoil 라이브러리 설치 일단 recoil 패키지를 설치한다. // npm npm install recoil // yarn yarn add recoil 2. recoil 세팅하기 rec..
프로젝트를 진행하면서 api 요청을 통해 받아온 response 중에 외부 이미지 주소가 있었는데, 해당 주소를 Next/Image의 src에 직접 전달하니까 다음과 같은 에러가 발생했다. 기본적으로 nextjs는 nextjs에서 지원하는 Image 컴포넌트를 통해 애플리케이션의 이미지 최적화를 진행한다. Image 컴포넌트에는 필수적으로 필요한 props가 존재하는데, src, width, height, alt가 바로 그 필수적인 props에 해당한다. 오늘은 Image 컴포넌트에 대해서 자세하게 알아보기 보단, 외부 이미지를 가져오는데 집중할 것이기 때문에, Image 컴포넌트에 대해서 더 자세하게 알고 싶다면 공식문서를 참고하기 바란다. Image 컴포넌트에 필수적인 props인 src에는 다음과 ..
현재 진행중인 프로젝트는 비로그인 상태의 유저도 애플리케이션을 이용할 수 있도록 설계되었는데, 특정 페이지는 로그인한 유저만 접근하도록 비로그인 유저에 한해서 페이지 접근 제한을 구현해야 했다. 해당 로직을 구현하면서 어려움을 겪었던 과정과 채택하게 된 로직에 대해서 포스팅을 진행해보고자 한다. 1. axios interceptor 가장 처음엔, 비로그인 유저를 접근 제한해야 하는 페이지 내에서는 페이지 접속 시 api를 통해 유저의 정보를 가져오도록 되어있어서, 해당 axios interceptor에서 로직을 구현하려 했다. 기본적으로 api 요청시 헤더에 토큰을 담아 요청하기 때문에, 비로그인 유저로 해당 페이지에 접속하게 되면 401 에러를 만나고, interceptor 내에서 해당 에러를 만났을 ..
개발을 진행하다보면 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..
웹개발을 진행하면서 가장 처음 애를 먹었던 오류가 바로 CORS였고, 현재까지도 프로젝트를 진행하다보면 빈번하게 CORS를 마주친다. 처음에 CORS를 마주쳤을 때는 이해하기도 어려웠고 원하는 대로 API요청이 이루어지지 않아 스트레스를 많이 받았는데, 지금 CORS 에러를 마주하면 전보다는 버벅이지 않는 모습을 보면서 아 그래도 점점 성장하고 있구나를 느낀다. 따라서 이번 포스팅에는 CORS 에러에 대해서 한 번 다뤄보도록 하겠다. CORS 란? CORS는 Cross-Origin-Resource Sharing 으로 교차 출처 리소스 공유라는 뜻으로 해석할 수 있다. 여기서 말하는 교차 출처라는 것은 CORS를 다루는 많은 포스팅에서 다른 출처라는 뜻으로 해석하여 설명한다. 그렇다면 CORS는 다른 출처..
