기술스택 강의 관련해서 질문드려요.
기술스택 강의 시
데이터베이스 사용 애플리케이션 기술스택은 아래와 같이 말씀주셨고, 실제 프롬프트할때는 lucide-react 도 말씀하셨어요.
다만, 실제로 프로젝트에 설치한 것은 Next.js 와 shadcn 2개인데.. 그렇다면
typescript
zustand
react hook form + zod
supabase 및 supabase client
next.js API routes
lucide-react
위 기술스택은 별도로 설치하지 않아도 괜찮은걸까요? tailwindcss는 next.js 설치시 함께 설치된 것으로 확인했어요.
감사합니다.
안녕하세요! 🙂
결론부터 말씀드리면, 위 항목들을 미리 한 번에 다 설치하실 필요는 없어요. 기능을 구현하면서 필요한 시점에 설치하시면 됩니다.
기술스택 목록은 "이걸 전부 먼저 깔아두세요"라는 의미라기보다, 프로젝트가 어떤 방향으로 갈지 잡아두는 설계도에 가까워요. 그래서 실제로는 해당 기능을 붙이는 단계에서 필요한 것만 설치하게 됩니다.
말씀하신 항목들을 나눠보면 이렇게 정리돼요.
별도 설치가 아예 필요 없는 것도 있어요. Next.js API Routes는 패키지가 아니라 Next.js에 내장된 기능이라 따로 설치할 게 없습니다. TypeScript와 Tailwind CSS는 create-next-app으로 프로젝트를 만들 때 옵션으로 함께 설치돼서, 확인하신 것처럼 이미 들어가 있는 경우가 많아요.
함께 딸려오는 것도 있어요. lucide-react는 shadcn/ui를 설치하면 기본 아이콘 라이브러리로 같이 설치되는 경우가 많습니다.
나머지(Zustand, React Hook Form + Zod, Supabase 클라이언트)는 상태관리·폼·DB 기능을 실제로 붙이는 단계에서 설치하시면 됩니다.
그래서 매번 똑같은 게 아니라, 만드는 프로젝트와 기능에 따라 필요한 것만 설치하는 흐름이라고 보시면 돼요. 경우의 수가 워낙 많아서 "이건 무조건 깔고 시작" 식으로 외우기보다, 구현하면서 필요할 때 설치한다는 흐름만 잡으시면 충분합니다. 어떤 패키지가 필요한지는 클로드 코드가 판단해서 설치 명령까지 제안해주니, 그 부분도 너무 부담 갖지 않으셔도 돼요 🙂
감사합니다 🙏
안녕하세요, 인프런 AI 인턴입니다. agapegood님.
기술스택 관련하여 궁금증이 드신 것 같습니다. 특히, 여러 프론트엔드 및 백엔드 툴을 프로젝트에 어떻게 설치하고 관리하는지에 대한 이해를 돕도록 하겠습니다.
기술스택 구성 요소 및 설치
Next.js:
- 프로젝트 생성 시 함께 설치됩니다. 별도의 설치 없이도
npx create-next-app명령어를 통해 Next.js 프로젝트가 자동으로 구성되어 설치 가능한 환경이 조성됩니다.
- 프로젝트 생성 시 함께 설치됩니다. 별도의 설치 없이도
TypeScript:
- Next.js를 사용하면서 TypeScript를 별도로 추가하실 필요가 없습니다. Next.js는 TypeScript를 기본적으로 지원하며, 필요시
tsconfig.json파일 생성과 함께 설치할 수 있습니다.
- Next.js를 사용하면서 TypeScript를 별도로 추가하실 필요가 없습니다. Next.js는 TypeScript를 기본적으로 지원하며, 필요시
shadcn UI:
- 스타일링 관련 라이브러리로, Next.js와 함께 직접 설치하여 사용할 수 있습니다.
- 스타일링 관련 라이브러리로, Next.js와 함께 직접 설치하여 사용할 수 있습니다.
자주 사용되는 라이브러리 설치 방법:
- Zustand, React Hook Form + Zod, Supabase Client, Lucide-react 등은 특정 기능에 맞게 필요에 따라 프로젝트 내에서 개별적으로 설치할 수 있습니다. 프로젝트 특성에 맞게
npm install [패키지명]명령어를 통해 설치합니다.
- Zustand, React Hook Form + Zod, Supabase Client, Lucide-react 등은 특정 기능에 맞게 필요에 따라 프로젝트 내에서 개별적으로 설치할 수 있습니다. 프로젝트 특성에 맞게
Supabase 및 API Routes:
- Supabase는 백엔드 서비스를 관장하며, 프로젝트 내의 특정 기능을 구현할 때 활용할 수 있습니다. Supabase 관련 클라이언트 라이브러리 역시 필요에 따라 설치해야 합니다.
- Next.js API Routes는 패키지 설치 없이도 프로젝트 내에서 API 경로를 관리할 수 있습니다.
- Supabase는 백엔드 서비스를 관장하며, 프로젝트 내의 특정 기능을 구현할 때 활용할 수 있습니다. Supabase 관련 클라이언트 라이브러리 역시 필요에 따라 설치해야 합니다.
구체적인 설정 방법 및 더 많은 정보 확인하기
- 각각의 라이브러리는 공식 문서를 통해 설치 방법 및 사용하는 법을 더 빠르고 자세하게 알 수 있습니다. 프로젝트에 맞게 적절히 설치하고 구성하십시오.
관련 링크:
- Next.js 공식 문서
- Supabase 공식 사이트
위와 같은 자료에서 더 구체적인 정보를 얻으실 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.