docs: README 및 프롬프트 문서 추가
- 실행 방법/구조/환경변수/DB 스키마/페이지네이션 API 정리 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dsyoon
40
PROMPT.txt
Normal file
40
PROMPT.txt
Normal file
@@ -0,0 +1,40 @@
|
||||
뉴스 링크를 깔끔하게 관리하고 요약까지 보여주는 웹 서비스라니, '나중에 읽어야지' 하고 쌓아두기만 하는 우리 모두의 습관을 아주 우아하게 해결하려는 멋진 프로젝트입니다.
|
||||
|
||||
단순히 URL만 저장된 DB에서 정보를 가져와 화면에 뿌려주려면, URL에서 제목과 요약(메타데이터)을 추출하는 '크롤링/파싱' 로직이 핵심입니다.
|
||||
|
||||
DB 연결: ./env 파일에 저장된 환경 변수를 참조해서 연결해줘. (DB_HOST, DB_USER, DB_PASS 등 포함)
|
||||
|
||||
DB 테이블: news_link 테이블에는 id, url, created_at 컬럼이 있어.
|
||||
|
||||
핵심 기능: 사용자가 URL을 입력하면 해당 페이지의 메타데이터(Title, Description, Image)를 추출해서 보여줘야 해.
|
||||
|
||||
먼저 프로젝트 기본 구조와 ./env 파일을 읽어 DB에 연결하는 설정 코드를 작성해줘."
|
||||
|
||||
2. 백엔드: 데이터 추출 및 API 로직 프롬프트
|
||||
URL만 있는 상태에서 글의 앞부분(소개)을 가져오려면 Open Graph 데이터를 활용하는 것이 가장 효율적입니다.
|
||||
|
||||
프롬프트: "백엔드에서 다음 API 엔드포인트를 만들어줘.
|
||||
|
||||
GET /links: DB에서 모든 URL을 가져온 뒤, 각 URL의 웹사이트를 방문해 메타데이터(제목, 요약 설명, 대표 이미지)를 추출해서 JSON 형태로 반환해줘. (힌트: cheerio나 metascraper 같은 라이브러리 활용)
|
||||
|
||||
POST /links: 사용자가 입력한 새로운 URL을 news_link 테이블에 저장해줘.
|
||||
|
||||
특히 URL 크롤링 시 에러가 발생하면 기본 이미지와 '설명 없음' 메시지를 반환하도록 예외 처리를 꼼꼼하게 해줘."
|
||||
|
||||
3. 프론트엔드: UI 및 인터페이스 프롬프트
|
||||
사용자가 보기 편한 카드 레이아웃과 추가 버튼을 만드는 단계입니다.
|
||||
|
||||
프롬프트: "사용자에게 보여줄 프론트엔드 화면을 디자인해줘.
|
||||
|
||||
전체 레이아웃: 깔끔한 카드 스타일의 리스트 뷰. 각 카드에는 뉴스 제목, 간략한 소개글(요약), 해당 사이트로 이동하는 링크가 포함돼야 해.
|
||||
|
||||
추가 기능: 화면 오른쪽 하단에 '플로팅 버튼(+)'을 만들고, 클릭하면 URL을 입력할 수 있는 모달(Modal) 창이 뜨게 해줘.
|
||||
|
||||
상태 관리: URL을 추가하면 페이지 새로고침 없이 리스트에 바로 반영되도록 해줘.
|
||||
|
||||
현대적이고 심플한 UI를 위해 **[Tailwind CSS 혹은 Bootstrap]**을 사용해서 코드를 짜줘."
|
||||
|
||||
💡 구현 시 참고할 팁
|
||||
성능 최적화: 매번 링크를 불러올 때마다 실시간으로 크롤링하면 속도가 매우 느려집니다. 처음 URL을 추가할 때 DB에 제목과 요약 내용을 함께 저장(save)하는 방식이 훨씬 쾌적합니다.
|
||||
|
||||
Open Graph: 대부분의 뉴스나 블로그는 <meta property="og:description"> 태그를 가지고 있습니다. 이 부분을 긁어오면 말씀하신 "앞부분 소개"를 가장 정확하게 가져올 수 있습니다.
|
||||
91
README.md
Normal file
91
README.md
Normal file
@@ -0,0 +1,91 @@
|
||||
# News Link
|
||||
|
||||
뉴스/아티클 URL을 저장하고, 제목/요약/대표 이미지를 추출해 카드 형태로 보여주는 Flask 웹앱입니다.
|
||||
|
||||
## 구성
|
||||
|
||||
- `app.py`: Flask 서버, DB 연결, 메타데이터 추출, API
|
||||
- `templates/index.html`: 초기 화면(SSR) + 모달 UI
|
||||
- `static/app.js`: 무한 스크롤(30개 단위), URL 붙여넣기 파싱, 추가/갱신
|
||||
- `static/styles.css`: 스타일
|
||||
- `static/placeholder.svg`: 이미지 없을 때 표시용
|
||||
|
||||
## 요구사항
|
||||
|
||||
- Python 3.x
|
||||
- PostgreSQL
|
||||
- (권장) 미니콘다 환경: `ncue`
|
||||
|
||||
## 설치
|
||||
|
||||
```bash
|
||||
pip install -r requirements.txt
|
||||
```
|
||||
|
||||
## 환경변수(.env)
|
||||
|
||||
프로젝트 루트에 `.env` 파일을 만들고 아래 값을 설정하세요. (`.env`는 git에 커밋되지 않습니다)
|
||||
|
||||
```dotenv
|
||||
DB_HOST=...
|
||||
DB_PORT=5432
|
||||
DB_NAME=...
|
||||
DB_USER=...
|
||||
DB_PASSWORD=...
|
||||
TABLE=news_link
|
||||
```
|
||||
|
||||
옵션(선택):
|
||||
|
||||
```dotenv
|
||||
PORT=8021
|
||||
DEFAULT_PAGE_SIZE=30
|
||||
MAX_PAGE_SIZE=60
|
||||
CACHE_TTL_SECONDS=3600
|
||||
FAILED_TTL_SECONDS=300
|
||||
```
|
||||
|
||||
## DB 스키마
|
||||
|
||||
`TABLE`(기본 `news_link`) 테이블에 아래 컬럼이 필요합니다.
|
||||
|
||||
- `id`
|
||||
- `url`
|
||||
- `created_at`
|
||||
|
||||
예시(참고):
|
||||
|
||||
```sql
|
||||
CREATE TABLE IF NOT EXISTS news_link (
|
||||
id SERIAL PRIMARY KEY,
|
||||
url TEXT NOT NULL,
|
||||
created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
|
||||
);
|
||||
```
|
||||
|
||||
## 실행
|
||||
|
||||
```bash
|
||||
python app.py
|
||||
```
|
||||
|
||||
기본 접속 주소:
|
||||
|
||||
- `http://localhost:8021`
|
||||
|
||||
## API
|
||||
|
||||
- `GET /links?limit=30&offset=0`
|
||||
- 30개 단위로 링크를 가져옵니다(프론트 무한 스크롤).
|
||||
- 응답:
|
||||
- `items`: 링크 배열
|
||||
- `next_offset`: 다음 요청 offset
|
||||
- `has_more`: 다음 페이지 존재 여부
|
||||
- `POST /links`
|
||||
- body: `{ "url": "https://..." }`
|
||||
- URL을 DB에 저장하고 메타데이터를 추출해 반환합니다.
|
||||
|
||||
## 동작 메모
|
||||
|
||||
- 초기 화면은 DB에서 **첫 페이지(기본 30개)** 만 가져와 SSR로 즉시 렌더링합니다.
|
||||
- 메타데이터 추출은 캐시를 사용합니다(성공/실패 TTL 각각 적용).
|
||||
Reference in New Issue
Block a user