작업 개요
2026년 4월 11일, GitHub Private Repository와 Notion MCP를 처음으로 연동하여 블로그 글 작성부터 Git 커밋까지 전 과정을 자동화했다.
연동 대상
•
GitHub Repository: https://github.com/codesche/blog-repository.git (private)
•
Notion Database: Frontend (ID: 19cde3f7-e3a8-8079-a470-000bd4795d31)
•
인증 방식: GitHub Personal Access Token (HTTPS)
작업 내역
1. GitHub Repository 클론 및 디렉토리 구조 생성
PAT(Personal Access Token)을 HTTPS URL에 포함시켜 private 저장소를 클론했다.
git clone https://codesche:<TOKEN>@github.com/codesche/blog-repository.git
Bash
복사
저장소 내 디렉토리 구조를 아래와 같이 생성했다.
2. Notion Frontend 데이터베이스에 블로그 글 발행
포스트 제목: React와 TypeScript의 기본적인 활용법
주요 내용:
•
Vite 기반 react-ts 프로젝트 세팅
•
컴포넌트 props 타입 지정 (interface 활용)
•
useState 제네릭 타입 명시
•
이벤트 핸들러 타입 (ChangeEvent, FormEvent)
•
useRef DOM 참조 타입 지정
•
커스텀 훅 반환 타입 명시
•
전체 통합 예제: 유저 목록 CRUD 앱
태그: React
3. Git 파일 생성 및 커밋
생성 파일 목록:
경로 | 설명 |
frontend/React/react-with-typescript-basics.md | 블로그 포스트 전문 (Markdown) |
frontend/Exercise/react-typescript-practice.tsx | 실습 코드 모음 (TSX) |
커밋 메시지:
커밋 해시: 500a9c6
자동화 흐름 요약
특이사항 및 제약
•
컨테이너 세션이 초기화되면 클론된 저장소 및 PAT 설정이 사라진다. 다음 작업 시 PAT 재입력이 필요하다.
•
Notion 태그 속성에 복수 태그를 문자열 하나로 넘기면 에러가 발생한다. 단일 값으로 넘겨야 한다 ("React"로 단독 지정).
•
TypeScript 태그는 이미 데이터베이스에 존재하지만, 이번 포스트는 React 중심이므로 React 태그 단독 사용했다.