시작하며...이번 프로젝트에서 프로젝트 초기 세팅을 하게 되었는데 초기 세팅을 진행한 순서와 방법에 대해 글을 작성하려고 한다. 1. 템플릿 만들기가장 먼저 깃허브 이슈와 Pull Requset 템플릿을 만들었다.만드는 방법은 아래 링크에서 확인할 수 있다. https://jjang-j.tistory.com/79 [GitHub] 깃허브 이슈(issue) & PR(Pull Request) 템플릿 만들기☘️ 시작하기 앞서 깃허브로 협업을 하기 위해서 이슈와 PR 이 필요하다. ☘️ 이슈 템플릿 만들기 1. 레포지토리의 Settings 창에 들어온다. 이슈를 생성할 레포지토리의 오른쪽에 있는 Settings 를jjang-j.tistory.com 이슈 템플릿은 위에 있는 내용 그대로 사용하였고, PR 템플릿은 ..

시작하며...메뉴바나 드롭다운의 외부영역을 클릭했을 때 닫히는 걸 구현하는 게 어려운 작업은 아닌데 이걸 구현하면서 삽질이 좀 많았다🥲 그래서 외부 영역 클릭 시 닫히는 로직에 대하여 자세히 정리해보려고 한다. 처음 구현한 방식Modal 처럼 닫히도록 구현처음에 구현한 방식은 모달(Modal)처럼 닫히도록 구현하였다. 메뉴바 뒷배경 전체화면으로 만든 후, 그 위에 메뉴바를 만드는 방식이다.const UserMenu = ({ isOpen, onClose, className }: UserMenuProps) => { const menuRef = useRef(null); const handleClickOutside = (e: MouseEvent) => { if (menuRef.current) { ..

시작하기 앞서...React 에서 get 요청을 할 때, 로딩여부인 isLoading, 에러 객체 정보가 저장된 loadError, 데이터를 로드하는 함수인 handleLoad 를 반환하는 useFetch 라는 커스텀 훅을 만들어 사용하였다.import { useState } from 'react';const useFetch = (getData) => { const [isLoading, setIsLoading] = useState(false); const [loadError, setLoadError] = useState(null); const handleLoad = async (...arg) => { try { setLoadError(null); setIsLoading(tr..

시작하기 앞서...프로젝트를 진행할 때, 작업한 내용을 pull request 에 올리면서 다른 사람의 코드를 보게 되는데이 코드가 제대로 동작하는지 내 눈으로 보고 싶으면 번거롭게 그 브랜치로 이동해서 직접 확인해야 된다. 이러한 과정이 번거롭기 때문에 pull request 를 올렸을 때, 자동으로 vercel 로 미리 보기 preview 를 배포해야 한다. 그러나 Organization 레포지토리가 아닌 경우 vercel 봇을 사용하여 간단하게 미리보기를 배포할 수 있지만Organization 레포지토리는 권한때문에 github action 을 사용해서 구현해야 된다. 깃허브 액션으로 pr 미리 보기 배포1. vercel 토큰 발급vercel 토큰을 발급받는 곳에서 토큰을 발급받는다. 발급 받은 토..

시작하기 앞서...현재 프로젝트를 진행하고 있는데깃허브에서 Organization 레포지토리에서 작업을 하고 vercel 로 배포를 하려면 프로 계정을 사용해야 된다.Pro 계정 무료 체험 2주를 할 수 있지만 그 이후로는 요금제를 사용해야 한다. 대신 Organization 레포지토리에 있는 걸 내 계정 레포지토리로 fork 해서 배포를 할 수 있다.하지만 이 과정은 매번 브랜치의 sync 를 맞춰야 한다. 그래서 이러한 번거로운 작업을 해결하기 위해 깃허브 액션(github action) 을 사용하여 자동 배포 할 수 있다. 깃허브 액션으로 vercel 자동 배포1. 내 계정에 fork 한다.Organization 레포지토리에 있는 프로젝트를 내 계정으로 Public 으로 fork 한다. 2. ver..

☘️ 시작하며... 현재 프로젝트에서 Zod 와 React-Hook-Form 조합으로 입력폼 내용을 구현하고 있고 아래 사진처럼 스키마 객체를 생성하여 폼 제출 시 유효성 검증을 만족하지 못하면 토스트 UI 가 뜨도록 구현을 했다. 현재 신고하기 기능을 구현하는 중이며, 신고종류를 라디오 버튼을 사용하여 고르게 되는데, 이 때 스키마객체에서 신고종류의 타입을 enum 으로 설정하였다. 그래서 신고종류를 선택하지 않고 폼을 제출할 경우, 에러 토스트 UI 를 띄우려는데 아무생각없이 다른 타입처럼 enum 이 min 값을 1을 만족하지 못하였을 때, message 를 다음과 같이 설정하려고 했다. // 적용 X reportType: z .enum([report, ...otherReport]) .min(1, ..

☘️ 시작하기 앞서 현재 진행하고 있는 프로젝트를 구현하면서 사용한 React Query(Tanstack Query) 의 staleTime 에 대해 알아 볼 것이다. 이를 사용하면서 불필요한 API 요청을 줄일 수 있으며 매우 유용하다 생각이 들어 글로 작성하게 되었다. 그 밖에도 React Query 를 사용하여 단순하게 데이터를 요청하는 게 아니라 유용한 기능들이 있다는 것을 직접 사용하면서 알게 되었다. 특히 프로젝트를 진행하기 전에 공식문서를 한국어로 번역한 깃허브 글을 본 것이 매우 도움이 되었다! 혹시 React Query 를 사용한다면 이 글을 정독하는 것을 추천한다 GitHub - ssi02014/react-query-tutorial: 😃 TanStack Query(aka. react qu..

시작하기 앞서...최근 진행했던 프로젝트에서 편지 글 쓰기 페이지 를 구현을 했는데 이를 구현하기 위해 React-Hook-Form 을 사용하고 있다.그런데 개발하면서 정말 좋고 편리한 기능이 있어 이렇게 글을 작성하게 되었다.  실제로 개발을 하다보면 여러 컴포넌트가 생기게 된다.이럴 때 매번 props 로 컴포넌트간 데이터를 다 전달하기엔 너무 복잡하고 힘이 든다. (prop drilling 이 발생)이러한 상황에서 쉽게 폼 데이터를 사용하는 방법이 바로 FormProvider 이다!!!!!!!    또한 개발을 할 때, 폼에 제출할 내용이 input, textarea, select 이런 태그가 아닐 때도 발생한다. 아래 사진은 내가 현재 구현한 페이지인데 input 태그로 만들지 않은 것들은 {....