(제목에는 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 및 모든 최..

+) next.js 에서 Zustand persis 사용하기 (feat. Hydration error)https://jjang-j.tistory.com/124 [Next.js] Zustand persist 사용하기 (feat. Hydration 에러 해결)시작하며...현재 프로젝트의 상태 관리 라이브러리로 Zustand 를 사용하기로 했다.사용하기 간편한 상태 관리 라이브러리 중에서 꾸준히 업데이트되면서 다운로드 수가 많은 Zustand 를 선택하게 되jjang-j.tistory.com 시작하며...React 에서 다른 컴포넌트로 데이터를 전달하기 위해 props 를 사용한다.그러나 React 의 상태인 state 는 자식 컴포넌트한테만 전달할 수 있어 만약 컴포넌트가 많고 잘 분리되어 있을 경우stat..

☘️ 시작하며...React 18 의 기능으로 Suspense 가 있다. 그러면 Suspense 가 무엇일까? Suspense하단에 있는 일부 컴포넌트가 아직 렌더링할 준비가 되지 않은 경우 로딩을 나타낼 수 있도록 해주는 것[출처]: 공식문서이러한 Suspense 를 서버 상태관리 라이브러리인 TanStack Query(React Query) 와 함께 안정적으로 사용할 수 있다. 그래서 어떻게 사용하지는 지 알아볼 예정이다. ☘️ Suspense만약 TanStack Query 에 대해 잘 모를 경우 해당 게시물에서 이에 대한 내용을 확인할 수 있다. Suspense 세팅React 에 내장된 Suspense 을 import 해주고import React, { Suspense } from 'react';Su..