강의를 따라하면서 아래 프롬프트를 Claude Code에 그대로 복사+붙여넣기 하세요. 핵심 원리: 먼저 전체 뼈대를 한 번에 만들고 → 페이지별로 살을 붙여갑니다.

사용법: 각 프롬프트의 ``` 안에 있는 내용을 통째로 복사해서 Claude Code에 붙여넣으면 돼요.

사전 준비

뭘 설치하나요? Next.js는 웹사이트를 만드는 도구예요. 리액트(React)를 더 편하게 쓸 수 있게 해줘요. Tailwind CSS는 디자인을 쉽게 하는 도구예요. text-red-500 이라고 쓰면 빨간 글씨가 돼요!

Next.js 프로젝트 생성

npx create-next-app@latest frontend --typescript --tailwind --eslint --app --src-dir

질문이 나오면 전부 Enter(기본값) 누르면 돼요!

패키지 설치

cd frontend
npm install lightweight-charts

lightweight-charts는 TradingView에서 만든 주식 차트 라이브러리예요. 수익률 그래프를 그릴 때 사용해요.

Flask 서버 실행 확인

# 프로젝트 루트에서
python run.py
# <http://localhost:5001/api/kr/health> 에서 {"status": "ok"} 확인

Part 6에서 만든 Flask 서버가 켜져 있어야 대시보드에서 데이터를 가져올 수 있어요!

Phase 1: 전체 뼈대 생성 (프롬프트 1~2)

왜 뼈대를 먼저 만드나요? 집을 지을 때 골조(철근+콘크리트)를 먼저 세우고, 그 다음에 방마다 벽지를 바르잖아요? 코드도 같아요. 모든 파일과 경로를 먼저 만들어두면, 나중에 페이지마다 내용을 채울 때 깨지지 않아요. 예전에는 “kr/page.tsx에 이거 추가해, 저거 추가해”를 반복하다가 코드가 꼬이는 문제가 있었는데, 이 방식이면 그런 문제가 없어요!

프롬프트 1: 프로젝트 셋업 + API 프록시

이게 뭔가요? 웹사이트(프론트엔드)에서 /api/kr/signals로 데이터를 요청하면, 자동으로 Flask 서버(5001번 포트)로 전달해주는 **다리(프록시)**를 만드는 거예요. 이걸 안 하면 “CORS 에러”라는 빨간 에러가 나요!

next.config.ts에서 Flask 서버로 API 프록시를 설정해줘.

/api/* 요청을 http://localhost:5001로 전달:
  rewrites: [{ source: '/api/:path*', destination: '<http://localhost:5001/api/:path*>' }]

이렇게 하면 프론트엔드에서 '/api/kr/signals'로 요청하면
자동으로 Flask 서버(5001)로 전달돼.

응용 TIP: destination의 주소를 바꾸면 다른 서버로도 연결할 수 있어요. 예를 들어 친구 컴퓨터에서 서버를 돌리고 있다면 http://친구IP:5001로 바꾸면 돼요!