# 프로젝트 요약: 링크 드로퍼 (Link Dropper) 개발 기록
## 📌 카테고리
**프로그래밍/소프트웨어 개발**
## 🎯 타겟 대상
- 프론트엔드 개발자로 전환 중인 개발자
- 백엔드 개발 및 인프라 구축에 관심 있는 개발자
- 동적 크롤링 및 NestJS 기초 학습자
---
## 🚀 핵심 요약
- **풀스택 서비스 구축**: 프론트엔드(Next.js)와 백엔드(NestJS)를 분리하여 개발 중
- **동적 크롤링 해결**: Playwright를 활용해 동적 렌더링 사이트의 메타데이터 추출
- **인프라 구축**: AWS를 기반으로 API 서버 및 스토리지 인프라 확보
- **학습 과정**: 기초 Python → Playwright → NestJS까지의 기술적 시행착오 기록
---
## 📂 1. 기술 스택 소개
| 분야 | 기술/도구 |
|--------------|---------------------------------------------------------------------------|
| **프론트엔드** | Next.js 13, React, Tailwind CSS |
| **백엔드** | NestJS (TypeScript), Express, MongoDB (Atlas) |
| **크롤링** | Python + Playwright (Chromium 브라우저 기반 동적 렌더링) |
| **인프라** | AWS EC2 (API 서버), S3 (스토리지), CloudFront (CDN) |
---
## 🛠️ 2. 핵심 개발 과제
### 🔍 동적 크롤링 문제 해결
- **문제**: 동적 렌더링 페이지 및 보안 강화된 사이트에서 메타데이터 불가
- **해결 방법**:
- Python 기초 → Playwright 도입
- 동적 페이지 로드 시뮬레이션 및 JavaScript 실행
- 결과: 90% 이상의 사이트에서 title, description, image 추출 성공
### 🔄 백엔드 분리 개발
- **문제**: Next.js 기반 API 서버로 앱 확장성 한계
- **해결 방법**:
- NestJS로 독립적인 백엔드 서버 구축
- API 설계 및 모듈화로 코드 유지보수성 향상
- 타입스크립트로 타입 에러 사전 예방
---
## 🧠 3. 학습 및 개발 팁
- **Python 기초 → Playwright 학습**:
- `playwright install chromium`로 브라우저 실행
- `page.content()`로 동적 콘텐츠 추출
- **NestJS 학습 전략**:
- 공식 문서 및 강의로 핵심 개념 이해
- `@Injectable()`, `@Inject()` 등 주요 데코레이터 활용
- **인프라 구성 사전**:
- AWS EC2 인스턴스 생성 → 보안 그룹 설정 → 스토리지 연동
---
## 🧭 4. 현재 상태 및 피드백
- **베타 서비스 운영 중**:
- 사용자 피드백을 통한 기능 개선 및 버그 수정
- `https://linkdropper.com`에서 직접 사용 가능
- **개발자 팁**:
- "풀스택"은 단순히 기술 스택 확장이 아니라 문제 해결 역량의 증가
- 시행착오를 기록하며 성장하는 개발자 여정을 추천
---
## 📌 마무리
프론트엔드 개발자로서 서비스 기획 및 개발을 경험하며, **"기술적 시행착오"가 학습의 필수 과정**임을 깨달았습니다.
앞으로도 실제 개발 과정에서 겪은 문제 해결 사례를 기록하며, 개발자 커뮤니티와 공유할 예정입니다.
**피드백을 주셔서 감사합니다!** 🙌---
✅ 핵심 요약 (요약 버전)
- 기술 스택: Next.js(프론트엔드) + NestJS(백엔드) + Playwright(크롤링) + AWS
- 주요 성공 사항: 동적 사이트 메타데이터 추출, 백엔드 분리 구축
- 학습 팁: Python → Playwright → NestJS 기초 학습, 인프라 구성 사전 준비
- 현재 상태: 베타 서비스 운영 중, 사용자 피드백 기반 개선 중