"LevelUp-Dashboard"는 차트 중심의 대시보드를 설계하고 구현하는 예제 프로젝트입니다. 이 프로젝트는 "레벨업 리액트 프로그래밍 with Next.js" 책의 11장에서 상세하게 다루어집니다. 본 프로젝트는 Next.js와 다양한 라이브러리를 활용하여 현대적인 웹 대시보드를 개발하고 사용자 인터페이스, 데이터 관리, 웹 바이탈 지표 추출 및 수집 등에 대해 심도 있는 연습을 제공합니다.
이 프로젝트의 실제 동작은 https://levelup-analytics-dashboard.vercel.app/dashboard에서 확인할 수 있습니다. 여기서 프로젝트의 기능들을 실시간으로 체험하고 인터페이스와 상호작용을 경험할 수 있습니다.
- 웹 애플리케이션 스타일링과 메인 페이지 구축: 현대적인 디자인을 적용한 스타일링과 메인 페이지의 기본 레이아웃 구축
- 버셀 Postgres 데이터베이스 설정: 애플리케이션의 데이터를 저장하고 관리하기 위한 데이터베이스 환경 설정
- 사용자 인증 구현: 회원가입 및 로그인 기능을 포함한 사용자 인증 시스템 구축
- 대시보드 사용자 인터페이스 개선: 사용자 경험을 향상시키기 위한 사이드 메뉴 및 다른 UI 요소 개발
- 사용자 계정 관리 및 웹 API 키 발급: 사용자 계정 관리 기능과 웹 API 사용을 위한 키 발급 시스템 구현
- 프로젝트 관리 기능: 사용자가 자신의 프로젝트를 관리할 수 있는 기능 구현
- 웹 바이탈 지표 정보 추출 및 수집: 웹 애플리케이션의 성능 지표를 추출하고 수집하는 기능
- 데이터베이스와의 통합: 라우터 핸들러를 통해 데이터를 수신하고 데이터베이스에 저장
- 대시보드 UI 구성: 메인 대시보드와 프로젝트별 상세 대시보드의 사용자 인터페이스 구성
- 버셀 플랫폼 배포: 프로젝트를 버셀 배포 플랫폼에 배포하고, 추후 업데이트를 위한 필요 사항 기록
이 프로젝트를 통해 사용자는 Next.js와 다양한 기술을 사용하여 실제 대시보드를 개발하는 과정을 경험할 수 있으며, 이를 통해 웹 애플리케이션 개발의 심도 있는 지식을 얻을 수 있습니다.
"LevelUp-Dashboard" 프로젝트는 다음과 같은 기술 스택과 라이브러리를 사용합니다.
- Next.js: 현대적인 웹 애플리케이션을 위한 리액트 기반의 프레임워크
- React: 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리
- TypeScript: 자바스크립트에 타입을 추가하여 더 안정적인 코드 작성을 가능하게 하는 언어
- @heroicons/react: 간결한 SVG 아이콘 컬렉션
- @tailwindcss/forms: Tailwind CSS를 위한 폼 스타일링 플러그인
- @tremor/react: 리액트 기반의 컴포넌트 라이브러리
- @vercel/postgres: Postgres 데이터베이스와의 통신을 위한 라이브러리
- autoprefixer: CSS에 자동으로 벤더 프리픽스를 추가
- bcrypt: 비밀번호 해싱을 위한 라이브러리
- clsx: 클래스 이름을 결합하기 위한 유틸리티
- next-auth@beta: Next.js 애플리케이션을 위한 인증 라이브러리
- use-debounce: 디바운스 훅을 제공하는 라이브러리
- uuid: 고유 식별자 생성을 위한 라이브러리
- zod: 타입스크립트를 위한 데이터 검증 라이브러리
- @types/bcrypt, @types/uuid: 각각 bcrypt와 uuid 라이브러리의 TypeScript 타입 정의
- @vercel/style-guide: Vercel의 스타일 가이드
- dotenv: 환경 변수 관리
- eslint-config-prettier, prettier: 코드 포맷팅 및 린팅 도구
- prettier-plugin-tailwindcss: Tailwind CSS와 함께 사용하기 위한 Prettier 플러그인
"LevelUp-Dashboard" 프로젝트를 실행하기 위해서는 다음 환경 변수가 필요합니다. 이 변수들은 프로젝트의 데이터베이스 연결, 인증, 분석 기능 등에 사용됩니다.
POSTGRES_URL: PostgreSQL 데이터베이스에 접속하기 위한 URLPOSTGRES_PRISMA_URL: Prisma를 사용하여 PostgreSQL 데이터베이스에 접속하기 위한 URLPOSTGRES_URL_NON_POOLING: 풀링이 비활성화된 PostgreSQL 데이터베이스 접속 URLPOSTGRES_USER: 데이터베이스 사용자 이름POSTGRES_HOST: 데이터베이스 호스트 주소POSTGRES_PASSWORD: 데이터베이스 접속을 위한 비밀번호POSTGRES_DATABASE: 사용할 데이터베이스의 이름
AUTH_SECRET: 인증에 사용되는 비밀 키.openssl rand -base64 32명령어로 생성할 수 있습니다.AUTH_URL: 인증 관련 API의 URL. (예:http://localhost:3000/api/auth)
NEXT_PUBLIC_ANALYTICS_URL: 클라이언트 측에서 사용할 분석 API의 URLANALYTICS_URL: 분석 데이터를 수집하기 위한 서버 측 API URLANALYTICS_USER: 분석 서비스를 사용하는 사용자의 이메일 주소ANALYTICS_KEY: 분석 서비스를 위한 API 키ANALYTICS_PROJECT: 분석 대상 프로젝트 이름
본 프로젝트를 로컬 환경에서 개발하기 위해서는 환경 변수가 필요합니다. 이를 위해 제공된 .env.example 파일을 참고하세요.
- 프로젝트의 루트 디렉토리에서
.env.example파일을 찾습니다. - 이 파일을
.env.local로 복사합니다.cp .env.example .env.local .env.local파일을 열고 필요한 환경 변수들을 실제 환경에 맞게 채웁니다..env.local파일에 입력한 환경 변수들은 로컬 개발 환경에 적용됩니다.
.env.local파일에는 민감한 정보가 포함될 수 있으므로 이를 공개하지 않도록 주의해야 합니다.- 실제 배포 환경에서는 적절한 방법으로 환경 변수를 설정해야 합니다.
- 필요한 소프트웨어: Node.js, npm
- 저장소 복제
- 의존성 설치
npm install - 환경 변수 설정
- 로컬 서버 실행
npm run dev - 브라우저에서
http://localhost:3000접속
본 프로젝트 뿐만 아니라 "레벨업 리액트 프로그래밍 with Next.js" 책에 대한 모든 질문과 답변은 https://reactnext-central.xyz/levelup 웹 페이지에서 진행됩니다. 이 페이지를 통해 궁금한 점을 해결하고 다른 사용자들과 지식을 공유할 수 있습니다.
본 프로젝트는 MIT 라이선스 하에 제공됩니다. 자세한 내용은 license.md 파일을 참조하세요.
본 "LevelUp-Dashboard" 프로젝트는 Vercel의 next-learn 프로젝트를 기반으로 개발되었습니다. 특히, 원본 프로젝트의 메뉴 구성, 애니메이션, 로그인 처리 방식 등이 본 프로젝트의 개발에 영감을 주었습니다.
- 원본 프로젝트의 기본 구조를 참고하여 메뉴 구성과 애니메이션을 구현
- 로그인 관련 기능을 참조하여 사용자 인증 시스템 구축
- 회원 가입 및 관리: 사용자가 자체적으로 계정을 생성하고 관리할 수 있는 기능
- 대시보드 차트: 대시보드에 다양한 차트와 시각적 요소를 추가하여 데이터를 직관적으로 표시
- 프로젝트 관리 기능: 사용자가 자신의 프로젝트를 관리하고 추적할 수 있는 기능
- 웹 바이탈 지표 추출 및 수집: 웹 성능의 중요한 지표인 웹 바이탈을 추출하고 수집하는 기능
- 웹 바이탈 지표에 대한 차트: 추출된 웹 바이탈 지표를 시각적으로 분석하고 표시하는 차트 구현
- 라우트 핸들러를 통한 데이터 전송 및 데이터베이스 저장: 수집된 데이터를 서버측에서 DB로 저장
이러한 추가적인 기능들은 "LevelUp-Dashboard" 프로젝트를 더욱 포괄적이고 실용적인 대시보드로 발전시키는 데 중점을 두었습니다.