백준 To Tistory

백준 문제 풀이를 Tistory 블로그 포스팅용으로 정리해주는 확장 프로그램

# 백준 To Tistory 백준 문제 풀이를 Tistory 블로그 포스팅용으로 자동으로 정리해주는 크롬 확장 프로그램입니다. ## 🎯 주요 기능 - 🚀 **페이지 이동 없이** 백준 문제 정보 자동 추출 - 📝 사용자 해설 입력 및 관리 - 💻 소스 코드 자동 수집 - 📋 Tistory 포스팅용 내용 자동 생성 (마크다운 형식) - 📋 클립보드에 자동 복사 ## 🛠️ 기술적 특징 - **Request 기반 데이터 수집**: 페이지 이동 없이 `fetch()` API로 HTML 요청 - **DOMParser 활용**: HTML 파싱으로 정확한 데이터 추출 - **데이터 손실 방지**: 모든 수집 과정에서 데이터 보존 - **빠른 처리**: 여러 페이지 동시 요청으로 효율적인 데이터 수집 ## 📱 사용법 ### 1. 확장 프로그램 설치 1. 이 프로젝트를 다운로드 2. 크롬에서 `chrome://extensions/` 접속 3. "개발자 모드" 활성화 (우측 상단 토글) 4. "압축해제된 확장 프로그램을 로드합니다" 클릭 5. 프로젝트 폴더 선택 ### 2. 백준 문제 풀이 완료 후 1. 백준 사이트에서 확장 프로그램 아이콘 클릭 2. **"문제 정보 추출"** 버튼 클릭 3. 자동으로 문제 정보와 소스 코드 수집 4. 해설 작성 5. **"내용 작성"** 버튼 클릭 6. 생성된 내용이 클립보드에 복사됨 7. Tistory에 붙여넣기 ## 🔄 동작 원리 ### 데이터 수집 과정 1. **Status 페이지**: 문제 번호 및 제출 정보 추출 2. **Request 요청**: 문제 페이지 HTML 요청 → 문제 상세 정보 파싱 3. **Request 요청**: 소스 코드 페이지 HTML 요청 → 코드 추출 4. **데이터 통합**: 모든 정보를 하나로 통합하여 포스팅 내용 생성 ### 장점 - ✅ 페이지 이동 없음 (사용자 경험 향상) - ✅ 데이터 손실 방지 - ✅ 빠른 처리 속도 - ✅ 안정적인 데이터 수집 ## 📁 파일 구조 ``` beakjoonToblog/ ├── manifest.json # 확장 프로그램 설정 및 권한 ├── popup.html # 팝업 UI (작은 tooltip 형태) ├── popup.js # 팝업 동작 로직 및 데이터 관리 ├── content.js # 백준 페이지 데이터 추출 (Request 방식) ├── background.js # 백그라운드 서비스 워커 ├── styles.css # UI 스타일링 ├── icons/ # 아이콘 파일들 │ └── icon256.png # 256x256 아이콘 └── README.md # 이 파일 ``` ## 🔐 권한 설명 - **`activeTab`**: 현재 활성 탭에 접근하여 백준 사이트 감지 - **`storage`**: 문제 정보, 소스 코드, 사용자 설정 저장 - **`clipboardWrite`**: 생성된 포스팅 내용을 클립보드에 복사 - **`host_permissions`**: 백준 사이트(`acmicpc.net`)에서만 작동 ## 🌐 지원 사이트 - **백준 온라인 저지** (`https://www.acmicpc.net/*`) - 백준 문제 풀이 완료 후 제출 현황 페이지에서 사용 ## 📊 지원하는 언어 - Python, Java, C++, C, JavaScript - Go, Rust, Kotlin, Swift - 기타 백준에서 지원하는 모든 언어 ## 📝 포스팅 형식 ### 제목 형식 ``` [언어] 문제번호 - 문제제목 ``` ### 내용 구성 1. **문제**: 문제 설명 2. **입력**: 입력 조건 3. **출력**: 출력 조건 4. **해설**: 사용자가 작성한 해설 5. **소스 코드**: 자동으로 수집된 코드 ### 마크다운 예시 ```markdown # [Python] 10986 - 나머지 합 ## 문제 수 N개 A1, A2, ..., AN이 주어진다... ## 입력 첫째 줄에 N과 M이 주어진다... ## 출력 첫째 줄에 연속된 부분 구간의 합이 M으로 나누어 떨어지는 구간의 개수를 출력한다... ## 해설 사용자가 작성한 해설 내용... ## 소스 코드 ```python n, m = map(int, input().split()) # ... 코드 내용 ``` ``` ## 🚨 주의사항 - 백준 사이트에서만 작동합니다 - 로그인이 필요한 경우 소스 코드 추출이 제한될 수 있습니다 - 생성된 내용은 마크다운 형식입니다 - 인터넷 연결이 필요합니다 (HTML 요청을 위해) ## 🐛 문제 해결 ### 확장 프로그램이 작동하지 않는 경우 1. 백준 사이트(`acmicpc.net`)에서 사용하고 있는지 확인 2. 확장 프로그램이 활성화되어 있는지 확인 3. 개발자 도구 콘솔에서 오류 메시지 확인 ### 데이터 추출이 안 되는 경우 1. 백준 제출 현황 페이지에서 사용하고 있는지 확인 2. 문제를 풀고 제출한 후 사용하는지 확인 3. 네트워크 연결 상태 확인 ## 🔄 업데이트 내역 - **v1.0**: 초기 버전 - Request 기반 데이터 수집 구현 - 페이지 이동 없이 안정적인 데이터 수집 - 마크다운 형식의 포스팅 내용 자동 생성 ## 📄 라이선스 이 프로젝트는 MIT 라이선스 하에 배포됩니다. --- **백준 To Tistory**로 백준 문제 풀이를 쉽게 Tistory에 포스팅하세요! 🚀