dolog

서두로그인과 회원가입을 구현할 때 React Hook Form을 사용해서 구현했다.그 중 watch 메서드를 사용해서 입력값을 받았는데 그 이유는 유효성 검사를 통과하지 못한 input에 실시간으로 에러 메시지를 띄워주기 위해서였다.특히 비밀번호를 확인하는 부분에서 이미 적은 비밀번호와 비교하기 위해 watch의 역할이 필요했는데 결과적으로 잘 구현했지만 watch는 리렌더링을 일으키기 때문에 성능 문제가 생길 수 있다는 점을 놓쳤었다.물론 현재 서비스에서 해당 부분에 눈에 띄게 안좋은 성능 이슈가 보이지는 않지만 리렌더를 자주 발생시키는 것은 안좋다고 생각하므로 고쳐보도록 하겠다. watch vs useWatchReact Hook Form의 watch 공식문서를 보면 아래와 같이 나와있다...

1. intersection observer를 사용한 부분에 any 타입 고치기 let observer: IntersectionObserver; // 기존 코드 // const intersector = ([entry]: any) => { // console.log(typeof [entry]); // object // entry.isIntersecting && fetchNextPage(); // }; const intersector: IntersectionObserverCallback = ( entries: IntersectionObserverEntry[], ) => { const [entry] = entries; entry.isInterse..

먼저 관리자 페이지는 기간이 늘어짐에따라 기능 추가를 중단한 녀석이기 때문에... 미처 고려하지 못했던 페이지 접근 권한을 이제야 설정했다. 역시 기획은 아무리 꼼꼼하게 해도 어딘가 놓친 부분이 있다는 걸 다시 한번 느꼈다... 관리자 페이지 접근 권한 설정은 Cookie와 Next.js의 middlware로 해결했다.https://nextjs.org/docs/app/building-your-application/routing/middleware Routing: Middleware | Next.jsLearn how to use Middleware to run code before a request is completed.nextjs.org 폴더구조에 따라 middleware.ts..

메인 페이지 하단에 구글 로그인 추가하기메인 페이지 하단에 가입하는 버튼만 존재하니 소셜 로그인을 할 수 있는지 로그인 페이지를 들어가서 알게되었다라는 피드백이 많아서 지금 바로 가입하기 뿐만 아니라 구글로 가입하기도 추가하기로 했다.   사실 이 피드백에 관련한 디자인이 따로 없기 때문에 기존에 있던 지금 바로 가입하기 버튼과 디자인을 맞추었다.

1. Next.js의 Modal 이슈 해결 - SSR로 인한 portal을 인식하지 못하는 문제 ➡️ useEffect를 사용하여 클라이언트 렌더링이 진행한 후 portal을 설정해줌으로써 해결'use client';import { createPortal } from 'react-dom';import useModalStore, { ModalType } from '@/stores/modalStore';import useUpdateChatAnsweredMutation from '@/hooks/mutation/useUpdateChatAnsweredMutation';import useModal from '@/hooks/useModal';import { ChatModal, InquiryListF..

1. git branch 생성하기* 원래는 git checkout를 사용했는데 checkout 기능이 많아 branch를 만들 때 switch, restore를 사용한다고 한다.# branch를 만들면서 branch 변경하는 명령어git switch -c guest 2. README.md 파일 변경* 리팩토링 관련 내용을 추가하기 위해 기존 README.md를 변경 3.. 게스트모드 관련 리팩토링- useCreateGuestMutation.ts- useDeleteGuestMutation.ts- userStore.ts- guest.ts- HeaderNav.tsx useCreateGuestMutation.ts* 기존 게스트의 id를 받아올 때 (흡사 매직 리터럴) 유지보수가 어렵게 코..

서두원래는 기존에 있던 repository에서 진행을 할까 했지만 깔끔하게 repository를 파기로 결심했습니다.또한 repository를 새로 만들면서 버전 관리도 해볼까 했지만... 사실 버전 관리는 팀 프로젝트이기도 하고, 이미 한 번의 리팩토링과 추가적인 기능 개발이 진행되었기 때문에 공부하고 다른 프로젝트에 적용해볼까 합니다. 1. github에서 새로 repository를 만듭니다. 2. 그로우 스토리(Grow Story) 원본 repository에서 clone 합니다.(이때 필요하다면 --mirror, --bare 등 옵션을 추가하기)git clone .git 3. clone한 폴더의 remote를 변경해줍니다.- git remote -v로 먼저 origin이 어딘지 ..