백준 To Tistory

About

# 백준 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에 포스팅하세요! 🚀