Next.js + React Hook Form 기반으로 콘텐츠 생성/수정 페이지를 구현하면서, footer 버튼에서 form의 현재 상태를 필요로 하는 요구가 생겼다.초기 접근처음에는 useForm() 내부에서 watch()를 사용해 전체 form 데이터를 실시간으로 추적하고, 해당 값을 ContentFooter 컴포넌트에 prop으로 전달하는 방식으로 구현했다. 문제 발생하지만 watch()는 form의 모든 필드가 변경될 때마다 리렌더링을 유발한다. 특히 이미지나 파일 업로드 등 상태가 큰 컴포넌트가 포함된 경우 watch()의 호출 비용이 커져 성능 저하로 이어졌다.실시간 렌더링이 잦아지고버튼과 무관한 필드 변경에도 전체 리렌더가 발생함원인 분석watch()는 전체 상태를 추적하기 때문에, 모든 입..
로그인 기능을 구현하다가 예상치 못한 문제가 하나 생겼다.로그인은 정상적으로 성공했고, 상태도 잘 저장되었지만 router.push()가 작동하지 않았다. 상태 저장도 되고, 콘솔에도 데이터가 잘 찍히는데 페이지 이동이 일어나지 않았다.문제 상황- 로그인 API 요청을 보낸 뒤, 응답으로 받은 사용자 정보를 Zustand에 저장하고 그 직후 router.push()를 호출했는데 페이지가 이동하지 않았다.- 아무런 에러도 없고, 상태도 잘 저장되었는데 라우팅만 반응이 없었다.재현 조건- 상태 저장 없이 router.push()만 실행하면 잘 작동했다.-상태 저장을 한 다음 줄에 라우팅 코드를 넣으면 작동하지 않았다. >> 상태 저장과 라우팅이 한 번에 일어날 때 문제가 발생했다.검색1. router.pus..
Figma 디자인을 Tailwind css 코드로 변환하는 법
오늘은 Anima 플러그인을 이용하여 Figma 디자인을 Tailwind css로 자동 변환하는 법을 설명하려고 한다. https://www.animaapp.com/figma Figma to Code - Export React, HTML & Vue from any Figma designCreate responsive prototypes, export HTML & CSS, React or Vue, or publish live websites from your design. Use Anima for Figma for free!www.animaapp.com 사용법준비물 : 디자인이 된 피그마 1. 피그마 하단의 플러그인 아이콘 클릭2. plugins&widgets 탭에서 Anima 검색, Run 3. 로그인하..
Zustand를 꼭 써야 하는가?
팀 과제(가취뽀) 중 Vintz 튜터님에게 가서 진행상황 보고를 했다. 이력서 페이지에 포인트를 걸고, 그 포인트만큼 차감되는 기능을 구현해야 해서 zustand를 설정하고 있다고 했다. 그런데 튜터님이 zustand를 꼭 써야 하냐는 질문을 하셨다. 그러게. 왜 써야 한다고 생각했지?일단 나의 이유는point state를 여러 곳에 써야 하니까(이력서 페이지, 포인트 상점 페이지 두 곳이지만)Next.js는 App router 라서 props를 어떻게 전달해야 할 지 모르겠음이 두 가지였는데, 병연님은 serverside에서 그냥 point를 가져오면 되지 않나? 라고 하셨다. 듣고 보니 그것도 그런 것 같은게 두 페이지만이라 굳이 zustand를 써야 하나 싶긴 했다.그렇지만 이야기를 하다 보니 확장..
Vintz 튜터님과 두번째 토론. 주제는 서버 사이드 캐싱과 클라이언트 캐싱의 차이점과 Next.js에서의 활용법이었다. 근데 내용이 너~무 어려워서 제대로 공부를 못 해 갔는데, 토론을 하다 보니 Next.js 부분은 강의를 찍으신 Chancellor튜터님께 직접 가는 게 나은 것 같아 튜터님과 Chancellor 튜터님 방이 비자마자 달려갔다. 질문을 드리자마자 너무나 완벽한 정리를 술술 설명해 주셨고 기억이 날아가기 전에 정리를 해 두려고 한다. 1. 캐싱 - 한번 불러온 데이터를 효율화를 위하여 서버나 브라우저 사이드에 저장해주고 빠르게 불러올 수 있도록 하는 프로세스. - Next.js에서는 하고 싶은 기능에 따라 서버 사이드 캐싱/클라이언트 사이드 캐싱 중 더 적절한 옵션을 선택해서 진행한다..
스파르타 강의를 들으면서 4가지 렌더링 방식(SSG, CSR, ISR, SSR)을 배웠다. 그런데 SSR을 배우는 과정에서 SSR는 사용자와 상호작용되지 않는다고 이해했고, 그걸 튜터님한테 말씀드렸는데 hydration이라는 것이 끝나면 상호작용이 가능하다고 하셨다. 이어 hydration에 대해 공부하고 공부한 내용을 토론하자고 말씀을 주셔서 개발 아티클들을 몇 개 뒤져보고 내가 이해한 내용을 기록하려고 한다. 1. 정의 SSR(Server Side Rendering)에서, 서버에서는 사용자의 요청이 있을 때 마다 페이지를 새로 그려서 사용자에게 제공한다. 서버에서 index.html 파일을 제공하고 곧이어 자바스크립트 파일을 제공하는데, 브라우저에서는 html 파일을 미리 로드하고 자바스크립트 파일..