내 아이디어와 비슷한 유형의 유튜브 영상을 찾아본다. 해당 영상을 그대로 따라해보면서 전체 코드를 체험해 본다.

오류와 만날때는 ai, 검색 등의 도움으로 최대한 해결한다. 이때 심각하게 찾아오는 삽질하는 고통(독학의 고통?)을 참고 이겨내자. ㅠㅠ

프로젝트 전반적인 흐름을 기억하기 위해 단계별로 간단하게 기록해본다.

유튜브 팟캐스트 프로젝트 영상 따라하기.

https://www.youtube.com/watch?v=zfAb95tJvZQ&t=996s

목표.

1.프로젝트 완료하기

2.완료한 프로젝트를 나만의 새로운 아이디어로 커스텀하기(서비스의 전반적인 아이디어를 문서화 하고 추가 기능을 진행한다.)

3.실제로 도메인과 서버 연결하여 서비스 해보기

[프로젝트 시작 1 :: 설정하기]

1. 프로젝트 폴더 만들기

2. nextjs 설치 : https://nextjs.org/docs/getting-started/installation

npx create-next-app@latest

3. shadcn ui 설치 : https://ui.shadcn.com/docs/installation/next

npx shadcn-ui@latest init

4. tailwind.config.ts , globals.css, app/page.tsx 수정

1. git 소스코드 : https://github.com/adrianhajdin/podcastr/blob/main/tailwind.config.ts

2. css : https://tailwindui.com/documentation

3. ui : https://ui.shadcn.com/docs/components/button

4. - button components 추가 : npx shadcn-ui@latest add button

5. 피그마 디자인 파일 다운로드

1. 피그마 링크