끄적이는 개발노트

Next.js 15에 Global state 관리에 대해 찾아보면 Context API, Redux, Recoil, Zustand, Jotai 등 굉장히 다양한 라이브러리가 많다. 본인은 업무에서 Recoil을 주로 사용했었고, 간단한 프로젝트에서는 Context API를 사용했었다. 그 중 최근 들어서 Next.js와 Zustand가 같이 많이 사용되고 추천한다는 글이 눈에 띄어서 한번 사용해보기로 했다. Zustand?작고 빠르며 확장 가능한 기본적인 상태 관리 툴hook 기반의 편리한 api명확한 Flux 패턴의 충분한 규칙 보유 우선, 공식문서를 살펴보면 Zustand는 정말 간단하게 스토어 생성 => 사용 의 두 단계로만 이루어져 굉장히 편리하다. 하지만, Next.js 환경에서는 Zustand..

프론트에서 api를 통해 백엔드와 통신할 때, console 창에서 CORS 에러를 마주친 경험이 한번씩은 있을 것이다.CORS?Cross-Origin Resource Sharing의 줄임말로 교차-출처 리소스 공유다른 출처이기 때문에 발생하는 에러로 동일한 출처의 리소스에만 접근하도록 제한하는 정책이다.출처는 프로토콜, 호스트명, 포트를 의미한다. 이 때, 통신하고자 하는 api가 자체 백엔드라면 백엔드에서 CROS 에러를 해결하는 것이 일반적이다. 하지만, 외부 api를 프론트에서 직접적으로 가져다 쓰는 경우도 있기 때문에 프론트에서 CORS 에러를 해결하는 방법을 알아두는 것도 좋다. 따라서, Next.js(프론트엔드)와 NestJS(백엔드) 방법을 각각 정리해둔다. 1. Next.js (프론트엔드..

웹 혹은 앱을 개발하다보면 사용자의 행동에 대한 반응이 필요한 경우가 있다. 다들 한번쯤은 저장 버튼을 클릭했을 때 "저장 완료" 라던지 혹은 어떠한 이유로 버튼 기능이 실패했을 경우, "잠시 후에 다시 시도해 주세요." 같은 메세지를 본 적이 있을 것이다. 특히 앱에서 많이 이용되는데 요새는 웹에서도 모바일 뷰를 대다수 의식하고 개발하는 만큼 alert 대신에 toast 혹은 dialog를 많이 활용한다. Toast Message 역시 마찬가지로 react-toastify, react-hot-toast와 같이 굉장히 좋은 라이브러리가 있지만, 저번 Calendar와 마찬가지로 내가 구현하고자 하는 Toast Message는 팝업과 자동 삭제 기능만 있으면 되고 추후에 기능이 추가되도 문제가 없게끔 커스..

프로젝트를 진행하면서 스케줄 캘린더가 필요했다. 회사에서 재직할 때 만들었던 캘린더는 기본적인 view와 날짜 선택 이벤트 정도만 필요했기 때문에 라이브러리를 활용해서 구현했었다. react-day-picker, react-datepicker, react-calendar 등 정말 많은 날짜 및 캘린더 라이브러리가 존재한다. 하지만, react-native 프로젝트를 진행해서 출시해보기도 하고 유지보수를 경험해보면서도 느낀건 라이브러리를 기반으로 제작하면 불필요한 기능으로 용량을 잡아먹거나 추가 기능이나 디자인을 적용 및 변경하고자 할 때 어려움이 생기거나 한계가 뚜렷하다는 느낌을 받았다.(물론, 정말 좋은 라이브러리도 많고 프로젝트 요구기능에 적합하다면 좋은 선택인 경우도 굉장히 많다.) 따라서, 최근에..

웹 개발에서 모달창 구현을 직접 하거나 편리한 라이브러리는 대부분 상태관리와 함께 이루어진다.(본인 역시 react-modal을 그동안 사용해왔다.)const [isOpen, setIsOpen] = useState(false);const toggleModal = () => setIsOpen(!isOpen);const openModal = () => setIsOpen(true);const closeModal = () => setIsOpen(false);아마 대부분이 이런 기본 형태의 state를 활용했을 것이다. 이를 개발하다보면 필연적으로 마주치는 상황들이 몇가지 있는데 대표적으로 아래와 같이 있다.모달창이 열린 상황에서 새로고침을 하면 state로 관리하기 때문에 모달창이 닫힘뒤로가기 버튼을 누르면 이..

React에서 전역 상태 관리를 하는 방법에는 Redux, Recoil, Zustand 등과 같이 다양하고 편리한 라이브러리가 많다. 이 중에서 본인은 Redux와 Recoil만 사용해봤는데 정작 React에서 제공하는 내장 도구 Context API를 사용해본 적이 없었다. 이번에 사용법을 익힐 기회가 생겨서 정리한다. 1. Context APIContext API는 React에서 전역 상태를 관리하기 위한 내장 도구이다. 컴포넌트 트리 전체에 데이터를 전달할 수 있으며, props drilling을 피하기 위해 사용된다.다만, 공유하는 context가 변경되면 사용하는 모든 컴포넌트는 리렌더링되기 때문에, 상태의 목적과 용도에 따라 context를 잘나눠서 provider를 통해 필요한 컴포넌트에만..