프로젝트 환경은 다음과같습니다.
node.js v18.20.5
next.js v15.0.0
shadcn/ui v0.0.4
우선 리액트 + Next.js 프로젝트 생성을 위해 Node.js를 설치합니다.
Node.js란?
서버 사이드에서 JavaScript를 실행할 수 있게 해주는 JavaScript 런타임 환경입니다. 전통적으로 JavaScript는 웹 브라우저에서 클라이언트 측 코드로만 실행되었으나, Node.js는 이를 서버 측에서도 실행할 수 있도록 해줍니다. 즉, 서버에서도 JavaScript를 사용하여 애플리케이션을 개발할 수 있게 해주는 기술입니다.
Node.js 설치 후 cmd창에서 프로젝트 생성 명령어를 실행합니다. 명령어는 다음과같습니다.
npx create-next-app@15.0.0 (프로젝트 이름)
→리액트 + Next.js 프로젝트를 생성하는 명령어입니다. 또한 Next.js의 프로젝트 초기화에 필요한 모든 설정을 자동으로 생성해주는 도구입니다. @15.0.0은 create-next-app의 특정 버전을 지정하는 부분입니다. 이 명령어는 create-next-app의 버전 15.0.0을 사용하여 프로젝트를 생성합니다. @15.0.0을 생략하면 최신 버전이 사용되며, 특정 버전을 명시하면 그 버전을 기준으로 프로젝트가 생성됩니다.
npm run dev
→프로젝트 생성 후 결과 테스트 명령어
npm install @shadcn/ui
→shadcn/ui 라이브러리 설치 명령어 (버전 이슈로 오류가 발생할수있음)
npx shadcn@latest init-d
→초기화 후 폴더 생성 명령어
shadcn/ui 라이브러리 설치 후 컴포넌트 추가 방법 (https://ui.shadcn.com/docs/components/button)
예를 들어 버튼이면
npx shadcn@latest add button
이 명령어로 components/ui 폴더에 button.jsx파일이 생성됨
이제 사용할 페이지에서
import { Button } from “@/components/ui/button” 추가후 사용
<Button variant=”outline”>Button</Button>
프로젝트 구조
├─app
│ │ globals.css
│ │ layout.js
│ │ page.js
│ │
│ ├─account
│ │ ├─admin
│ │ │ page.js
│ │ │
│ │ └─user
│ │ page.js
│ │
│ ├─fonts
│ │ GeistMonoVF.woff
│ │ GeistVF.woff
│ │
│ ├─history
│ │ ├─admin
│ │ │ page.js
│ │ │
│ │ └─user
│ │ page.js
│ │
│ ├─join
│ │ page.js
│ │
│ └─login
│ page.js
│ ├─components
│ │ header.js
│ │
│ └─ui
│ button.jsx
│ calendar.jsx
│ card.jsx
│ input.jsx
│ label.jsx
│ select.jsx
│
└─lib
utils.js
