시작하며...팀 프로젝트를 하다 보면 커밋 메시지 컨벤션을 정하게 된다.그런데 이렇게 규칙을 정했음에도 실수로 커밋 메시지를 잘못 작성하거나 지키지 않는 경우도 발생하게 된다. 😭 그래서 이러한 커밋 컨벤션을 지키지 않았을 때 커밋이 되지 않도록 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 및 모든 최..

시작하며...React 에서 다른 컴포넌트로 데이터를 전달하기 위해 props 를 사용한다.그러나 React 의 상태인 state 는 자식 컴포넌트한테만 전달할 수 있어 만약 컴포넌트가 많고 잘 분리되어 있을 경우state 를 전달하는데 매우 복잡하고 해당 state 를 사용하지 않는 컴포넌트로 받게 되어 비효율적인 코드가 되어 버린다. 그래서 이러한 경우를 해결하기 위해 상태 관리 라이브러리를 사용하며 그 종류로는 Redux, Recoil, Mobx, Zustand 등이 있다.나는 그 중에서 Zustand 에 대해 알아 볼 것이다. ZustandZustand 란 무엇일까? 독일어로 상태 라는 뜻을 가지고 있다.Zustand 는 패키지 크기가 작으며 사용하기 쉽다는 장점을 가지고 있다. 직접 사용하면서 ..

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

시작하며...내 블로그에 [React] 리액트 쿼리(React-Query) 사용 방법 이런 게시물이 있다.그리고 당시 했던 프로젝트를 보니깐 React Query 의 버전이 3이었다. 그러나 현재 V5 까지 있으며, React 이 외에도 Vue 등에서도 사용이 가능해지면서 TanStack Query 로 이름을 바꿨다고 한다. 그래서 더 자세히 공부할 겸 새로운 내용들을 알기 위해 글을 작성하기로 했다. TanStack Query V5정의TanStack Query 란 무엇일까? TanStack Queryit makes fetching, caching, synchronizing and updating server state in your web applications a breeze.웹 애플리케이션에서 서버..

지난 게시물에서 Firebase 를 사용하여 회원가입하는 것을 구현하였다. 그러면 로그인은 어떻게 하면 될까? Firebase 세팅 방법은 아래에 있는 게시물을 확인하면 된다. [React] 리액트 Firebase Authentication 회원가입 프론트엔드 구현으로만 회원가입, 로그인 기능을 구현하기 어렵다. 그러나 Firebase 의 Authentication 을 사용하여 손쉽게 회원 정보를 저장하고 관리할 수 있게 도와준다. 파이어베이스 세팅 파이어 jjang-j.tistory.com 로그인 하기 모듈 가져오기 Firebase의 Authentication 모듈에서 현재 Firebase 앱의 인증 객체를 가져오는 getAuth 이메일과 비밀번호로 로그인하는 signInWithEmailAndPassw..

프론트엔드 구현으로만 회원가입, 로그인 기능을 구현하기 어렵다.그러나 Firebase 의 Authentication 을 사용하여 손쉽게 회원 정보를 저장하고 관리할 수 있게 도와준다. 파이어베이스 세팅파이어베이스를 리액트 프로젝트에 적용시키기 위해 세팅을 해야 한다. 프로젝트 만들기아래 링크를 클릭하여 Firebase 에 들어가 회원가입과 로그인을 한다. Firebase | Google’s Mobile and Web App Development Platform개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요.firebase.google.com그리고 프로젝트 추가 버튼을 클릭하여 원하는 이름의 프로젝트를 생성한다...

React 에서 회원가입 기능을 구현하기 위해서입력받은 내용이 필수적으로 입력해야 되고, 글자 수는 몇 자 이상&몇 자 이하, 입력 패턴 등을 고려해야 한다. React 에서 회원가입이나 로그인 등 입력해야 되는 form 을 구현할 때,React Hook Form 을 사용하면 이를 간편하게 구현할 수 있다. React-Hook-Form 세팅설치하기React Hook Form 을 설치하기 위해 터미널 창에 명령어를 입력해 준다. npm install react-hook-form  useFormReact Hook Form 을 사용하기 위해Form 기능을 관리하고 제어하는 hook 인 useForm 을 사용한다. useForm 의 반환 값들은 다음과 같이 register, handleSubmit, watch..