한글독서

 
 
프로젝트는 프롬프트엔지니어링을 통해 웹페이지 제작입니다.

전 포스팅에서 Front를 구축을 진행하였고, 이번 포스팅은 해당 프론트와 통신을 진행할 Backend 서버 구축입니다. 
동일하게 ChatGPT에 요구사항/기능/제약조건을 입력 후 PRD(Product Requirements Document, 제품 요구사항 문서)를 산출물로 받으며, 정리된 산출물을 기반으로, Cursor를 사용해 실제 코드 작성 및 프로젝트 구조화를 진행합니다.
 
 

 
다음 프롬프트를 통해 Chatgpt에 Backend 서비스 구축을 위한 PRD 생성 요청을 진행합니다. 

너는 Backend 개발을 하는 10년차 개발자이며 PM이야. 
신규 프로젝트에 들어가기 위한 PRD를 작성할 예정이야 

# 개요 - chatgpt api를 이용해 현재 주식에 대해 요약할 수 있는 기능이 있는 웹앱 

# 기능
- Front 서버로부터 주식 종목을 받을 수 있는 REST API 
- 전달 받은 종목을 Chatgpt API로 호출하여 최신 뉴스를 약 3~5줄 정도로 요약 및 긍정/부정을 검토 
- 요약된 정보를 다시 프론트서버로 전달 

# 제약조건 
- **fast api 기반으로 진행** 
- chatgpt api 비용이 많이 발생하지 않게 진행 
- Front는 다른 서버에 있다는 가정

 
위 프롬프트 입력 시, 다음 개요 및 기능을 포함한 PRD가 작성되게 됩니다. 필요한 부분을 정리해서 Front와 동일하게  Cursor에 입력을 합니다. 

 
 
그리고 Front와 동일하게  Cursor Settings을 진행합니다. (상세한 설명은 1탄으로)
1. Cursor Settings을 연 후, [Rules,Memories,Command..] 탭으로 이동 및 Project Rules에서 [+Add Rule] 버튼을 선택합니다. 그리고 필요한 프로젝트 룰 네이밍을 적 Rule을 생성합니다. 
 
2. Chatgpt로 얻은 RPD 결과물을 Project Rule로 작성합니다. 이 때, "Apply Manually"로 적용하여 @ 입력시 해당 RPD가 적용될 수 있게 설정합니다.
 

 
Fast API 프레임워크 사용을 위한 필요한 패키지를 다음 명령어를 통해 설치합니다. (Fedora버전)

# repoistory update
dnf update -y  

# Python 버전 및 필수도구 다운로드
sudo dnf install -y python3 python3-pip python3-devel

# 개발 도구 (일부 패키지 컴파일 시 필요)
sudo dnf install -y gcc gcc-c++ make

# pip 업그레이드
sudo python -m pip install --upgrade pip

# requirements.txt로 설치
sudo python-m pip install -r requirements.txt


# Redis 서버
sudo dnf install -y redis
sudo systemctl enable redis
sudo systemctl start redis

 
위 필요한 패키지가 전부 설치되면, cursor에 backend 서버 구축을 요청합니다.

@project-rule.mdc를 참고해 아래 조건으로 새로운 프로젝트를 생성해줘.

# Project Name
backend-stock

# Description
주식 정보를 요약하는 웹 애플리케이션.
Front 서버와 통시하는 Backend 서비스 구성

# Directory Structure
실제 현업에서 사용하는 구조로 구성해줘.

 
구축이 완료되면 아래 구조를 가진 Backend repo가 생성이 됩니다. 각 API에 대해 구분 및 gpt api를 사용하기 위한 환경변수도 함께 생성이됩니다. 

 
아래 명령어를 통해 Fast API 서버를 실행하고, API가 정상적으로 호출되는지 테스트 해봅니다. 

python -m uvicorn app.main:app --host 0.0.0.0 --port 8000 --reload

 
API호출 전 cursor가 생성한 Swagger UI를 확인합니다. ( localhost:8000/docs)
해당 UI를 통해 API에 대한 상세 명세를 확인할 수 있으며, 테스트도 가능합니다. 

 
다음으로 cursor가 생성한 파일(test_api.sh)로 API 테스트를 진행합니다.
해당 스크립트는 shell script로 작성되었습니다.
 

 
프로젝트는 프롬프트엔지니어링을 통해 웹페이지 제작입니다.

이번 포스팅은 ChatGPT에 요구사항/기능/제약조건을 입력 후 PRD(Product Requirements Document, 제품 요구사항 문서)를 산출물로 받습니다. 
다음 정리된 산출물을 기반으로, Cursor를 사용해 실제 코드 작성 및 프로젝트 구조화를 진행합니다.
 
 

다음 프롬프트를 통해 Chatgpt에 PRD 생성 요청을 진행합니다. 
프롬프트에는 Chatgpt에 개발자 역할 부여 및 개요/기능/제약조건을 명시합니다. 이렇게 역할 부여 및 제약조건을 명시하는 이유는 해당 방법이 조금 더 나은 결과물을 볼 수 있다는 논문이 있기 때문입니다.

너는 Frontend 개발을 하는 10년차 개발자이며 PM이야. 
신규 프로젝트에 들어가기 위한 PRD를 작성할 예정이야

# 개요
- chatgpt api를 이용해 현재 주식에 대해 요약할 수 있는 기능이 있는 웹앱

# 기능
- 홈 화면에는 주식 종목을 검색할 수 있는 기능
- 홈 화면에는 한시간마다 갱신되는 검색 순위(1위~10위)
- 검색 시 결과를 깔끔하게 보여줄 수 있는 화면


# 제약조건
- **Tailwind + Flex 기반**
- 모바일/웹 둘 다 사용할 수 있는 반응형 웹페이지

 
프롬프트 입력 시, 1.개요부터 8.예상일정까지 총 8단계에 RPD 산출물을 얻을 수 있었습니다. 다만 내용이 너무 많기에 필요한 부분을 정리하였습니다. 

 
Chatgpt로 PRD 생성이 완료되었으면, Cursor에 해당 PRD를 바라보고 개발을 할 수 있게 만들어야합니다.
Project Rules, User Rules, Notepad 등 다양한 방법이 있으나, 이번 프로젝트에서는 Project Rules에 적용하여 진행합니다.(Notepad의 경우 Beta 버전으로 진행되고 있으며, 사라질 수 있는 기능입니다.)
 
1. Cursor Settings을 연 후, [Rules,Memories,Command..] 탭으로 이동 및 Project Rules에서 [+Add Rule] 버튼을 선택합니다. 그리고 필요한 프로젝트 룰 네이밍을 적습니다. 해당 룰 파일은 추후 프로젝트 / 경로에 위치하게 됩니다. 

2. Chatgpt로 얻은 RPD 결과물을 Project Rule로 작성합니다. 이 때, "Apply Manually"로 적용하여 @ 입력시 해당 RPD가 적용될 수 있게 설정합니다.

 
위를 통해 저장된 Project Rule 파일은 아래처럼 프로젝트 / 경로 하위 .cursor/rules 에 저장되게 됩니다.

 
사전 조건으로 다음 명령어를 통해 필요한 패키지(java,npm,gradle..)를 설치합니다. (Fedora 버전)

# repoistory update
dnf update -y  

# java install & version check
dnf install java -y
java --version

# npm install & version check
dnf install npm -y
npm --version

# gradle file download & unzip & link & version check
wget https://services.gradle.org/distributions/gradle-9.2.0-bin.zip
mkdir /opt/gradle
unzip -d /opt/gradle gradle-9.2.0-bin.zip
sudo ln -s /opt/gradle/gradle-9.2.0/bin/gradle /usr/local/bin/gradle
gradle -v

 
위 repo 및 cursor 세팅이 완료되면 cursor를 통한 개발을 실행합니다.
다음 프롬프트를 이용해 project rule 설정을 바라보고 개발을 시작하게 합니다. 

@project-rule.mdc 를 참고해 아래 조건으로 새로운 프로젝트를 생성해줘.

# Project Name
front-stock

# Description
주식 정보를 요약하는 웹 애플리케이션.
메인 서버(API-GW)와 GPT-Manager 서버(별도)로 구성된 구조.

# Directory Structure
실제 현업에서 사용하는 구조로 구성해줘.

 
정상적으로 완료가 되면 다음 폴더 구조를 가진 프로젝트가 생성이 되어지고, 

 
아래 명령어를 통해 front 서버를 실행합니다. 그리고 최초 요청과 동일한 기능이 존재하는 지 확인해봅니다. 최초 요청 시, 1~10위였으나 5까지만 표시된 걸로 보여 이 부분은 프롬프트를 수정해가며 수정을 진행합니다.

 
 
각 종목을 클릭하게 되면, 결과물로 넘어가게 되고, 다음 화면처럼 보이게 됩니다.

 
 
다음은 백엔드 및 GPT API를 구성해보겠습니다.