프로젝트 개발
Next.js + NestJS 풀스택 시스템을 로컬에서 구축하기
💡 "막히면 AI에게 물어보세요. 그게 AI 코딩입니다"
🎯 학습 목표
- ✓Next.js 프론트엔드와 NestJS 백엔드를 각각 실행하기
- ✓프론트엔드에서 백엔드 API 호출하는 구조 이해하기
- ✓대화를 통해 기능을 추가하고 수정하기
- ✓에러 발생 시 AI와 함께 디버깅하기
📋 개발 단계별 가이드
1단계Plan 실행 및 프로젝트 구조 생성 (20분)
🎬 Plan 실행하기
- 1. AI가 제안한 계획 검토 (프론트엔드/백엔드 구조 확인)
- 2. "이 계획대로 진행해줘" 또는 "시작해줘" 입력
- 3. AI가 Next.js와 NestJS 파일들을 생성하는 것을 지켜보기
- 4. 프로젝트 구조가 완성되면 다음 단계로
🖥️ 로컬 서버 실행하기
백엔드 (NestJS)
cd backend && npm run start:dev→ localhost:4000
프론트엔드 (Next.js)
cd frontend && npm run dev→ localhost:3000
💡 팁: 터미널 2개를 열어서 백엔드와 프론트엔드를 동시에 실행하세요!
2단계기능 추가 및 수정 (40분)
🔧 기능 수정 요청 예시
디자인 변경
"버튼 색상을 파란색으로 바꿔줘"
기능 추가
"검색 기능을 추가해줘"
레이아웃 수정
"목록을 카드 형태로 보여줘"
데이터 추가
"샘플 데이터 10개 더 추가해줘"
✅ 좋은 습관: 한 번에 하나씩 요청하고, 결과를 확인한 후 다음 요청을 하세요.
3단계디버깅 및 문제 해결 (20분)
🐛 에러 해결 방법
- 1. 에러 메시지 복사: 브라우저 콘솔(F12)에서 에러 확인
- 2. AI에게 보여주기: "이런 에러가 나는데 수정해줘: [에러 메시지]"
- 3. 결과 확인: 수정 후 다시 실행해서 확인
🚨 자주 발생하는 문제
Q: 서버가 실행되지 않아요
A: "npm run dev 실행 시 에러가 나요: [에러 메시지]. 수정해줘"
Q: API 호출이 안 돼요
A: "프론트엔드에서 백엔드 API 호출 시 CORS 에러가 나요. 수정해줘"
Q: 화면이 하얗게 나와요
A: "화면이 비어있어. 콘솔 에러를 확인하고 수정해줘"
Q: 데이터가 전달되지 않아요
A: "API에서 데이터를 받아오지 못해. 네트워크 탭 확인해줘"
4단계마무리 및 테스트 (10분)
✅ 완성 체크리스트
- ☐ 백엔드 서버가 localhost:4000에서 실행되는가?
- ☐ 프론트엔드가 localhost:3000에서 실행되는가?
- ☐ 프론트엔드에서 API 호출이 정상 동작하는가?
- ☐ 핵심 기능 3개 이상 동작하는가?
- ☐ 발표할 때 시연 가능한 상태인가?
👨🏫 1:1 코칭 지원
개발 중 막히는 부분이 있으면 언제든 손을 들어주세요! 강사가 직접 도와드립니다.
🙋 도움 요청 시점
- • 같은 에러가 3번 이상 반복될 때
- • AI의 답변이 이해되지 않을 때
- • 어떻게 요청해야 할지 모를 때
✨ 스스로 해결 시도
- • 에러 메시지를 AI에게 보여주기
- • "왜 이렇게 되는지 설명해줘" 질문하기
- • 다른 방식으로 요청해보기
🔮 이 프로젝트를 실제 서비스로 만들려면?
✅ 오늘 완성
- • localhost에서 동작하는 풀스택 시스템
- • Next.js + NestJS 구조
- • 내 컴퓨터에서 테스트 완료
🚀 심화 과정에서
- • 클라우드 서버에 배포
- • 도메인 연결 (예: myapp.ku.ac.kr)
- • 실제 데이터베이스 연동
- • 교내 시스템 API 연결
💡 오늘 만든 코드는 그대로 배포에 사용할 수 있습니다. 심화 과정에서 자세히 안내드립니다.
⏭️ 다음 세션 예고
🎤 발표 및 공유
완성한 프로젝트를 발표하고, 서로의 아이디어를 공유합니다.
- ✓ 2분 프로젝트 시연
- ✓ 피드백 및 아이디어 공유
- ✓ 심화 과정 안내
👨🏫 강사 노트
⏰ 시간 배분: Plan 실행 20분, 기능 개발 40분, 디버깅 20분, 마무리 10분
🎯 핵심 메시지: "완벽하지 않아도 됩니다. 동작하는 프로토타입이 목표입니다."
💬 순회 코칭: 5분마다 전체 참가자 상황 체크, 막힌 분 우선 지원
🔄 시간 관리: 15:20까지는 기본 기능 완성하도록 독려