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

1일차에서는 기본적인 세팅을 비롯해서 환경을 만드는데 시간을 많이 사용한 것 같다. 또한 app router를 적용해서 파일구조를 바꾸는 것과 navbar를 어떻게 layout을 이용해서 가장 효율적으로 rendering시킬지에 대한 고민을 많이 하였다. 이번에는 style 라이브러리를 tailwindcss로 바꾸고 navbar를 비롯해서 여러 page의 기초가 되는 부분을 만들고, 만들면서 좀 더 클린한 코드가 무엇일까에 대한 고민을 많이 해보려 한다.

 

---

 

📦 목표

일부 정적 페이지 및 컴포넌트 구현

아직까지 server를 연결하지 않는 선에서 정적 페이지 및 기초가 될 몇 component를 구현해보자

1. Navbar 구현하기
2. IntroPage, HomePage, LoginPage, SignupPage 기초 잡기
3. break point 설정 및 적용 

 

클린 코드 구현하기

코드를 다시 한 번 보니 추상화에 대한 과한 생각과 집착이 있었던 것으로 보인다. 현재 내가 봤을 때도 한 눈에 뭔지 제대로 알아보기 힘들기에 필요한만큼만 과하지 않게 DX를 개선해서 코드를 구현해보자.

 

 

---

 

📋 진행 과정

1️⃣ Navbar 구현하기

Navbar를 구현하면서 내가 사용했던 코드의 가독성에 대해서 한 번 더 체크하고, tailwindcss로 animation이나 각종 pwa 부분을 어떻게 구현하는지에 대해서 감을 잡아보자. 또한 Next.js를 사용함으로써 사용할 수 있는 다양한 기능도 체험해 보자.

• 트러블 슈팅 1-1을 통해서 navbar의 css를 모두 적용할 수 있었다.
• break point를 설정하고, 이에 따라 반응형 웹을 적용해보자.
• container-query를 사용해서 좀 더 명시적으로 반응형 웹을 적용해보자.

2️⃣ IntroPage 분석하기

Intro Page는 전적으로 팀원이 만든 페이지기에 이 페이지에 대해서 어떤 기술을 적용하고 고민을 했는지 알아보자. 이후 필요한 부분은 수정하고 차용하면서 클린 코드 실력을 좀 더 늘려보자.

• lazy loading 사용의 의미를 생각했을 때 네트워크가 좋지 않을 때 loading component를 보여주는 것이 핵심일 것이라는 생각을 했는데 막상 페이지를 받아오는데 걸리는 시간동안에는 흰 화면이 나타나기에 이 부분을 고쳐보자.

 

3️⃣ Middleware 사용하기

next.js의 순기능인 middleware를 통해 다양한 문제를 해결할 수 있다.

• home page로 redirect 하는 것, 없는 경로에대해서 redirect하는 것을 구현해보자.
• visit라는 cookies를 만들어서 방문 시간 계산해서 intro 띄울지 말지 정하는 기능 구현하기.

 

4️⃣ Login Page 분석하기

input을 이용해서 값을 입력 받는 부분이 있기에 server action을 사용해서 refactoring을 해보자고 마음을 먹었고, 기타 여러 layout요소들에 대해서는 layout.tsx 파일로 분리해서 관리를 해보자 그리고 input을 react-hook-form으로 관리하고 있는 부분도 수정을 할지 말지 정해보자

• layout 요소 분리하기

 

---

 

⛔️ 트러블 슈팅

1-1. TailwindCSS를 통한 custom styling 및 animation 적용 방법, 상태 의존 클래스와 관련된 에러

해결 및 상세 내용

 

1-2. container-query를 사용해서 특정 컴포넌트를 hidden으로 처리하는 것이 좋은 것인가?

 

 

2-1. middleware 사용해서 사용자 지정 경로만 사용하게끔 바꾸는 방법과 matcher의 중요성

해결 및 상세 내용