velog글을 blogger로 게시하는 방법

타파스 시스템을 개발하는데 있어서 외부 제품군들을 사용하고 있다. 타파스(TAPAS)는 클라우드 환경에서 마이크로서비스(Microservices) 형태로 운영되는 시스템으로, 다양한 금융 데이터를 실시간으로 처리하고 관리하는 데 최적화되어 있다. 이 과정에서 높은 성능과 확장성을 보장하기 위해 여러 가지 인프라 및 제품을 활용한다. 클라우드 환경에서 동작하는 제품군을 대상으로 한다. c언어의 라이브러리 형태는 여기서 제외한다. 1. 도커/쿠버네티스(k8s) : 타파스 시스템 관리 타파스는 클라우드환경에서 마이크로서비스로 운용되는 시스템이다. 도커를 활용한 이미지를 만들고 k8s에서 운용된다. 좀더 자세한 내용은 도커와 쿠버네티스를 활용한 C 언어 개발 환경 구축(1)(2) 에서 기술했다. 2. 메세지브로커 : 서비스간 통신 메세지 브로커는 마이크로서비스 사이의 통신(송/수신) 기능을 담당한다. 타파스에서는 여러 메세지브로커 가운데 RabbitMQ, Kakfa 를 사용한다. 이제품군에 대한 설명, 장단점은 생략한다. 수신처 브로커 송신처 클라이언트 요청 RabbitMQ/Kafka 요청처리 서비스 요청처리 응답 RabbtMQ/Kafka 클라이언트 응답 실시간 처리 RabbitMQ/Kafka 클라이언트 전송 3. Redis-Cluster : 실시간 시세 데이터 저장소 Redis Cluster는 주식 시세 데이터를 실시간으로 저장하고 관리하는 역할을 한다. 주로 당일 시세데이타를 저장하고 클라이언트의 조회 요청에 사용된다. 4. 관계형 데이터베이스(RDBMS) : 시세 데이터 영구 저장 데이타베이스는 시세 데이터의 히스토리성 데이타를 장기 보관하고, 관리하는 역활을 한다. 타파스에서는 PostgreSQL, MySQL를 사용한다. 당일/일자별 시세데이타 보관, 관리한다. 5. FluentBit-ELK : 로그 관리 타파스에서 출력하는 모든 로그를 한...

velog글을 blogger로 게시하는 방법

타파스 관련 작업을 블로그로 시작한곳은 velog이다. 가장 글 쓰기 편안한것 같다. 특히 코드를 삽입하기 좋고 마크다운이 이렇게 편안한지 몰랐다.

블로그를 노출하거나 광고를 노출하기에 velog가 좀 한계가 있는듯 해서 구글블로그에도 velog와 같은 글을 게시하고 싶어졌다.

처음에는 velog글을 복사해서 붙여넣기, 마크다운 이나 코드삽입 부분은 html로 붙여넣기로 게시를 했다. 그런데 너무 불편하고 html로 붙여넣기 하기에 신경이 많이 쓰였고, 오류도 많았다. 특히 시간이 너무 걸린다는것이다.

그래서 자동화를 알아보고 나름대로 만족한 방법을 알아냈다.

자동화(?)를 하기 위해서는 몇가지 절차가 필요하다.

1. Google Cloud Console에서 프로젝트 생성 및 API 활성화

1.1 Google Cloud Console 접속 Google Cloud Console에 접속. Google 계정으로 로그인.

1.2 새 프로젝트 생성 상단 메뉴에서 프로젝트 선택 드롭다운을 클릭. "새 프로젝트"를 선택. 프로젝트 이름을 입력하고 "만들기"를 클릭.

1.3 Blogger API 활성화 왼쪽 메뉴에서 "API 및 서비스" > "라이브러리"를 선택. 검색창에 "Blogger"를 입력하고 "Blogger API"를 선택. "사용" 버튼을 클릭하여 API를 활성화.

2. OAuth 2.0 인증 정보 생성

2.1 사용자 인증 정보 생성 왼쪽 메뉴에서 "API 및 서비스" > "사용자 인증 정보"를 선택. "사용자 인증 정보 만들기" 버튼을 클릭하고 "OAuth 클라이언트 ID"를 선택.

2.2 동의 화면 구성 동의 화면을 구성하라는 메시지가 표시되면, "외부"를 선택하고 "만들기"를 클릭. 앱 이름, 사용자 지원 이메일, 개발자 연락처 정보를 입력. "저장 후 계속"을 클릭.

2.3 OAuth 클라이언트 ID 생성 애플리케이션 유형을 "데스크톱 앱"으로 선택. 이름을 입력하고 "만들기"를 클릭. 생성된 클라이언트 ID와 클라이언트 보안 비밀을 안전한 곳에 저장. JSON형식으로 다운로드해서 저장.

3.blogger의 ID를 보관

4.blogger 테마의 HTML편집

아래의 코드를 /head 바로 위에 붙여넣는다.

이렇게 하는 이유는 구글의 블로그에서 필터링을 하기 때문에 기능을 제대로 하지 못하는 경우가 발생해서이다. 예를 들면 velog에서 blogger로 변환할때 마크다운 표를 table로 변환하는데 class를 지정해도 무시된다.

<!-- 코드 모드(언어) 지원 - 필요한 언어만 추가하세요 -->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/javascript/javascript.min.js'/>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/python/python.min.js'/>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/xml/xml.min.js'/>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/css/css.min.js'/>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/htmlmixed/htmlmixed.min.js'/>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/clike/clike.min.js'/>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/shell/shell.min.js'/>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/dockerfile/dockerfile.min.js'/>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/yaml/yaml.min.js'/>

    <!-- 추가 애드온 (선택사항) -->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/selection/active-line.min.js'/>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/edit/matchbrackets.min.js'/>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/display/autorefresh.min.js'/>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/scroll/simplescrollbars.min.js'/>
    <link href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/scroll/simplescrollbars.min.css' rel='stylesheet'/>

    <!-- 초기화 스크립트 -->
    <script>
      document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
        document.querySelectorAll(&#39;.code-editor&#39;).forEach(function(editorEl) {
          CodeMirror.fromTextArea(editorEl, {
            lineNumbers: false,
            theme: &#39;dracula&#39;,
            mode: editorEl.getAttribute(&#39;data-lang&#39;) 






 &#39;javascript&#39;,
            readOnly: false,
            matchBrackets: true,
            styleActiveLine: false,
            autoRefresh: true,
            scrollbarStyle: &#39;overlay&#39;,
            lineWrapping: true,
            viewportMargin: Infinity
          });
        });
      });
    </script>

    <!-- 스타일 설정 -->
    <style>
      .CodeMirror {
        height: auto;
        margin: 20px 0;
        border-radius: 8px;
        font-family: &#39;Fira Code&#39;, Consolas, Monaco, &#39;Andale Mono&#39;, monospace;
        font-size: 14px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      }

      .CodeMirror-scroll {
        overflow-x: auto;  /* 좌우 스크롤 추가 */
    }

      /* 코드 블록 컨테이너 스타일 */
      .code-container {
        position: relative;
        margin: 25px 0;
      }

      /* 언어 배지 스타일 */
      .code-language-badge {
        position: absolute;
        top: -12px;
        right: 20px;
        background: #6272a4;
        color: white;
        padding: 2px 10px;
        border-radius: 4px;
        font-size: 12px;
        font-family: sans-serif;
        z-index: 10;
      }
    </style>

    <style>
.markdown-table {
    border-collapse: collapse;
    width: 100%;
    margin: 20px 0;
}
.markdown-table th {
    background-color: #f2f2f2;
    text-align: center;
    padding: 10px;
    border: 1px solid #ddd;
}
.markdown-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
</style>
    <script>
  document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    const tables = document.querySelectorAll(&#39;table&#39;);
    tables.forEach(table =&gt; {
      table.classList.add(&#39;markdown-table&#39;);
    });
  });
</script>

붙여넣기한 코드의 기능 1.코드 삽입시 보기좋게 하는 기능 2.마크다운 표를 테이블로 변환시 보기좋게 하는 기능

5.velog_to_blogger.py 변환 프로그램

import os
import pickle
import feedparser
import re
import html
from bs4 import BeautifulSoup
from googleapiclient.discovery import build
from google_auth_oauthlib.flow import InstalledAppFlow
from google.auth.transport.requests import Request

# 📌 OAuth 인증 설정
SCOPES = ['https://www.googleapis.com/auth/blogger']
TOKEN_FILE = 'token.pickle'
#2. OAuth 2.0 인증 정보 생성에서 다운로드한 파일을 client_secrets.json으로 변경
CREDENTIALS_FILE = 'client_secrets.json'  # Google Cloud Console에서 다운로드한 OAuth 인증 정보 파일

def get_blogger_service():
    """Blogger API 서비스 객체를 반환합니다."""
    creds = None

    if os.path.exists(TOKEN_FILE):
        with open(TOKEN_FILE, 'rb') as token:
            creds = pickle.load(token)

    if not creds or not creds.valid:
        if creds and creds.expired and creds.refresh_token:
            creds.refresh(Request())
        else:
            flow = InstalledAppFlow.from_client_secrets_file(
                CREDENTIALS_FILE, SCOPES)
            creds = flow.run_local_server(port=0)

        with open(TOKEN_FILE, 'wb') as token:
            pickle.dump(creds, token)

    return build('blogger', 'v3', credentials=creds)

def convert_code_blocks(html_content):
    """코드 블록을 Blogger에 적합한 형태로 변환합니다."""
    soup = BeautifulSoup(html_content, 'html.parser')

    # Velog RSS에서 코드 블록은 보통 <pre> 태그로 감싸져 있습니다
    pre_blocks = soup.find_all('pre')

    for pre in pre_blocks:
        # 원래의 코드 컨텐츠 추출
        code_content = pre.text.strip()

        # 언어 정보 확인 (class 속성에서 찾기)
        code_tag = pre.find('code')
        language = 'clike'  # 기본값은 C-like 언어로 설정

        if code_tag and code_tag.has_attr('class'):
            for cls in code_tag['class']:
                if cls.startswith('language-'):
                    lang = cls.replace('language-', '')
                    # C 언어 관련 코드는 모두 clike로 변환
                    if lang in ['c', 'cpp', 'c++']:
                        language = 'clike'
                    elif lang in ['yaml', 'yml']:
                        language = 'yaml'
                    elif lang in ['python']:
                        language = 'python'
                    else:
                        language = lang
                    break

        # 요청한 형식으로 코드 블록 생성
        new_div = soup.new_tag('div')
        new_div['class'] = 'code-container'
        # 기존 클래스 유지하면서 새 스타일 추가
        #block['style'] = 'overflow-x: auto; white-space: pre; word-wrap: normal;'

        textarea = soup.new_tag('textarea')
        textarea['class'] = 'code-editor'
        textarea['data-lang'] = language
        textarea.string = code_content

        new_div.append(textarea)

        # 원래의 pre 태그를 새로운 div로 교체
        pre.replace_with(new_div)

    # 변환된 HTML 반환
    return str(soup)


def convert_markdown_tables(content):
    """마크다운 표를 HTML로 변환하고 스타일을 추가합니다."""
    # 마크다운 테이블을 찾아 변환
    table_pattern = re.compile(r'(\

.*\




)')
    matches = table_pattern.findall(content)

    for table in matches:
        # 테이블의 각 줄을 분리
        rows = table.split('\n')

        # 첫 번째 줄은 헤더, 나머지는 데이터
        header_row = rows[0]
        data_rows = rows[1:]

        # HTML 테이블로 변환 : markdown-table무시됨
        html_table = '<table class="markdown-table">\n'

        # 테이블 헤더 생성
        html_table += '<thead>\n<tr>'
        for header_cell in header_row.split('

')[1:-1]:  # 양옆의 '




' 제외
            html_table += f'<th>{header_cell.strip()}</th>'
        html_table += '</tr>\n</thead>\n'

        # 테이블 본문 생성
        html_table += '<tbody>\n'
        for row in data_rows:
            html_table += '<tr>'
            for cell in row.split('

')[1:-1]:  # 양옆의 '




' 제외
                html_table += f'<td>{cell.strip()}</td>'
            html_table += '</tr>\n'
        html_table += '</tbody>\n'
        html_table += '</table>\n'

        # 마크다운 표를 HTML 테이블로 교체
        content = content.replace(table, html_table)

    return content

def process_content(content):
    """Velog 콘텐츠를 Blogger에 적합한 형태로 변환합니다."""
    # 마크다운 표 변환
    content = convert_markdown_tables(content)

    # 코드 블록 변환
    content = convert_code_blocks(content)

    return content

def main():
    try:
        # 📌 1️⃣ Velog RSS 피드 가져오기 : 나의 velog id로 대체
        RSS_URL = "https://v2.velog.io/rss/YOUR_VELOG_ID"
        print(f"Velog RSS 피드를 가져오는 중: {RSS_URL}")
        feed = feedparser.parse(RSS_URL)

        if not feed.entries:
            print("⚠️ RSS 피드에서 글을 찾을 수 없습니다.")
            return

        # 첫 번째(최근) 글 가져오기 : 이부분을 수정하면 원하는 글을 가져올 수 있음
        entry = feed.entries[0]
        title = entry.title
        link = entry.link

        # 콘텐츠 가져오기 (전체 내용 또는 요약)
        content = entry.content[0].value if hasattr(entry, 'content') else entry.summary

        # 내용 처리
        content = process_content(content)

        print(f"📄 처리할 글: '{title}'")

        # 📌 2️⃣ Blogger API 서비스 객체 생성
        service = get_blogger_service()
        # 3.blogger의 ID를 보관 에서 보관한 ID(숫자)로 대체
        BLOG_ID = "YOUR_BLOGGER_ID"

        # 📌 3️⃣ Blogger에 새 글 업로드 (CSS 스타일 포함)
        # 아래 status항목을 없애면 바로 게시가 됨
        # 아래 labels에는 게시물의 태그를 넣으면 됨
        post = {
          "kind": "blogger#post",
          "title": title,
          "content": f"""

          <div class="velog-post">
              {content}
              <hr>
          </div>

          """,
          "status": "DRAFT",    #임시저장
          "labels": ["c언어", "k8s", "타파스", "MTS", "투자정보"]
        }

        print("✏️ Blogger에 글을 게시하는 중...")
        #request = service.posts().insert(blogId=BLOG_ID, body=post)
        request = service.posts().insert(blogId=BLOG_ID, body=post, isDraft=True)
        response = request.execute()
        print(f"✅ Blogger에 게시 완료: {response['url']}")

    except Exception as e:
        print(f"❌ 오류 발생: {str(e)}")

if __name__ == "__main__":
    main()

프로그램에서 사용자에 맞게 몇군데 수정을 하면된다.

1) OAuth 2.0 인증 정보 생성에서 다운로드한 파일을 client_secrets.json으로 변경 2) Velog RSS 피드 가져오기 부분에 자신의 velog id로 대체 3) Blogger의 id 부분에 자신의 blogger id로 대체

6.변환 프로그램으로 velog최신글을 blogger로 게시(임시저장)함

python3 velog_to_blogger.py

blogger에 임시글로 생성되어 있음을 확인 가능하다.

velog_to_blogger로 변환된 부분에서 맘에 안드는곳도 있지만 계속해서 업데이트해 나가려고 한다.

tapas-dev

이 블로그 검색

타파스에서 사용하는 제품군(인프라) 선정