01시작 전 확인
9장을 처음 시작하거나 현재 장의 시작 조건을 확인해 달라고 요청할 때
먼저 확인 · 별도 주식 프로젝트를 시작하며 아파트 결과물은 그대로 둡니다. 이미 확인된 장·프로젝트는 다시 묻지 않고 현재 기록과 실제 상태를 대조합니다.
9장 시작해.공식 시세로 시장과 종목·차트 화면을 만듭니다.
별도 주식 프로젝트를 시작하며 아파트 결과물은 그대로 둡니다.
필요한 도구 · Node.js · TypeScript · Next.js
이미 준비한 계정과 기능은 그대로 이어갑니다.
실시간 가격으로 오해시키거나 없는 지수·거래를 0으로 채우지 않습니다.
현재 단계와 입력 위치를 확인한 뒤 하나씩 복사하세요.
9장을 처음 시작하거나 현재 장의 시작 조건을 확인해 달라고 요청할 때
먼저 확인 · 별도 주식 프로젝트를 시작하며 아파트 결과물은 그대로 둡니다. 이미 확인된 장·프로젝트는 다시 묻지 않고 현재 기록과 실제 상태를 대조합니다.
9장 시작해.별도의 주식서비스 프로젝트와 기본 개발 환경을 시작할 때
먼저 확인 · 독자가 ai-stock-briefing 폴더를 만들고 Code 탭 로컬 작업 폴더로 선택했는지 확인합니다. apartment-explorer는 그대로 보존합니다.
지금 연 `ai-stock-briefing`은 앞으로 계속 발전시킬 새 프로젝트야.
국내 주식시장 데이터를 보여주는 웹서비스를 만들 거야.
이 프로젝트는 TypeScript와 Next.js를 사용해줘.
앞에서 정한 공통 작업 원칙을 참고해서 새 프로젝트에 필요한 준비와 TypeScript 기반 Next.js 기본 프로젝트 구조까지 만들어줘.
로그인이나 승인처럼 내가 직접 해야 하는 일이 나오면 그 지점에서 기다리고 무엇을 해야 하는지 안내해줘.
아직 주식 기능이나 데이터 연결은 만들지 마.세 금융위원회 API를 각각 신청한 뒤 안전한 키 입력을 준비할 때
먼저 확인 · 독자가 공공데이터포털에서 주식시세정보 15094808·지수시세정보 15094807·KRX상장종목정보 15094775를 각각 신청하고 승인 상태와 사용할 인증키를 확인했는지 봅니다.
금융위원회 주식시세정보, 지수시세정보, KRX상장종목정보를 사용할 거야.
세 API는 각각 활용신청을 마쳤고, 세 서비스에 표시되는 같은 인증키
하나를 세 API에서 함께 사용할 거야.
인증키가 코드나 Git에 들어가지 않게 준비해줘.
실제 값은 내가 직접 입력할게. 어디에 입력하면 되는지만 알려줘.
인증키에 `%`가 들어 있으면 그대로 써줘. 프로그램이 한 번 더 바꾸면
인증이 실패해.인증키 직접 입력 후 데이터 호출의 서버 경계를 확인할 때
먼저 확인 · 독자가 앞에서 안내한 로컬 위치에 실제 키를 직접 입력했는지 확인합니다.
데이터를 가져오는 일은 서버에서만 하게 해줘.
인증키가 브라우저로 내려가지 않는지도 Test로 확인해줘.준비한 인증키로 오늘 날짜의 실제 시세 응답을 먼저 관찰할 때
먼저 확인 · 키 입력·서버 경계 검사와 세 API 승인 상태를 확인합니다.
준비한 인증키로 금융위원회 주식시세정보가 실제로 동작하는지 확인해줘.
오늘 날짜의 주식 시세를 몇 건만 가져와서 사람이 알아볼 수 있게 보여줘.
인증키 값은 출력하지 마.오늘 날짜의 실제 시세 조회가 오류 없이 0건을 반환했을 때
먼저 확인 · 직전 요청의 실제 정상 0건을 확인합니다. 데이터가 있거나 인증 오류인 경우 이 정본의 0건 진술을 사실처럼 사용하지 않습니다.
오늘 날짜로 조회하니 0건이 나왔어.
이 데이터가 언제 어떻게 제공되는지 확인하고, 가장 최근에 제공된
거래일을 찾아서 그 날짜의 데이터를 가져오게 해줘.
주말이나 연휴에도 동작해야 해.
그리고 그 날짜가 며칠인지 항상 알 수 있게 해줘.확보한 지수와 종목 시세의 기준일을 구분하도록 정할 때
먼저 확인 · 실제 제공된 거래일과 지수·종목 자료 상태를 확인합니다. 날짜를 추측해서 합치지 않습니다.
지수와 종목 시세의 기준일이 서로 다를 수 있어.
다를 때 하나로 합치지 말고, 각각의 기준일을 그대로 보여줘.
두 날짜가 다르면 다르다는 것을 사용자가 알 수 있게 알려줘.공식 데이터와 기준일을 준비한 뒤 시장 첫 화면을 만들 때
먼저 확인 · 서버 연결·실제 자료·기준일 구분을 확인합니다.
시장 상황을 보는 첫 화면을 만들어줘.
데이터 기준일, 코스피와 코스닥 현황, 상승률 상위 5종목, 하락률 상위 5종목,
종목 검색창을 보여줘.
지수는 지수 자체의 기준일을 함께 보여주고, 등락률 순위는 종목 시세의
기준일을 함께 보여줘.
등락률 순위 목록에는 종목명, 현재가, 등락률, 거래대금을 보여줘.
화면 제목에 오늘이라는 말은 쓰지 마. 오늘 기준이라고 보장할 수 없어.
증권사 HTS처럼 지표를 많이 넣지 말고 주식을 잘 모르는 사람도 읽을 수
있게 만들어줘.
제작 도구의 기본 화면을 그대로 두지 마. 지수와 순위 목록은 흰 카드에 담고
카드 사이에 여백을 줘. 상승은 빨강, 하락은 파랑으로 쓰고, 누르는 곳에는
강조색을 하나만 정해서 써줘. 같은 정보를 한 화면에 여러 번 반복하지 마.
화면 아래에는 출처와 이 화면을 조회한 시각을 남겨줘.시장 화면의 등락률 순위 집계 대상을 정리할 때
먼저 확인 · 시장 첫 화면과 실제 데이터가 있는지 확인합니다.
등락률 순위는 KOSPI와 KOSDAQ의 보통주만 대상으로 만들어줘.
우선주와 스팩은 빼고, 그날 거래가 없던 종목도 빼고, 거래대금이 10억원
이상인 종목만 남겨줘.
어떤 조건으로 골랐는지도 화면에 보여줘.정해진 순위 조건과 실제 집계 범위를 화면에 밝힐 때
먼저 확인 · 앞 단계의 실제 필터 적용과 전체·집계 대상 건수를 확인합니다.
등락률 순위를 뽑을 때 쓴 조건을 화면 아래에 그대로 적어줘.
전체 몇 종목 중 몇 종목을 대상으로 집계했는지도 보여줘.
이 조건이 투자 판단 기준이 아니라는 것도 밝혀줘.시장 화면에서 종목 검색과 상세 이동을 연결할 때
먼저 확인 · 시장·순위 화면과 KRX상장종목정보 실제 응답을 확인합니다.
종목을 찾아 상세 화면으로 들어갈 수 있게 해줘.
등락률 순위 목록의 종목을 누르면 그 종목 화면으로 가게 해줘.
검색창에서는 종목명이나 종목코드로 찾을 수 있게 해줘. 종목 목록은
KRX상장종목정보를 사용해줘.
KRX상장종목정보의 종목코드는 주식시세정보와 형태가 달라. 화면과 주소에는
우리가 익숙한 형태로 통일해서 보여줘.
검색 결과가 여러 개면 목록에서 고르게 하고, 딱 하나면 바로 그 종목
화면으로 보내줘.
찾는 종목이 없을 때는 빈 화면 대신 무엇을 다시 시도하면 되는지 알려줘.
한 페이지에 계속 쌓지 말고 화면이 분명하게 전환되게 하고, 시장
화면으로 돌아가는 길도 만들어줘.선택한 종목의 상세 가격과 기준일을 표시할 때
먼저 확인 · 검색한 종목과 연결된 실제 종목코드·시세를 확인합니다.
종목 상세 화면을 만들어줘.
종목명, 종목코드, KOSPI인지 KOSDAQ인지, 현재가, 등락, 등락률을 위에
보여줘.
시가, 고가, 저가, 거래량, 거래대금도 보여줘.
등락은 전일 종가가 아니라 기준가와 비교한 값이야. 기준가도 함께 보여주고,
화면에는 기준가와 비교한 값이라고 밝혀줘.
이 숫자들이 며칠 기준인지 반드시 함께 보여줘.
시장 전체 기준일과 이 종목의 기준일이 다르면 두 날짜를 그대로 각각
보여줘.종목 상세에 최근 1년 가격과 거래량 차트를 붙일 때
먼저 확인 · 현재 선택 종목의 상세 화면과 실제 일별 시세를 확인합니다.
이 종목의 최근 1년 일별 시세로 차트를 그려줘.
하루마다 시가·고가·저가·종가가 보이는 형태로 그리고, 아래에 거래량도
함께 보여줘.
차트 제목은 `최근 1년 주가 흐름`으로 하고, 일봉과 종가 선을 전환해서 볼
수 있게 해줘. 차트 위에는 실제 시작일·마지막 거래일·거래일 수를 표시해줘.
마우스를 올리면 그날의 날짜와 시가·고가·저가·종가·거래량·거래대금을 볼
수 있게 해줘.
1년이면 날짜가 240개가 넘으니까 가로축은 읽을 수 있게 정리해줘.
이동평균이나 RSI 같은 기술적 지표는 넣지 마.차트를 만든 뒤 이력이 짧은 실제 종목의 표시를 확인할 때
먼저 확인 · 일반 종목의 차트가 동작하는지 확인합니다. 짧은 이력 종목은 실제 자료에서 찾아야 합니다.
최근 상장 종목처럼 1년치 거래일이 없는 경우가 있어.
그런 종목이 실제로 있는지 확인하고, 열어볼 종목 하나를 알려줘.
그리고 이럴 때 1년인 것처럼 보여주지 말고, 실제 구간이 며칠인지 알려줘.완성한 시장·종목 화면의 색 외 표현과 작은 화면을 확인할 때
먼저 확인 · 시장과 종목 상세·차트가 동작하는지 확인합니다.
상승과 하락을 색만으로 전달하지 말아줘.
기호와 부호를 함께 쓰고, 화면 읽기 도구를 쓰는 사람도 상승인지
하락인지 알 수 있게 해줘.
데스크톱과 휴대전화에서 모두 주요 정보가 보이는지도 확인해줘.완성한 주식 기능의 회귀 Test와 실제 API 연결을 확인할 때
먼저 확인 · 시장·검색·상세·차트를 직접 사용하고 기준일·출처·순위 조건·짧은 이력·색 외 표시를 확인했는지 봅니다.
지금까지 만든 기능이 다음 장에서 깨지지 않도록 Test를 만들어줘.
인증키가 브라우저에 노출되지 않는지, 기준일과 출처, 순위 조건이 제대로
표시되는지 확인해줘.
시장 화면에서 종목을 선택하거나 검색해 상세 화면과 1년 차트까지
확인하고, 다시 시장 화면으로 돌아오는 과정도 검사해줘.
실제 금융위원회 API의 응답도 확인하고, 모든 Test를 통과한 뒤
완료했다고 알려줘.주식 화면 검사 후 이번 장 정상 상태를 로컬 Git에만 기록할 때
먼저 확인 · 관련 Test와 실제 화면·API 확인 결과를 확인합니다. 이번 정본은 GitHub 전송을 명시적으로 금지합니다.
이번 작업을 마무리해줘.
GitHub에 보내지는 말고 Git 기록까지만 해줘.9장의 실습 결과를 장별 완료 조건과 대조할 때
먼저 확인 · 앞 단계 실행 결과와 사람이 직접 확인할 항목을 확인합니다. 요청문을 보여주거나 실행했다고 완료로 세지 않습니다.
장 완료 확인해줘.디버깅 → 내 정상 기록으로 복구 → 장별 Source로 재시작Git 명령을 외우거나 직접 입력할 필요는 없습니다. 아래 요청문을 그대로 붙여넣으면 Claude Code가 확인하고 처리합니다.
1. 디버깅 --- 먼저 무엇이 어긋났는지 그대로 말하고 고쳐봅니다. 대부분 여기서 해결됩니다.
지금 작업이 책과 다르게 진행됐어.
현재 상태와 화면에 나온 문제를 확인하고 원인을 찾아서 고쳐줘.이 장에서 특히 자주 막히는 자리는 인증키가 준비됐는데도 등록되지 않은 인증키라는 응답이
오는 경우입니다. 공공데이터포털이 보여주는 인증키에는 %가 들어 있는 형태가 있고, 이것을
프로그램이 한 번 더 바꾸면 인증이 실패합니다.
인증키를 넣었는데 등록되지 않은 인증키라는 응답이 와.
인증키에 들어 있는 %를 프로그램이 한 번 더 바꾸고 있지 않은지 확인해줘.
실제 인증키 값은 출력하지 마.조회 결과가 0건일 때는 인증키 문제가 아닐 수 있습니다. 이 데이터는 하루의 거래가 끝난 뒤에 제공되므로, 오늘 날짜로 물으면 아직 아무것도 없는 것이 정상입니다.
조회 결과가 0건이야.
가장 최근에 제공된 거래일을 찾아서 그 날짜로 조회하고 있는지 확인해줘.2. 내 정상 기록으로 복구 --- 해결되지 않으면 실습하면서 내 프로젝트에 남겨둔 정상 기록으로 돌아갑니다. 지금까지 한 작업은 먼저 따로 보존합니다.
현재 작업은 잃지 않도록 먼저 별도로 보존해줘.
이 프로젝트에서 마지막으로 정상 동작했던 상태를 찾아 안전하게 복구해줘.3. 장별 Source로 재시작 --- 그래도 이어갈 수 없을 때 사용합니다. 9장의 남은 실습은 건너뛰게 되므로 마지막 수단입니다.
내 현재 작업을 먼저 안전하게 보존해줘.
아래 9장 완성 Source에서 다시 시작해줘.
https://github.com/buildyourownai-lab/develop-like-a-pro-with-ai/tree/main/chapters/ch09/source/ai-stock-briefing
내 인증키를 입력할 자리를 알려주고
준비가 끝나면 9장을 마친 상태인지 확인해줘.방향부터 확인하고, 더 필요할 때 다음 힌트를 펼치세요.
화면을 연 날짜와 자료의 기준일을 구분합니다.
휴장·자료 반영 지연·조회 실패를 나눕니다.
최근 확인 가능한 거래일과 원본 응답 날짜를 대조합니다.
실제 기준일을 표시하고 없음을 0으로 채우지 않습니다. 최신이라고 표시하려면 해당 기준일을 확인합니다.
이 설명만으로 원인이 확인됐거나 수정됐다고 말하지 않습니다. 현재 프로젝트의 근거를 먼저 대조합니다.
이름보다 공식 종목코드를 기준으로 봅니다.
검색에서 선택한 코드와 상세 요청 코드를 확인합니다.
기간·기준일·종목코드가 각 요청에서 같은지 봅니다.
한 종목의 화면에서 다른 종목 자료가 섞이는 연결만 수정하고 검색부터 회귀 검사합니다.
이 설명만으로 원인이 확인됐거나 수정됐다고 말하지 않습니다. 현재 프로젝트의 근거를 먼저 대조합니다.
장 완료 확인해줘.실제 프로젝트에서 튜터와 확인합니다. 사이트를 열어본 기록은 학습 완료가 아닙니다.
저자는 빈 폴더에서 시작해 9장 요청문만으로 시장 화면과 종목 화면, 최근 1년 차트까지 갔습니다. 9장은 새 프로젝트를 시작하는 장이므로 이 장에서 새로 생긴 Test 23개가 프로젝트 전체 Test 23개이며 모두 통과했습니다. 실제 금융위원회 응답도 함께 확인했습니다. 근거는 verification/chapter-09/에 있습니다.
장별 소스는 해당 장까지의 기준 상태입니다. 정상 실습은 내 프로젝트를 이어가고, 완성 소스는 비교·복구할 때 사용합니다.
자료 판본 1c784213