Next.js 프로젝트 (애니 마켓) 제작 시작

기존에 배웠던 지식을 활용하여 내가 만들고 싶은 사이트를 하나 처음부터 제작하기로 했다.

이전부터 고민하던 이미 한번 써본 Create react app이냐

아예 SSR까지 고려가능한 Next.js를 처음 사용해보느냐 

고민하다가 마침 노마드코더 챌린지가 시작되어 같이 Next.js를 배워보며 제작할 예정이다.

애니메이션을 좋아해서 서코같이 애니관련 물품을 사고 파는 사이트를 구현할 예정이다.

 

1. 프로젝트 디자인 및 Html 마크업

https://www.boostcourse.org/web344/project/116/content/100#summary

 

현제 진행하던 제로베이스 프론트엔드 스쿨 3기 Html/CSS 과제편

이번 제로베이스 Html / Css 과제 5편과 Js과제 5편을 하면서 정말 큰 도움을 얻었다.

2주간 모든 과제를 완료하고 리펙토링 중이며 완료되면 느꼇던 점은 블로그에 적을 예정이다.

 

 

먼저 Figma 시안과 더불어 과제 요구서를 보고 과제를 만드는데 정말 많은것을 느낄 수 있었고

 

이번 프로젝트는 TailwindCSS를 사용해 볼 예정인데 기초 CSS에도 정말 많은 지식을 얻었다.

 

 

 

 

 

2. 생각 중 혹은 고려중인 기술 스택

아직 챌린지 진행중이라 어떤 스택을 사용하게 될 진 모르겠지만 생각하고 있는 기능을 나열하고

 

기능에 대해 추가적으로 필요한 스택을 추가할 예정이다.

 

* 구현 예정

• 회원 가입
• 로그인
• 유저 프로필
• 실시간 스트리밍 가능하면 채팅까지
• 상품의 업로드 , 구매 혹은 장바구니 탭까지

사용 확정

1. Next.js

   홈페이지 제작 기본 뼈대 프레임워크 SSR과 SEO를 활용하는 방법까지 익히면 좋을거 같다고 생각한다.

2.  TypeScript
   에러 검출 및 Snippet 사용 협업 작업은 아니지만 비슷한 환경 유지

3. TailwindCSS

   사이트의 전반적인 디자인 제작 라이브러리

4. Vercel with Github (서버리스 구성)
   깃허브 페이지는 SSR을 활용하기 힘들기에 SSR과 SEO를 활용한 스텍

5. React-Hook-Form
   회원가입 및 로그인 페이지를 만들기 위한 보조 라이브러리

 

---

사용 고려 혹은 사용 대기

1. Framer-motion
   사이트 내 전반적인 에니매이션 라이브러리

2. Recoil or Redux
   상태 관리 라이브러리

3. 홈페이지의 용도 및 목적

서울 코믹과 같은 애니메이션 굿즈들의 인기가 마이너하지만 어느정도 있는만큼

 

이러한 굿즈들을 당근 혹은 번개장터같이 사고 팔며 모아서 보는 사이트같이 만들어 볼 예정이다.