react 40 [상태관리] 내가 Zustand를 선택한 이유 (over the Recoil) 들어가며 편리함을 추구하는 프론트엔드 개발자 핸디입니다. 최근에 새롭게 진행한 사이드프로젝트에서는 recoil 대신에 zustand를 사용해 보았습니다. 그래서 이번 글에서는 zustand와 Recoil를 비교하고 zustand의 장점부터 사용법에 대해 설명하도록 하겠습니다 대상독자 간단하고 직관적인 상태관리 라이브러리에 대한 기초 지식이 필요한 개발자 zustand와 recoil 사이에서 고민하는 개발자 본문 들어가기 전에 잠깐 살펴본 npm Trend입니다. recoil의 0.7.6의 버전, 가장 많은 zustand의 star수와 압도적으로 작은 사이즈가 눈에 뜹니다. 그럼 이제 편리한 zustand의 세상으로 떠나보시죠. Zustand 독일어로 ‘상태’라는 뜻을 가진 라이브러리입니다. Jotai를 .. 2023. 1. 24. [Next] 안정감있는 서비스를 위하여 (Sentry) 들어가며 이번 글에서는 프론트엔드 서비스 안정성을 위해 Next.js 프로젝트에 Sentry(이하 센트리)를 도입하는 과정에 대해 다루도록 하겠습니다. 이후 Sentry의 세부 기능을 이용해서 유의미한 에러 로그를 활용하는 방법에도 알아봅시다. 대상 독자는 Next 프로젝트에 Sentry를 도입하여 유저의 안정성을 향상시키고픈 개발자 Sentry 기능을 활용해 좋은 서비스를 만들고 싶은 개발자 Sentry란? Sentry는 실시간 로그 취합 및 분석 도구, 모니터링 플랫폼입니다. 이미 많은 회사에서도 도입하고 있는 검증된 툴입니다. 프론트엔드를 하다보면 가장 난감할때가 어디선가 들려오는 에러입니다. ( ex. 친구한테 링크 공유했는데 안된데요.. ) 유저들의 런타임 환경을 모르기 때문에 이슈를 재연하기가.. 2023. 1. 12. [React] 우리서비스를 더 널리, SNS 공유하기 (Navigator.share) 들어가며 이번에 갑자기 서비스를 운영 중에 팬덤을 타고 SNS에 서비스가 공유되는 일이 발생했었습니다. 그래서 이번 기회에 유저의 편의성을 위해 링크를 만들어 제공하거나 SNS로 바로 공유가 가능하도록 기능을 구현한 방법을 다뤄보겠습니다. 대상 독자는 공유하기 기능에 대한 예시 코드를 살펴보고 싶은 개발자 리액트를 통해 공유 기능을 제공하려는 개발자 공유 기능 살펴보기 공유기능 생각보다 눈여겨보진 않았지만 어느덧 우리 삶에 깊숙이 들어온 기능입니다. 이번 기회에 다른 서비스 예시부터 그리고 어떤 UX를 가지고 있나 살펴보도록 하겠습니다. 공유하기의 UX 공유하기 기능은 크게 2가지 버전으로 나눌 수 있습니다. 일반 브라우저에서의 공유하기 모바일 브라우저에서의 공유하기 이렇게 나눠지는 이유는 실은 간단.. 2022. 11. 22. [자바스크립트] IndexedDB 실전 사용법 (idb) 들어가며 예전에 localstorage 관련 글 마지막에 localstorage 보다는 indexedDB 사용을 권고한다는 글로 끝맺음했었습니다. 시간이 흘러 이번 프로젝트에서 IndexedDB를 이용해 네트워크 리소스를 최적화한 경험이 있어 공유드립니다. 개발 환경은 Next, React를 사용했지만 바닐라 자바스크립트 기반으로도 동작하는 코드이니 살펴보시면 좋겠습니다. 대상 독자 프론트엔드 개발을 하다가 localstorage, sessionstorage를 넘어 indexedDB도 써보려는 개발자 같은 파일을 여러 번 요청하는 게 안타까운 최적화에 특화된 개발자 [Next] localstorage를 사용하는 방법 #1 localStorage 란? 웹 스토리지 객체(web storage object)의.. 2022. 9. 30. 이전 1 2 3 4 5 ··· 10 다음
