#2 프론트 세팅 및 홈페이지 구현

Link

Issue : https://github.com/spring-bud/mate-fe/issues/2

PullReq : https://github.com/spring-bud/mate-fe/pull/3

구현 사항

 1. 먼저 프로젝트에서 쓰일 간단한 부분들을 세팅했다.

• shadCn
• react-icons
• framer-motion
• tailwind

2. 전체 아키텍처를 잡고 Home에서 사용될 컴포넌트들을 생성했다.

• customImage
• banner
• category
• popularItem
• header
• footer
• popularFreelancer

3. 임시 mock데이터 객체 생성했다.

 

고민 & 의사결정 과정

 

1. Next 버전

 

 이번 프로젝트에선 AppRouter로 사용하려 한다. 

• SEO
• 상태보존
• 부분 렌더링
• 서버액션

2. 아키텍처

 

 아키텍처는 Smart-dumb 로 구현하려한다. 서버컴포넌트에서 비즈니스 로직을 처리하고, 해당 컴포넌트에서 props로 view컴포넌트들에게 데이터를 전달한다.

test/
  ├── components/         # Dumb Components
  │   ├── Banner.tsx     # UI만 담당
  │   ├── Category.tsx
  │   └── PopularProduct.tsx
  │
  └── page.tsx           # Smart Component
      # 데이터 페칭, 상태 관리
      # 하위 컴포넌트들에게 props 전달

 

 

 프로젝트에 클라이언트 상태와, 서버상태를 분리해서 관리할 예정이고, 또한 캐싱전략을 사용하기 위하여 각 폴더들의 관심사는 명확하게 분리하고싶었다. 따라 page.tsx에서 페칭과 상태관리를 하고 하위 components에 전달할 것이다. 여기서 예상되는 문제점은 프롭 드릴링이 존재하는데, 아직은 구현을 시작하지 않았지만 2가지정도의 방법을 생각하고있다.

 

1. 해당 페이지에서만을 위한 전용 상태관리

     1 - a. context사용

           해당 페이지에서만 국한될 context사용

     1 - b. props 집중화

           하위 컴포넌트들에 전달할 데이터를 한 객체에 담아 필요한 데이터만 전달.

 

2. 전역상태관리 라이브러리

 

 

좀 더 공부해가며 최적의 방향으로 결정하려 한다.

 

3. axios vs fetch

기존 편리함을 위하여 늘 axios를 써왓지만, server컴포넌트와 호환성이 뛰어난 정보를 주어들어 자세하게 공부한 후 더 좋은방향으로 결정하려한다.

 

 

개선사항

...

학습사항

...

 

에러슈팅

...

보완해야 할 점

1. API 개발 작업에 대한 의존성 낮추자(type 등)

너무 늦춰지고있어 속도를 내보려 한다.

 

2. Mock Service Worker 공부해서 데이터 모킹하기.

 

참고자료

...