ChanghyukBan주가 차트가
내 브라우저에 뜨는 마법
검은 터미널을 넘어 진짜 웹사이트 만들기
🎯 이번 강의의 목표
웹브라우저 주소창에 localhost:3000을 쳤을 때 삼성전자 주가가 라인 차트로 그려진 진짜 웹페이지가 뜨게 만듭니다. 코드는 한 줄도 직접 안 씁니다.
✅ 2편 복습: 2편에서는 터미널에 숫자가 출력됐죠. 오늘은 그 데이터를 웹사이트 차트로 보여주는 단계입니다.
📌 이번 편 순서
- 주가 데이터 받기 (yfinance 사용, 5분)
- 백엔드 만들기: FastAPI 서버 (10분)
- 프론트엔드 만들기: React 화면 (15분)
- 차트 그리기: Recharts로 시각화 (10분)
- 웹브라우저에서 결과 확인 (5분)
잠깐, 용어 정리부터
이번 편부터 자주 나올 용어 3가지만 알고 갑시다.
🍴 백엔드 (Backend)
식당의 주방입니다. 손님(웹사이트)이 "삼성전자 주가 주세요" 하면 데이터를 찾아 돌려줍니다. 우리는 FastAPI라는 파이썬 도구로 만듭니다.
🍽️ 프론트엔드 (Frontend)
식당의 홀입니다. 손님이 직접 보고 만지는 부분. 버튼, 입력창, 차트가 다 여기 있습니다. React로 만듭니다.
📊 Recharts
차트 그리는 도구입니다. "데이터 줄게, 라인 차트 그려줘"라고 시키면 알아서 그려줍니다.
💡 핵심 구조: 프론트엔드(웹사이트) → 백엔드(주방)에 "주가 주세요" 요청 → 백엔드가 yfinance로 데이터 가져옴 → 프론트엔드가 받아서 차트로 그림. 이 흐름만 이해하면 됩니다.
STEP 1. 2편에서 만든 폴더 열기
2편에서 만든 stock-analyzer 폴더를 VS Code로 엽니다.
VS Code 열기
VS Code 실행 → [File] → [Open Folder] → stock-analyzer 폴더 선택. 터미널도 열어두세요 ([Terminal] → [New Terminal]).
STEP 2. 프로젝트 구조 새로 짜기
이번 편부터는 백엔드와 프론트엔드를 함께 만들어야 합니다. Claude Code를 실행하고 첫 명령을 내립시다.
2-1. Claude Code 실행
터미널에서:
2-2. 폴더 재구성 명령
아래 명령을 그대로 Claude에게 붙여넣으세요.
backend와 frontend 폴더를 만들고, 2편에서 만든 main.py와 .env는 backend 폴더로 옮겨줘.
Claude가 폴더를 정리해주면 좌측 파일 탐색기에 이렇게 보일 겁니다.
├── backend/
│ ├── main.py
│ └── .env
└── frontend/ (곧 만들 예정)
STEP 3. 백엔드 만들기 — 데이터 주는 주방
이제 백엔드를 만들 차례입니다. 백엔드의 역할은 두 가지.
- 2편에서 만든 재무제표 가져오기를 웹 주소로 받게 변환
- 주가 데이터(yfinance)를 새로 추가
3-1. Claude에게 백엔드 명령
아래를 그대로 복사해서 붙여넣으세요.
backend 폴더에 FastAPI 서버를 만들어줘.요구사항:
1.
/api/financials/{stock_code} 엔드포인트 — 2편의 DART 재무제표 가져오는 기능을 여기로 옮겨줘2.
/api/price/{stock_code} 엔드포인트 — yfinance로 최근 1년 일별 주가를 가져와서 날짜와 종가를 JSON으로 반환3. CORS 설정 추가 (프론트엔드에서 호출할 수 있도록)
4.
requirements.txt 파일 생성5. 서버 실행 명령어도 알려줘
💡 CORS가 뭔가요?
백엔드와 프론트엔드는 서로 다른 주소에서 돕니다 (백엔드: 8000번, 프론트엔드: 3000번). 기본 보안 정책상 서로 못 부르게 막혀 있는데, CORS 설정이 "얘는 친구야"라고 알려주는 역할입니다.
3-2. 라이브러리 설치
Claude가 안내하는 설치 명령을 그대로 실행. 보통 이렇습니다.
pip install fastapi uvicorn yfinance requests python-dotenv
3-3. 백엔드 서버 실행
backend 폴더 안에서:
아래 같은 메시지가 뜨면 성공.
3-4. 백엔드 작동 확인 (중요!)
브라우저 주소창에 입력:
FastAPI가 자동으로 만들어준 테스트 화면이 뜹니다. 두 개의 엔드포인트(/api/financials, /api/price)가 보이면 성공.
✅ 직접 테스트해보기
테스트 화면에서 /api/price/005930 클릭 → Try it out → stock_code에 005930.KS 입력 → Execute. 주가 데이터 JSON이 뜨면 백엔드 완성!
⚠️ 중요: 백엔드 서버는 계속 켜둬야 합니다. 터미널을 끄지 마세요. 다음 단계 진행하려면 새 터미널을 하나 더 여세요. VS Code 터미널 우측 위 + 버튼으로 추가 가능.
STEP 4. 프론트엔드 만들기 — 사용자가 보는 화면
이제 사용자가 실제로 보고 만질 웹페이지를 만듭니다.
4-1. 새 터미널 열기
VS Code 터미널 패널 우측 위 + 버튼으로 새 터미널 추가. 이 터미널은 프론트엔드용입니다.
4-2. Claude에게 프론트엔드 명령
새 터미널에서 다시 claude를 입력해서 Claude Code 실행 후, 아래 명령을 붙여넣으세요.
frontend 폴더에 Vite + React + TypeScript 프로젝트를 만들어줘.요구사항:
1. 종목코드 입력창과 "조회" 버튼이 있는 화면
2. 조회 버튼을 누르면 백엔드
http://localhost:8000/api/price/{종목코드}를 호출3. 받아온 주가 데이터를 Recharts의 라인 차트로 그려줘
4. 디자인은 깔끔한 모던 스타일, 메인 컬러는 주황색(#c2410c)
5. 설치와 실행 명령어도 알려줘
4-3. 라이브러리 설치
Claude가 알려주는 명령어를 그대로 실행. 보통 이렇습니다.
npm install
npm install recharts axios
💡 npm install은 처음 한 번만 실행하면 됩니다. "프로젝트가 필요한 부속품들 다 다운받아줘"라는 명령입니다. 시간이 1~2분 걸릴 수 있어요.
4-4. 프론트엔드 서버 실행
아래 같은 메시지가 뜨면 성공.
STEP 5. 브라우저에서 확인하기 🎉
크롬이나 사파리를 열고 주소창에 입력:
화면이 뜨면:
- 입력창에 005930.KS 입력 (한국 종목은 뒤에
.KS붙임) - 조회 버튼 클릭
- 잠시 후 주가 라인 차트가 화면에 짠!
🎉 진짜 웹사이트 완성!
이제 친구한테 "내가 만든 주식 차트 사이트야"라고 말할 수 있습니다.
STEP 6. 검증하기
차트가 진짜 맞는지 확인합시다.
- 네이버 금융 → 삼성전자 → 차트 메뉴에서 1년 그래프 확인
- 우리 차트와 전체 흐름이 비슷한가? (고점/저점 시점, 추세)
- 최근 종가가 실제 가격과 ±수백 원 이내로 비슷한가?
완전히 다르면 Claude에게 "차트 데이터가 네이버 금융과 다른 것 같아. 원인 찾아서 고쳐줘"라고 말하면 됩니다.
자주 발생하는 에러 해결법
❌ 차트는 안 뜨고 빙글빙글 돌기만 함
→ 백엔드 서버가 꺼졌을 가능성. 첫 번째 터미널에 Uvicorn running 메시지가 살아있는지 확인. 꺼졌다면 uvicorn main:app --reload 다시 실행.
❌ "CORS 에러" 또는 "Network Error"
→ Claude에게 "백엔드 main.py에 CORS 설정 추가해줘. allow_origins는 전부 허용"이라고 말하면 자동으로 고쳐줍니다.
❌ "데이터 없음" 또는 빈 차트
→ 종목코드에 .KS를 안 붙였을 가능성. 한국 주식은 005930.KS, 미국 주식은 AAPL처럼 입력.
❌ 그 외 알 수 없는 에러
→ 브라우저에서 F12 키 누르고 → Console 탭의 빨간 글씨 전체 복사 → Claude에게 붙여넣기 → "이 에러 고쳐줘".
응용해보기
Claude에게 추가 요청해보세요. 한 문장이면 됩니다.
📈 기간 선택 기능
"1개월/3개월/1년/3년 기간을 선택할 수 있는 버튼을 추가해줘."
🔄 종목 비교
"두 개 종목을 동시에 입력해서 같은 차트에 비교할 수 있게 해줘."
💰 등락률 표시
"차트 위에 1년 전 대비 등락률을 큰 글씨로 표시해줘. 상승은 빨강, 하락은 파랑."
오늘 배운 것 정리
- ✅ 백엔드와 프론트엔드의 차이 (주방과 홀)
- ✅ FastAPI로 데이터 API 만들기
- ✅ React로 웹페이지 만들기
- ✅ Recharts로 차트 그리기
- ✅ 백엔드와 프론트엔드를 연결하는 CORS 개념
- ✅ 터미널 2개 동시에 돌리기
2편에서 검은 화면에 숫자만 봤던 분이, 3편에서는 진짜 웹사이트를 만들어낸 사람이 되었습니다. 이미 80%는 끝났습니다.
다음 편 예고
📺 4편: 재무제표 차트 + 주가 차트 나란히 보기
화면을 좌우로 나눠서 왼쪽엔 재무제표 막대그래프, 오른쪽엔 주가 라인차트를 동시에 보여주는 진짜 분석 대시보드를 만듭니다. 한 화면에서 "매출 늘 때 주가도 올랐나?"를 비교할 수 있게 됩니다.
📌 이번 주 미션
위 "응용해보기" 3가지 중 최소 한 가지를 Claude에게 시켜서 구현해보세요.
본인이 직접 화면을 진화시켜본 경험이 가장 큰 자산입니다.
ATOZAI · 실전 구축기 · 3편