🚀 포트폴리오 프로젝트 시작하기: 환경 설정 및 초기 구성

🚀 포트폴리오 프로젝트 시작하기: 환경 설정 및 초기 구성

개발을 시작하기 전, 프로젝트의 환경을 설정하는 과정은 매우 중요합니다.
포트폴리오 프로젝트를 Next.js(프론트엔드)와 NestJS(백엔드)로 구성하기 위해 초기 설정 및 기본 구조를 구축해 보겠습니다.

---

✅ 1. 프로젝트 개요

🔹 프로젝트 목표

• 개인 포트폴리오 웹사이트를 제작하여 경험과 프로젝트를 효과적으로 소개
• Next.js와 NestJS를 활용하여 풀스택 환경 구성
• PostgreSQL과 Prisma ORM을 사용하여 데이터 관리
• CI/CD를 적용하여 배포 및 유지보수 효율성 극대화

---

✅ 2. 개발 환경 구성

🔹 프론트엔드 환경 설정 (Next.js)

1. Next.js 프로젝트 생성
2. npx create-next-app@latest portfolio cd portfolio
3. TypeScript 설정 추가
4. touch tsconfig.json
5. ESLint & Prettier 설정
6. npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier
7. Tailwind CSS 설치 및 설정
8. npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

---

🔹 백엔드 환경 설정 (NestJS)

1. NestJS 프로젝트 생성
2. npx @nestjs/cli new backend cd backend
3. TypeScript 및 ESLint 설정 추가
4. npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
5. PostgreSQL과 Prisma ORM 설정
6. npm install @nestjs/config @nestjs/typeorm pg typeorm
7. .env 파일 생성 및 환경 변수 추가
8. DATABASE_URL="postgresql://user:password@localhost:5432/portfolio" SHADOW_DATABASE_URL="postgresql://user:password@localhost:5433/portfolio_shadow"

---

✅ 3. 데이터베이스 구성 (PostgreSQL + Prisma)

Prisma ORM을 사용하여 PostgreSQL 데이터베이스를 설정하고, SHADOW_DATABASE_URL을 활용하여 마이그레이션을 안전하게 수행합니다.

🔹 1. Prisma 설치 및 초기화

npm install @prisma/client
npx prisma init

🔹 2. prisma/schema.prisma 파일 수정

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
  shadowDatabaseUrl = env("SHADOW_DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

🔹 3. 데이터베이스 마이그레이션 실행

반응형

1. 마이그레이션을 위한 데이터베이스 생성
2. createdb -U user portfolio createdb -U user portfolio_shadow
3. Prisma 마이그레이션 실행
4. npx prisma migrate dev --name init
5. Prisma 클라이언트 생성
6. npx prisma generate

---

✅ 4. GitHub & CI/CD 설정

1. GitHub 저장소 생성 및 초기화
2. git init git remote add origin <repository-url>
3. GitHub Actions를 활용한 CI/CD 구성 (Vercel & Railway)
   • vercel.json 설정
   • railway.json 설정

---

✅ 다음 단계

• 홈 페이지 (Home) 레이아웃 구현
• 기본적인 API 엔드포인트 설정
• 프로젝트 페이지 (Projects) UI 개발

---