(started on 31st May)

프로젝트 링크: https://recipe-app-gold-gamma.vercel.app/recipes

프로젝트 배경 및 기획

• React, TypeScript, RTK+RTK Query, Tailwind CSS 실습이 주 목적이다.
  • 그리고 이후에 상태관리 + 데이터 페칭 부분을 또 Zustand + Tanstack Query 조합으로 바꿔보는 것도 목표다.
  • 아예 별개 파일/훅을 만들어서 분리해볼 수 있으려나? 해보면서 고민해보자. 브랜치를 파야되나? 레포를 파야되나? 파일만 분리해서 빌드 옵션을 건드려야되나?
• 개인적인 필요에 의한 레시피 CRUD 사이트를 기획했다.
  • 주요 기능:
    • 레시피 목록 및 상세 페이지
    • 상세 페이지 포함 정보
      • 요리(레시피) 이름
      • ingredients
        • 요거 태그 형식으로 구현해서 나중에 태그 기반으로 자동 완성 및 검색 가능하도록.
      • 레시피
        • 배열로 구현. 1번, 2번 이렇게.
      • 최초 생성 날짜, 마지막 수정 날짜

셋팅 관련 (기술 스택)

프론트

스택: React, TypeScript, TailwindCSS, shadcn ui, React Router(react-router-dom), RTK, RTK-Query

• Create React App + TypeScript template으로 리액트 프로젝트 생성
• Tailwind CSS 설치
• 기본적 라우팅을 위한 React Router 설치 (v6)
• UI 컴포넌트 구현이 프로젝트의 주 목적은 아니다 보니 이 부분은 라이브러리를 사용해 효율적으로 개발하고 싶은 생각이 있었다. 그렇다고 MUI 같은 디자인 라이브러리를 사용하고 싶지는 않았다(써봤을때 경험이 별로였다). 리액트 라이브러리 글에서 Headless UI라는 게 있다는걸 알게 되어서 사용하기 편할 것 같아서 어떤 것들이 있나 알아 봤다.
  • Radix UI vs. shadcn ui
    • shadcn이 Radix UI 기반이긴 한데, tailwind랑 같이 쓰기 더 편하게 만들어졌다고 한다. 그리고 최근에 더 핫한 느낌이 있는 것 같았다. 그리고 라이브러리가 아님을 표방하고 있는 만큼 더 가볍고, 로우 레벨이고. 호환성이 좋을 것 같은 느낌이 들었다.
      • shadcn 설치하는 부분이 조금 번거로웠다. 홈페이지 보면 라이브러리가 아니기 때문에 설치 안해도 된다. 의존성 없다. 라고 하는데, 사실 radix 기반이기 때문에 radix는 설치해야 하는등, 이것저것 설치할 것도 있고, configuration할 부분도 있었다. 그리고 tsconfig.json에서 paths option설정해서 alias하는 부분도 안되어서 결국 일단 상대경로 사용하기로 했는데. 요부분도 왜 안되는지 모르겠다.
    • tailwind를 써보는게 목적중에 하나였기 때문에, Radix보다는 shadcn을 써보기로 했다.
• 배포는 Vercel..? 한번 알아보자. ⇒ Vercel로 배포하였다(20th Jun.)
• reduxjs/toolkit 과 react-redux를 설치하였다. (RTK Query는 @reduxjs/toolkit 안에 포함되어 있다)
  • https://redux.js.org/tutorials/quick-start 여기 따라서 기본 셋팅을 하였다.
    • Creating a Redux Store, Providing the Store to React을 진행했다. creating a slice의 경우 우선은 RTK Query를 사용한 API slice를 먼저 사용해볼 것이라서 진행하지 않았다.
  • RTK Query 셋팅을 위해 얘도 참고하였다: https://redux-toolkit.js.org/tutorials/rtk-query

백

• mockapi.io에 가입해서 말그대로 mock api를 만들어서 활용해보려고 한다. 기능이 부족하거나 아무튼 한계를 느끼기 전까지는 최대한 이걸로 개발해보려고 한다.
• 어디까지나 주요 목적은 프론트엔드 개발 실습이기 때문에, 백에는 힘을 좀 덜들이고 싶다.

폴더 구조 (파일 정리)

• Next.js 튜토리얼을 참고해 보고 있다.
  • pages에는 layout과 각 페이지 최상위 컴포넌트.
  • UI에는 ui 컴포넌트

개발 내용 / 배운 내용 구체적 정리