시작하며...지금까지 다양한 프로젝트를 진행하면서 클라이언트에서 상태 관리를 간편하게 하기 위해 라이브러리를 사용하였다.그중 Recoil, Zustand, Jotai 라이브러리를 사용해 보았고, 각기 다른 방식으로 상태 관리를 했다. 그래서 이번 글에서는 그동안 사용해 본 Recoil, Zustand, Jotai를 비교하고, 각 라이브러리를 어떤 상황에서 사용했고 느낀 장단점을 정리하게 되었다. 1. Recoil1-1. 사용 배경개발 동아리 DND 9기에서 진행한 NewPle 프로젝트에서 Recoil을 사용했다. Recoil을 선택한 이유는 단순했다.사실 React Query(TanStack Query)와 Recoil의 조합이 좋다는 이야기를 들어서 깊이 있는 이해 없이 그냥 선택하게 된 것이다.(당시 ..

시작하며...우주윗미 프로젝트에서 TanStack Query의 옵티미스틱 업데이트를 사용해서 게시물의 좋아요 기능을 구현하였다. 그런데 오늘 useState로 구현할 수 있을 거 같은데 굳이 TanStack Query를 사용한 이유를 질문받았다.....!(약간 당황하면서 대충 서버 상태를 반영해 준다고 답을 했다.) 그래서 이에 대해 다시 한 번 생각해 보면서 글로 정리하게 되었다. 왜 useState가 아닌 TanStack Query를 사용했는지!! (참고로 TanStack Query의 옵티미스틱 업데이트를 적용한 내용은 해당 블로그 글에서 확인할 수 있다.) [TanStack Query] 옵티미스틱 업데이트 사용하여 좋아요 구현시작하며...이번 프로젝트에서 게시물의 좋아요/취소 기능을 구현하는데, 백..

(제목에는 Next.js 붙였지만 딱히 Next.js 에 관한 내용없음) 시작하며...이번 프로젝트에서 베타 테스트를 진행하면서 사용자들의 의견을 받았다. 그중에서 게시판 페이지에 조회수 기능이 있었으면 좋겠다는 의견이 있었다. 그런데 백엔드 API 요청을 새로 못하는 상황이기 때문에, 고민을 하다가 Firebase 를 사용하기로 했다.(그리고 나도 조회수 기능 구현하면 좋을 것 같다는 생각이 있었음) 그리고 Firebase 를 선택한 이유는 작년 졸업작품에서 React Native + Firebase 로 어플리케이션을 만들면서 Firebase 의 다양한 기능을 사용해 봤고 익숙하기 때문에 러닝커브가 낮아 빠른 시간내에 구현할 수 있을 것 같기 때문이었다. 세팅하기Firebase 에서 FireStore ..

시작하며...Tailwind CSS 를 사용하면 기본적으로 rem 단위로 동작한다. 만약 조금 더 섬세하게 px 단위로 크기를 조절하고 싶은 경우에는 아래 코드처럼 사용하게 된다.  그런데 개발자 도구에 들어가서 보게 되면 어떤건 rem 단위, 어떤건 px 단위 이렇게 혼합되어 있는 것을 볼 수 있다.  그래서 이러한 문제를 해결하여 px 단위로 작성하되, 실제 적용되는 건 rem 단위인 pxr 를 사용해보려고 한다. pxr 단위사실 Tailwind 를 사용하면서 위에와 같은 문제를 겪고 있었고 해결을 하고 싶었다. 그런데 지금 멘토님께서 pxr 단위라는 것을 알려주셔서 위에 문제를 해결할 수 있을 거 같아 이번 프로젝트에 적용하게 되었다! 관련 아티클팀원분이 카카오페이지에서 Tailwind 에 pxr ..

시작하며...이번 프로젝트에서 Storybook 을 적용하게 되었다. 이전 프로젝트에서는 공통 컴포넌트를 테스트 페이지를 만들어서, 사용하는 방법과 예시를 다른 팀원들에게 보여줬는데이제 Storybook 을 사용하면 번거롭게 테스트 페이지를 만들 필요가 사라진다. 설치하기먼저 Storybook 을 설치한다.npx storybook@latest init그러면 Storybook 이 설치되면서 실행이 된다.  해당 프로젝트는 yarn 이라서 yarn stroybook 을 입력하면 스토리북이 실행이 된다.만약 npm 이라면 npm run stroybook 를 입력하면 된다. 스토리북 작성하기컴포넌트 주석달기버튼 컴포넌트에 대해 Storybook 을 작성하기 전에 해당 버튼 컴포넌트의 interface 에 주석을..

시작하며...현재 프로젝트에서 내가 게시물 등록하기 페이지를 맡게 되어 React Quill 라는 에디터 라이브러리를 사용하여 구현하였다.이미지를 삽입하면 아래처럼 화면에 꽉 차게 된다. 그래서 실제 게시물을 작성하는 페이지처럼 마우스를 사용하여 사진의 크기를 마음대로 조절할 수 있으면 좋을 거 같다고 생각을 했다.  @xeger/quill-image-actions 사용React Quill 에서 이미지를 다룰 수 있는 quill-image 라는 모듈을 사용하였다. 해당 모듈을 통해 이미지의 사이즈와 정렬 위치를 조절할 수 있다. https://github.com/xeger/quill-image GitHub - xeger/quill-image: Delightful editing of rich-text im..

시작하며...팀 프로젝트를 하다 보면 커밋 메시지 컨벤션을 정하게 된다.그런데 이렇게 규칙을 정했음에도 실수로 커밋 메시지를 잘못 작성하거나 지키지 않는 경우도 발생하게 된다. 😭 그래서 이러한 커밋 컨벤션을 지키지 않았을 때 커밋이 되지 않도록 commitlint 를 설정할 수 있다. commitlint 설정하기husky 설치하기husky 는 Git 이벤트가 발생할 때 자동으로 실행되는 스크립트로 커밋을 만들기 전에 특정 작업을 수행하거나 푸시하기 전에 작업을 할 수 있도록 도와준다. 그래서 먼저 husky 를 설치한다. npm install husky --save-devnpx husky install commit-msg 파일 작성husky 를 설치하면 프로젝트에 .husky 라는 폴더가 생기게 된다..

시작하기 앞서...이번에 프로젝트를 하면서 framer motion 을 활용하여 버튼, 모달, 스크롤, 화면 전환 애니메이션을 적용하였다.그래서 사용 방법에 대해 자세하게 정리하기 위해 글을 작성하게 되었다. Documentation | Framer for DevelopersAn open source, production-ready motion library for React on the web.www.framer.com  Framer motion 적용Framer motion 을 사용한 다섯 가지 애니메이션을 적용할 것이다.버튼 애니메이션모달 애니메이션스크롤 애니메이션화면 전환 애니메이션 우선 Framer motion 을 사용하기 위해 해당 라이브러리를 설치한다.npm install framer-moti..

☘️ 시작하기 앞서...css in js 라이브러리를 사용하지 않고 css 를 적용할 때, 동적으로 클래스 이름을 지정해주기 위해서 삼항연산자 등을 사용할 수 있다.하지만 이 과정은 코드가 복잡해지고 더러워진다. 그래서 이를 해결하기 위해 classnames 라이브러리를 사용할 수 있다.  ☘️ classnames 라이브러리1. 설치하기[공식 깃허브 문서 - classnames] GitHub - JedWatson/classnames: A simple javascript utility for conditionally joining classNames togetherA simple javascript utility for conditionally joining classNames together - JedW..

Zod 에 대해서Zod 정의Zod 란 무엇일까? ZodTypeScript 기반의 스키마(데이터 유형) 선언 및 유효성 검사 라이브러리Zod 의 목표는 유형 선언의 중복을 제거하는 것이며, Zod 을 사용하면 한 번 유효성 검사기를 선언하고Zod 이 정적 TypeScript 유형을 자동으로 추론한다[출처] 공식문서 GitHub - colinhacks/zod: TypeScript-first schema validation with static type inferenceTypeScript-first schema validation with static type inference - colinhacks/zodgithub.com Zod 장점공식문서에 따르면 장점은 다음과 같다.의존성 없음Node.js 및 모든 최..