Gaeng02's Blog

개발자로서의 여정을 기록하고 지식을 공유하는 개인 블로그입니다.

🚀 주요 기능

• 반응형 디자인: 모든 디바이스에서 최적의 사용자 경험
• 다크/라이트 모드: 사용자 선호도에 따른 테마 변경
• 검색 기능: 전체 콘텐츠 검색 (Ctrl+K 단축키 지원)
• 마크다운 지원: 포스트 작성에 마크다운 사용
• 태그 시스템: 프로젝트와 포스트 연결
• 카테고리 분류: 프로젝트, 스터디, 포스트로 체계적 분류

📁 프로젝트 구조

gaeng02.github.io/
├── index.html              # 메인 페이지
├── posts/                  # 포스트 목록 페이지
├── projects/               # 프로젝트 페이지들
├── study/                  # 스터디 페이지들
├── content/                # 마크다운 콘텐츠
│   ├── posts/             # 일반 포스트
│   ├── projects/          # 프로젝트 포스트
│   └── study/             # 스터디 포스트
├── css/                   # 스타일시트
│   ├── main.css          # 메인 스타일
│   └── components.css    # 컴포넌트 스타일
├── js/                    # JavaScript 파일들
│   ├── main.js           # 메인 기능
│   ├── theme.js          # 테마 관리
│   ├── search.js         # 검색 기능
│   └── markdown.js       # 마크다운 처리
├── data/                  # JSON 데이터 (자동 생성)
├── scripts/               # 빌드 스크립트
├── static/                # 정적 파일들
│   └── pages/            # HTML 페이지들
└── package.json           # 프로젝트 설정

✍️ 마크다운 포스트 작성 방법

🎯 마크다운 에디터 (별도 레포지토리)

마크다운 에디터는 별도의 레포지토리로 분리되었습니다:

위치: ../md-editor/ (별도 레포지토리)

사용법:

1. 에디터 실행: ../md-editor/markdown-editor.html 파일을 브라우저에서 열기
2. 템플릿 선택: 포스트/프로젝트/스터디 중 선택
3. 템플릿 불러오기: 기본 템플릿을 에디터에 로드
4. 실시간 미리보기: 작성과 동시에 결과 확인
5. 내용 저장: 작성 완료 후 파일로 다운로드

주요 기능:

• 📝 실시간 마크다운 미리보기
• 🎨 구문 강조 및 자동 완성
• 📋 미리 정의된 템플릿 제공
• 💾 자동 저장 및 복원
• ⌨️ 키보드 단축키 지원 (Ctrl+S: 저장, Ctrl+Enter: 미리보기 토글)

🧪 로컬 테스트 방법

1. 로컬 서버 시작

# 방법 1: npm 스크립트 사용 (권장)
npm start

# 방법 2: 직접 실행
node start-server.js

# 방법 3: Python 서버 사용
npm run dev

2. 테스트할 수 있는 페이지들

서버 시작 후 다음 URL들을 브라우저에서 열어 테스트하세요:

• 메인 페이지: http://localhost:3000/
• 포스트 페이지: http://localhost:3000/static/pages/post.html
• 스터디 페이지: http://localhost:3000/static/pages/study.html
• 프로젝트 페이지: http://localhost:3000/static/pages/project-detail.html
• 마크다운 에디터: ../md-editor/markdown-editor.html (별도 레포지토리)

3. 마크다운 에디터 테스트

1. 마크다운 에디터 페이지 열기
2. 템플릿 선택 (포스트/프로젝트/스터디)
3. "템플릿 불러오기" 버튼 클릭
4. 왼쪽에서 마크다운 작성
5. 오른쪽에서 실시간 미리보기 확인
6. "내용 저장" 버튼으로 파일 다운로드

1. 포스트 생성

새로운 포스트를 작성하려면 content/ 디렉토리 아래 적절한 폴더에 .md 파일을 생성하세요:

# 일반 포스트
content/posts/my-new-post.md

# 프로젝트 포스트
content/projects/my-project.md

# 스터디 포스트
content/study/javascript/async-await.md

2. Front Matter 작성

각 마크다운 파일의 맨 위에 메타데이터를 작성하세요:

---
title: "포스트 제목"
slug: "post-slug"
date: "2024-01-15"
description: "포스트 설명"
tags: ["태그1", "태그2", "태그3"]
author: "Gaeng02"
---

3. 콘텐츠 작성

Front Matter 아래에 마크다운으로 콘텐츠를 작성하세요:

# 제목

## 소제목

일반 텍스트...

### 코드 블록

```javascript
function hello() {
    console.log("Hello, World!");
}

목록

• 항목 1
• 항목 2
• 항목 3

링크

링크 텍스트

### 4. 프로젝트 태그 연결

프로젝트와 관련 포스트를 연결하려면 같은 태그를 사용하세요:

```markdown
# 프로젝트 파일 (portfolio-website.md)
---
tags: ["portfolio-website", "React", "TypeScript"]
---

# 관련 포스트 파일 (react-hooks-guide.md)
---
tags: ["React", "JavaScript", "portfolio-website"]
---

📞 연락처

• GitHub: @gaeng02
• 이메일: sondin144@gmail.com
• 블로그: https://gaeng02.github.io