Web Content Scraper

웹 페이지의 특정 영역을 스크랩하여 마크다운 형식으로 저장하는 애플리케이션입니다.

저장소 구조

이 프로젝트는 Git 서브모듈을 사용하여 관리됩니다:

summary-automatic/
├── backend/         # NestJS 백엔드 (서브모듈)
├── frontend/        # React 프론트엔드 (서브모듈)
└── README.md

새로운 환경에서 프로젝트를 클론할 때는 다음 명령어를 사용하세요:

# 메인 저장소 클론
git clone [repository-url] summary-automatic
cd summary-automatic

# 서브모듈 초기화 및 업데이트
git submodule init
git submodule update

기술 스택

백엔드

• Node.js
• NestJS
• Puppeteer (웹 스크래핑)
• Cheerio (HTML 파싱)
• TurndownJS (HTML to Markdown 변환)

프론트엔드

• React
• TypeScript
• Material-UI (MUI)
• React Query
• Axios

주요 기능

1. 웹 페이지 스크래핑

   • URL과 CSS 셀렉터를 입력하여 특정 영역 스크랩
   • 실시간 미리보기 지원
   • HTML, 마크다운, 텍스트 형식으로 변환

2. 콘텐츠 관리

   • 스크랩한 콘텐츠 목록 관리
   • 검색 및 필터링 기능
   • 선택한 콘텐츠 ZIP 파일로 다운로드

3. 설정

   • 전역 저장 경로 설정
   • 다크 모드 지원

설치 및 실행

백엔드

# 백엔드 디렉토리로 이동
cd backend

# 의존성 설치
npm install

# 개발 모드로 실행
npm run start:dev

# 프로덕션 모드로 실행
npm run start:prod

프론트엔드

# 프론트엔드 디렉토리로 이동
cd frontend

# 의존성 설치
npm install

# 개발 모드로 실행
npm run dev

# 프로덕션 빌드
npm run build

사용 방법

1. 스크랩하기

   • URL 입력: 스크랩할 웹 페이지의 URL을 입력합니다.
   • 셀렉터 입력: 스크랩할 영역의 CSS 셀렉터를 입력합니다.
   • 미리보기: 입력한 셀렉터에 해당하는 영역을 미리 확인합니다.
   • 저장: 스크랩한 내용을 저장합니다.

2. 셀렉터 입력 예시

   article.content
   div.main-content
   section.article-body
   

3. 다운로드

   • 개별 다운로드: 각 스크랩 항목의 다운로드 버튼을 클릭합니다.
   • 전체 다운로드: 여러 항목을 선택하여 ZIP 파일로 다운로드합니다.

4. 설정

   • 저장 경로: 스크랩한 콘텐츠가 저장될 기본 경로를 설정합니다.

주의사항

1. 셀렉터 사용

   • Tailwind CSS 클래스를 포함한 셀렉터 사용 가능
   • 동적으로 생성되는 클래스는 제외될 수 있음

2. 웹 페이지 접근

   • 일부 웹 사이트는 스크래핑을 차단할 수 있음
   • CORS 정책에 따라 접근이 제한될 수 있음

라이선스

MIT License