Nextjs 사이드 프로젝트를 하고 싶은데 어떤걸 하면 좋을까 하다가
무료로 사용할 수 있는 API를 검색해 봤다.
그저 흔하고 일반적인 API 목록들 중 단연 눈에 띄는 것은 Spotify 였다.
아침에 눈을 뜨고 저녁에 다시 눈을 감을 때까지 노래와 함께하는 인생을 사는 나로써 다른 선택지는 없었다.
열심히 뒤지고 뒤져 시작하는 Spotify 만들기!
그 장대한 시작을 열어보겠다.
Let's get started :)
Full Stack Spotify Clone: Next 13.4, React, Stripe, Supabase, PostgreSQL, Tailwind (2023)
메인으로 참고한 영상은 위 영상이다. 영어로 수업을 진행하지만 자동번역 자막도 꽤 볼만하니 영어로만 듣기 불편한 분들은 자막 활용을 추천한다.
전체적인 흐름은 해당 영상을 따라가고 중간중간 모르는 것들이 나오면 따로 찾아보고 정리할 예정이다. (해당 영상은 Spotify 클론 코딩 강좌이기 때문에 레이아웃이나 CSS도 많이 다루고 있다. 단지 API만 활용하고 싶은 분들은 앞으로 적을 글의 목차에서 API 부분만 보고 적용해도 좋을 것 같다.)
1. 프로젝트 셋팅하기
공식 문서는 새 Next.js 앱을 만들 때 create-next-app을 사용하라 추천하고 있다
npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app위 명령어를 실행하면 node 버전이 맞지 않는다는 에러가 발생할 수 있다.
Next.js 14버전은 node버전이 18.17.0 이상이어야하기 때문에 그 이하의 버전이 설치되어 있으면 버전을 올려야한다. n 패키지 또는 nvm, asdf등 본인이 node를 설치한 경로를 통해 버전을 변경하면 Next.js가 정상적으로 설치 될 것이다.
해당 명령어가 정상적으로 실행되면 아래와 같은 내용을 확인할 수 있다.
- 프로젝트 이름 - spotify-app
- 타입스크립트 사용 여부 - YES
- ESLint 사용 여부 - YES
- TailWind 사용 여부 - YES
- 'src/' 디렉토리 사용 여부 - NO
- App Router 사용 여부 - YES
- 기본 alias 설정 여부 - NO
순서대로 위에와 같이 설정해주면 프로젝트 생성이 완료된다!
생성된 프로젝트의 디렉토리 구조를 보면 위와 같다.
여기서 나는 src 폴더 유무에 따른 차이가 뭔지 궁금해졌다. 실무에서는 대부분 src 디렉토리를 사용했었는데 현재 보는 강의에서는 src 사용여부를 NO로 설정했기 때문이다.
그리하여 src 디렉토리에 대해 좀 찾아보니...
src 디렉토리는 configuation 파일들과 application 코드를 구분하는 역할을 한다.
같은 레벨에 config 설정파일들이 위치하여 코드를 한눈에 구분하기가 어려운 경우가 있고,
src 안에 소스파일들이 모여있는게 더 명확하여 git 소스 컨트롤에도 더 유용하다고 한다.
결론은 디렉토리 구조를 어떻게 정리하느냐에 차이이므로, 본인의 취향에 맞춰 사용해도 될 것 같다.
npm run dev
# or
yarn dev
# or
pnpm dev이렇게 프로젝트 생성 이후 터미널에서 위 명령어를 실행시키면 'http://localhost:3000/' 에서 다음과 같은 화면을 확인할 수 있다.
