재무제표 분석 사이트 만들기 (진행중)

* 인프런에 있는 강의로 시작하고, 사경인 저 『재무제표 모르면 주식투자 절대로 하지마라』라는 책을 읽으며
기능을 추가하고 있다.
 
* 인프런 강의: 퇴근후딴짓, 바이브 코딩으로 만드는 재미있는 재무제표(커서 ai)
 
* 개발하고 있는 사이트 링크
https://vibe-fs-8pl6.vercel.app/
 
카카오 재무제표 분석 페이지 링크: https://vibe-fs-8pl6.vercel.app/company/035720
 
아직 버그도 있고, 모바일에서는 좀 깨진다ㅠㅠ
재무제표에 있는 숫자가 크고, pc 기준으로 개발하다보니 모바일에서 보기에는 가독성이 좋지 않다.
모바일 친화적인 디자인이 아니어서 모바일에서는 보기가 힘든데
어떻게해야할지 고민해봐야겠다.

 

* 기술 스택
 

커서 ai
Next.js
db: vercel에 있는 prisma-postgres
배포: vercel, python runtime with vercel functions

(https://vercel.com/docs/functions/runtimes/python#python-version)

차트: Chart.js, Lightweight Charts(캔들차트)

https://tradingview.github.io/lightweight-charts/docs

주가 데이터: yfinance 주식 데이터 사용

 

참고 자료

 

캔들 차트 읽고 해석하는 방법: https://newneek.co/@saltylife/article/18561?utm_source=article&utm_medium=body_content&utm_campaign=path_19342&utm_content=18561

차트 읽고 해석하는 방법: https://newneek.co/@saltylife/article/19342?utm_source=article

 

* 트러블슈팅

 

(1) 바이브코딩으로 개발할 때, 기술스택과 원하는 바를 명확하게 한 후 개발을 시작하는 것이 좋다더라.

처음에 기술 스택에 대한 언급 없이 재무제표 사이트를 만들어 달라고 하니, 바닐라 자바스크립트랑 node로 개발해주었고, 너무 잘 해줘서 놀랐다.

이후 붙이고 싶은 기능이 많아지면서 Next.js로 마이그레이션해달라고 하니 그때부터 수많은 문제가 발생했다.

버전 맞추는 것도 잘 못하고,

마이그레이션하면서 불필요한 코드도 제거가 잘 안 되고,
이런 저런 에러가 많아서 배포하기까지 수정할게 많았다.

특히 tailwind는 적용하려다가 계속 에러나서 적용을 포기했다.

 

 

 

(2) python 파일을 실행하기 위해 python runtime을 vercel serverless function으로 실행하려다가 삽질을 엄청 했다.

 

TLDR;

vercel functions로 동작하는 python 파일은 app 폴더 하위가 아니라, 루트 > api 폴더 하위에 넣어야 한다.

다른 configuration은 필요 없다.

 

 

일단 vercel에서 제공하는 데모 사이트 코드처럼 next.config.js를 작성하면 좋다.

https://github.com/vercel/examples/blob/main/python/nextjs-flask/next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  rewrites: async () => {
    return [
      {
        source: "/api/stock-data/:code",
        destination:
          process.env.NODE_ENV === "development"
            ? "http://localhost:5001/api/stock-data/:code"
            : "/api/stock-data/:code",
      },
    ];
  },
};

module.exports = nextConfig;

 

그리고 python 파일의 위치가 중요하다.

위 이미지에서 잘못된 구조 예시처럼 했다가 계속 빌드가 안 돼서 고생했다ㅠㅠㅠ

처음에는 바이브코딩으로 app 폴더 하위가 아닌 api 폴더 하위에 python 파일을 만들길래(올바른 경로)

내가 모르고 옮겨버렸다.

그리고 바이브코딩으로 커서가 vercel.json에 "functions" > "api/**/*.py": {"runtime": "python"} 인가를 넣어줬는데
이것 때문에 계속 빌드가 실패했다.

 

Function Runtimes must have a valid version, for example `now-php@1.0.0`.

 

계속 문서 찾아보고 gemini한테 물어봤는데 문서에서는 정확히 런타임을 어떻게 써야하는지 안 써있었고,

구글링을 해도 해결법을 찾을 수 없었다.

gemini가 계속 "runtime": "python@3.12"로 쓰라고 했는데, 계속 에러가 나서 어떻게 해야하나 답이 보이지 않았다.

 

이것저것 해보고 디버깅해보다가 도저히 안 되겠어서 다시 문서를 읽다보니, 공식 지원을 하면 런타임을 명시하지 않아도 된다는 것을 발견했다.(flask나 Django 쓰면 조금 필요하다고 한다)

https://vercel.com/docs/functions/runtimes/python

이 부분이 계속 걸렸었는데 더 해볼 방법이 없어서 "runtime": "python@3.12"을 빼보았다. 그랬더니 빌드는 성공했다.
기쁨도 잠시.

Deployment Summary > Functions에 내가 만든 api가 없는 것이다!

실제로 배포된 url로 들어가서, api 요청을 해보면 404 not found 에러가 발생했다.

 

이후 계속 수정해보는데 python runtime function이 안 만들어져서

gemini한테 그만 물어보고 gpt한테 물어보기 시작했다.

그리고 곧 뭔가 이상한걸 느꼈다.

 

GPT가 다음과 같이 말하는 것이다.

✅ 5. Next.js와 Python API 혼용시 주의

Next.js의 pages/api 폴더에 JS API와 Python API가 섞이면 문제가 생길 수 있습니다. Python API는 Next.js의 API Routes가 아닌 Vercel Functions로 따로 작동합니다. 그러니 /pages/api 폴더 대신 루트에 /api 폴더를 만들어 Python 파일을 넣으세요.

 

확인 차 example demo 사이트 깃헙 들어가서 파일 구조를 보니 api 폴더가 밖에 있었다.

https://github.com/vercel/examples/blob/main/python/nextjs-flask/next.config.js

폴더 구조를 바꾸자 api가 정상 동작했다.ㅠㅠㅠ

 

이렇게 functions에 python api 주소가 나왔는지 확인해서도 정상 빌드됐는지 알 수 있다.

 

나중에 여기 보니 친절히 써있더라.

이걸 놓쳤다.

https://vercel.com/docs/functions/configuring-functions/runtime

 

휴 커뮤니티에 질문 올려야하나 고민하고 있었는데 해결돼서 다행이었다.