[D'art] Next.js로 리팩토링하기 3일차

이전까지 과정에서 완성된 것은 navbar에 대한 UI와 기타 환경 세팅하는 부분은 어느정도 정돈이 된 것 같다. middleware 및 tailwndcss에 적용해야하는 부분이 많아서 실상 페이지의 UI와 기능은 거의 구현된 것이 없기에 한 페이지씩 완성을 시켜나가는 식으로 해보기로 했다.

 

📦 목표

1. 확실한 목표 설정해서 완성하기
2. LoginPage UI 완성하기
3. MainPage UI 완성하기

대부분의 UI나 페이지의 구성을 조금씩 변경을 해야한다. 좀 더 클린한 코드가 무엇인지 분석하고 왜 수정하였는지도 기록해 놓자. 가장 큰 중점은 너무 과하지 않은 추상화와 가독성 개선에 초점을 두자

 

---

 

📋 진행과정

1️⃣ LoginPage UI 완성하기

1. Layout은 지난시간에 어느정도 완성이 되었기에 form 구성요소를 시작으로 UI를 먼저 완성해보자
2. 현재 적용된 react-hook-form을 좀 더 가독성 좋고 간결하게 사용할 수 있는지에 대해서 고민해보자
3. 완성된 이후엔 mock data를 통해 test를 해보자
4. 시간이 된다면 test library를 적용해서 완성한 UI에 대해서 어떤 테스트를 적용할 수 있는지 한 번 시도해보자

 

• inputField 가져오기

inputField를 가져와서 분석을 하던 중 button에 대한 처리가 같이 들어있는 부분이 있었다 그래서 이 부분은 분리를 하기로 생각을 했다.

일단 tailwindcss로 변환해서 가져왔는데 모양이 영 이상하다. 가져오면서 blind icon은 일단 살렸고, type을 user와 관련된 내용을 몇 개 가져왔다. react-hook-form은 따로 건드릴 내용 없이 잘 가져와졌다.

 

2️⃣ 시멘틱 Tag 적용하기

시멘틱 Tag가 SEO에 도움이된다는 얘기를 들었다. 그래서 실제로 이번 리팩토링 프로젝트 동안 좀 신경을 써서 적용을 한 후 이전과 비교해보는 식으로 해보려고 한다.