개발일기장/Next.js로 리팩토링하기
-
[D'art] 로그인 / 회원가입 기능 구현하기개발일기장/Next.js로 리팩토링하기 2025. 2. 21. 08:45
정보처리기사 실기를 준비하느라 프로젝트에 대해서 좀 소홀했던 것 같다. 다시 시작한다는 마음으로 오늘은 꼭 회원가입 / 로그인을 구현하고 말겠어... 📋 목표로그인 UI 완성하기.로그인 기능 구현하기.회원가입 UI 완성하기.회원가입 기능 구현하기.Supabase와 연동하기.코드 리뷰 및 개선 점 찾기.🖥️ 진행 사항1️⃣ 회원가입 UI 완성하기1-1. 약관동의 상태관리 어떻게 할까?일단 상위 노드에서 하위 노드의 값을 조절하는 방식으로 하는 것이 좋다고 생각이 들었으며 check 여부를 최대한 간단히 나타내고자 하였다."use client";...const SignupAgreePage = () => { const [agreeState, setAgreeState] = useState([ fals..
-
[D'art] Next.js로 리팩토링하기 4일차개발일기장/Next.js로 리팩토링하기 2025. 2. 3. 14:33
기록물 작성이 제대로 되지 않는 것 같다 순차적으로 하나씩 해결을 해나가야하는데 자꾸 이거저거 손이 뻗다보니 중간에 잘 작성을 안하게 되는 것 같다. 4일차부터는 이러한 습관부터 먼저 들여서 하나씩 해결해서 프로젝트를 완성해보자. 📦 목표1️⃣ Signup Page 완성하기App router를 통해서 경로를 어떻게 설정해야할지에 대한 고민을 많이 해야할 것 같고 기타 input의 state관리나 2단계로 나뉘는 과정 중 순서를 보장할 수 있는 방법도 기존의 방법에서 더 나은 방법이나 SSR을 어떻게 잘 적용할 수 있는지 고려해보자. 알림창도 하나 있으면 좋을 것 같으니깐 Page가 완성되면 Alert을 하나 만들어보자. - UI 만들기 Header의 위치를 어떻게 해야할까?page가 Agree와 Inf..
-
[D'art] Next.js로 리팩토링하기 3일차개발일기장/Next.js로 리팩토링하기 2025. 1. 28. 14:20
이전까지 과정에서 완성된 것은 navbar에 대한 UI와 기타 환경 세팅하는 부분은 어느정도 정돈이 된 것 같다. middleware 및 tailwndcss에 적용해야하는 부분이 많아서 실상 페이지의 UI와 기능은 거의 구현된 것이 없기에 한 페이지씩 완성을 시켜나가는 식으로 해보기로 했다. 📦 목표확실한 목표 설정해서 완성하기LoginPage UI 완성하기MainPage UI 완성하기대부분의 UI나 페이지의 구성을 조금씩 변경을 해야한다. 좀 더 클린한 코드가 무엇인지 분석하고 왜 수정하였는지도 기록해 놓자. 가장 큰 중점은 너무 과하지 않은 추상화와 가독성 개선에 초점을 두자 📋 진행과정1️⃣ LoginPage UI 완성하기1. Layout은 지난시간에 어느정도 완성이 되었기에 form 구성요소..
-
[D'art] Next.js로 리팩토링하기 2일차개발일기장/Next.js로 리팩토링하기 2025. 1. 23. 10:07
1일차에서는 기본적인 세팅을 비롯해서 환경을 만드는데 시간을 많이 사용한 것 같다. 또한 app router를 적용해서 파일구조를 바꾸는 것과 navbar를 어떻게 layout을 이용해서 가장 효율적으로 rendering시킬지에 대한 고민을 많이 하였다. 이번에는 style 라이브러리를 tailwindcss로 바꾸고 navbar를 비롯해서 여러 page의 기초가 되는 부분을 만들고, 만들면서 좀 더 클린한 코드가 무엇일까에 대한 고민을 많이 해보려 한다. 📦 목표일부 정적 페이지 및 컴포넌트 구현아직까지 server를 연결하지 않는 선에서 정적 페이지 및 기초가 될 몇 component를 구현해보자Navbar 구현하기IntroPage, HomePage, LoginPage, SignupPage 기초 잡..