기본 콘텐츠로 건너뛰기

config-blogger.js 설정파일 작성 방법 - [nJo2] markdown blogPosting tistory-blogger for vsce

[nJo2] markdown blogPosting tistory-blogger for vsce 소개 바로가기

[nJo2] markdown blogPosting for vsce을 설치하게 되면 아래 1개 또는 2개의 파일에 대해 설정을 해줘야 합니다.

  • .vscode > config-blogger.js : 구글 블로거에 대한 설정을 하는 파일
  • .vscode > config-tistory.js : 티스토리에 대한 설정을 하는 파일

이중에 이 포스팅에서는 .vscode > config-blogger.js 설정에 대해서 자세히 설명을 하려고 합니다. 먼저 아래의 전체 코드를 보여드리고 하나씩 부분 부분 설명을 하도록 하겠습니다.

전체 코드

// config-blogger.js
module.exports = {
    /************************************************************************************
     * 등록방법은 다음 포스팅을 확인해 주세요.                                          *
     * https://ux.stories.pe.kr/275
     ************************************************************************************
     * Blogger API에서 CLIENT_ID와 CLIENT_SECRET를 찾아서 작성합니다.                   *
     *                                                                                  */
    BLOGGER_CLIENT_ID: "", // 예> "8d43565dghhjgkyioyijhgjgiouuigleusercontent.com",
    BLOGGER_CLIENT_SECRET: "", // 예> "KDBBjjdjwiwnHdodfddt4uBekdkoWOFnfjlss",

    /************************************************************************************
     ************************************************************************************
     * 글쓰기를 할 블로그의 Blog ID 번호를 작성합니다.                                  *
     *                                                                                  */
    BLOGGER_NAMES: [""], // 예> 4323454667765

    /************************************************************************************
     ************************************************************************************
     * Blogger API에서는 공식적으로 이미지를 처리하는 방법에 대해서는 제공하고 있지 않습니다.
     * 그래서 다른 어딘가 서버에 이미지를 업로드하고 링크정보를 포함시켜 포스팅하는 방법을 사용합니다.
     * 이 익스텐션은 2가지 방법을 사용하는데 하나는 티스토리(tistory)에 이미지를 올리고 링크정보를 가져오는 방법과 Google Drive에 이미지를 올리고 링크정보를 가져오는 방법입니다.
     *                                                                                  */
    IMAGE_UPLOAD: "google", // 예> ["google", "tistory"]

    /***************************************************************************************
     ***************************************************************************************
     * 위의 IMAGE_UPLOAD에서 google를 선택했다면 Google의 drive 폴더 id 번호를 작성합니다. *
     *                                                                                     */
    DRIVE_FOLDER_ID: "", // 예> 1hghk443366BIfdfhjDhjm4tfhjhjQjk
};

부분코드 설명

코드의 위에서부터 아래쪽으로 설명을 하겠습니다.

CLIENT_ID와 CLIENT_SECRET 입력

/************************************************************************************
* 등록방법은 다음 포스팅을 확인해 주세요.                                          *
* https://ux.stories.pe.kr/275
************************************************************************************
* Blogger API에서 CLIENT_ID와 CLIENT_SECRET를 찾아서 작성합니다.                   *
*                                                                                  */
BLOGGER_CLIENT_ID: "", // 예> "8d43565dghhjgkyioyijhgjgiouuigleusercontent.com",
BLOGGER_CLIENT_SECRET: "", // 예> "KDBBjjdjwiwnHdodfddt4uBekdkoWOFnfjlss",

블로그 웹사이트에서 글을 쓰려면 해당 웹사이트에서 그냥 작성을 하고 올리면 되지만, API방식으로 글을 쓰려면 먼저 해당 블로그(Blogger)에 내가 API를 사용해서 블로그글을 관리하겠다는 신청을 해야 합니다.

Blogger API 신청하는 방법은 아래 포스팅을 참고하세요.
Google Blogger API 생성하는 방법

Google API - https://console.cloud.google.com
이렇게 API사용 승인이 되면 CLIENT_IDCLIENT_SECRET 키를 발급받게 되는데 그 코드를 작성하면 됩니다.

BLOGGER_NAMES 입력

/************************************************************************************
************************************************************************************
* 글쓰기를 할 블로그의 Blog ID 번호를 작성합니다.                                  *
*                                                                                  */
BLOGGER_NAMES: [""], // 예> ["4323454667765"]

Google Blogger는 아이디 하나로 다중의 블로그를 생성해서 운영할 수 있습니다. 이 익스텐션은 각 블로그 별로 지정을 해서 글쓰기가 가능합니다. 여기에는 Blog ID를 배열 형태로 작성이 가능하며, 이 Blog ID는 실제 Md파일로 글을 작성할 때 YML정보의 Blog명과 비교 확인하기 위해 사용되기 떄문에 사용할 Blog ID를 모두 작성해 주는것이 좋습니다.

Blog ID는 위와 같이 주소 URL의 마지막 숫자부분입니다. 이 숫자를 넣어 주시면 됩니다.

IMAGE_UPLOAD 방식 입력

/************************************************************************************
************************************************************************************
* Blogger API에서는 공식적으로 이미지를 처리하는 방법에 대해서는 제공하고 있지 않습니다.
* 그래서 다른 어딘가 서버에 이미지를 업로드하고 링크정보를 포함시켜 포스팅하는 방법을 사용합니다.
* 이 익스텐션은 2가지 방법을 사용하는데 하나는 티스토리(tistory)에 이미지를 올리고 링크정보를 가져오는 방법과 Google Drive에 이미지를 올리고 링크정보를 가져오는 방법입니다.
*                                                                                  */
IMAGE_UPLOAD: "google", // 예> ["google", "tistory"]

티스토리와 다르게 불행히도 Google Blogger은 이미지 업로드에 대한 방법을 제공해 주고있지 않습니다. 그래서 여러가지 방법중에 2가지 방법을 사용할 수 있게 했습니다.

Google Drive에 이미지 업로드 사용

첫밴째는 Google Drive를 사용하는 방법입니다. Google Drive의 특정 전용 폴더를 먼저 생성하고 포스팅 할 때마다 그 폴더에 이미지를 자동으로 저장하고 URL을 가져와 Post에 반영하는 방식입니다. 기본적으로 사용하는 방식입니다.

Tistory 이미지 업로드 사용

두번째는 Tistory 이미지 업로드를 사용하는 방식입니다. 이 방법은 Tistory와 동시에 포스팅을 발행 할 때 사용할 수 있는 옵션입니다. 왜냐하면 tistory API도 신청을 해야 하기 때문입니다. 만약 단독으로 Blogger만 사용할거라면 추천하지 않는 옵션입니다.

DRIVE_FOLDER_ID 입력

/***************************************************************************************
***************************************************************************************
* 위의 IMAGE_UPLOAD에서 google를 선택했다면 Google의 drive 폴더 id 번호를 작성합니다. *
*                                                                                     */
DRIVE_FOLDER_ID: "", // 예> 1hghk443366BIfdfhjDhjm4tfhjhjQjk

위의 IMAGE_UPLOAD 방식google로 선택했다면 Google Drive 중에 Blogger 이미지를 저장될 특정 폴더을 만들고 그 폴더의 위치 정보를 입력해 줘야 합니다. 그러면 해당 폴더의 하위에 포스팅 별로 폴더를 생성하고 그곳에 이미지를 업로드 하게 됩니다.

  1. 저는 @blogger_images라는 폴더를 만들었습니다. 이름은 알아서 적당히 만들면 됩니다.
  2. 해당 폴더에 진입을 하면 URL의 마지막 부분 / 이후에 있는 코드가 폴더의 코드임으로 그 코드를 복사하여 입력하면 됩니다.

댓글

이 블로그의 인기 게시물

Google 스프레드시트로 구글캘린더에 일정 연동하는 방법

저는 구글 제품을 많이 사용하는 편입니다. 제 주력 캘린더도 Google 캘린더 고요. 이번에 모임의 임원을 맡게 되면서 회원들의 생일을 캘린더에 등록해야 할 일이 생겼어요. 그냥 하나하나 등록을 하는 도중 "내가 지금 뭐하고 있나.." 라는 자괴감이 들기 시작했어요. 구글 시트에 있는 날짜 정보(생일)을 한 번에 쉽게 일괄 등록할 수는 없을까라는 생각이 뇌리를 스쳤습니다. 그래서 찾아봤더니.. 약간의 매크로 프로그램을 작성하면 가능할 것 같더라고요. 그래서 열심히 개발을 해봤습니다. 1시간이면 등록할 것을 8시간 걸려서 프로그램을 짜 봤어요. 결과적으로는 더 비효율적이었네요. ㅠㅠ 그러나... 나에게는 비효율 적이었지만 이코드를 공개하면 다른 사람에게는 큰 도움이 될 수 있겠구나 생각을 하고 코드를 공개해 보려고 합니다. 준비물 준비물은 Google 스프레드시트, Google 캘린더만 있으면 돼요. 당연히 무료고요. Google 캘린더 먼저 Google 캘린더를 만들거나 사용하고 있는 캘린더를 준비합니다. 적용하기 원하는 캘린더의 우측의 ... 를 클릭하고 설정 및 공유 를 선택합니다. 캘린더 ID를 잘 기억해 놓습니다. 나중에 이 ID를 활용할 예정입니다. Google 스프레드시트 회원생일 스프래드시트 공유 Google 스프레드시트로 명단과 생일을 작성합니다. ▲ 위와 같이 작성을 하면 되고 중요한 사항은.. 생년월일 이 구글 시트의 날짜 형식에 맞아야 합니다. 그리고 갤린더등록 , 캘린더상태 의 항목은 필수로 있어야 합니다. 캘린더등록 : 캘린더에 등록할지 제거할지를 표시 (ADD / DEL) 캘린더상태 : 현재 캘린더에 해당 항목이 적용되었는지 확인 (Y / ' ') 매크로 프로그램 작성하기 기본적인 준비는 끝났습니다. 이제부터 Apps Script를 제작하고 트리거를 등록하면 됩니다. Apps Script 작성하기 Apps Script 는 구글 제품에 대...

천안맛집-인정받은 불낙지(feat. 백종원의 3대천왕)

2016년 12월말에 천안과 아산으로 1박2일 여행을 다녀왔습니다. 때마침 백종원의 3대 천왕에서 천안의 맛집인 인정박은 불낙지 를 소개하고 있어서 겸사겸사 다녀왔습니다. 대표 메뉴와 가격 메뉴는 냉동낙지와 산낙지로 구성되어 있으며 백종원의 3대천왕 에 소개가 되서 그런지 거의 모든 손님들이 산낙지 불낙찜을 주문했습니다. 냉동낙지는 소짜, 중짜, 대짜로 주문을 할 수 있고 산낙지는 1인당 16,000원으로 주문을 할 수 있습니다. 2~3인이면 그냥 산낙지를 먹는것이 가격적인면에서도 적당할것 같습니다. 음식 맛 우리도 역시 산낙지 불낙찜을 먹었습니다. 음식맛은 많이 기대하지는 말아야 할 것 같습니다. 제 입맛에는 좀 깊은 맛이 부족하고 짠맛이 많은듯이 느껴졌습니다. 다만 살아있는 싱싱한 낙지를 보는 눈 앞에서 요리되어지는 모습과 날치알에 싸먹는 김과 고추 장아찌의 구성은 신경을 많이 쓴것 같습니다. 맛 평점 : ★★☆☆☆ 의정부 석산민물의 낙지돌구이나 쭈꾸미돌구이를 뜬금없이 추천해 봅니다. 여기와 구성이 거의 비슷하지만 맛은 있습니다. 참고로 산낙지는 아닙니다. 청결도 식당은 적당한 청결도를 유지하고 있습니다. 많이 깨끗하지도 그렇다고 심하게 더럽지도 않습니다. 다만 밥을 볶아줄 때 먹던자리에서 볶아주는 것이 아니라 주방앞으로 가져가서 이사람이 먹던 돌판에 볶아주다가 동일한 주걱으로 저사람이 먹던 돌판에 볶아주기를 반복하네요. 청결에 민감한 사람들은 좀 불편할 수도 있겠습니다. 청결도 평점 : ★★★☆☆ 식당 운영과 친절도 식당의 운영은 그런대로 잘 되고 있는것 같습니다. TV에 소개가 되어서 그런지 사람들이 많이 대기하고 있었으나 밖에 대기할 수 있는 장소를 따로 마련해놔서 잠깐이나마 추위를 피할 수 있게 해 놨습니다. 주문도 손님이 온 순서대로 명단을 작성해서 순서대로 식사를 할 수있게 되어있습니다. 도착하시면 바로 카운터로 가서 이름을 적어놔야 합니다. 식당에서 일하시는 분들은 대체로 친...

Google캘린더(달력)에 대한민국 휴일 표시하기

구글 캘린더에 대한민국 휴일을 표시하는 설정에 대해서 소개합니다. 네이버 달력이라면 그냥 기본으로 나오겠지만 구글캘린더의 경우는 별도의 설정을 해 주어야 합니다. 휴일의 표시는 각 나라의 휴일을 구글에서 미리 작성해 놓은 것을 내 캘린더에 불러와 적용하는 방식으로 되어 있습니다. 대한민국 공유일 표시하기 먼저 설정화면으로 이동합니다. 캘린더 화면의 우측상단의 설정 아이콘을 클릭합니다. 메뉴 중 설정 을 클릭합니다. 설정화면 중 좌측 메뉴에서 캘린더 추가 메뉴를 선택합니다. 관심분야와 관련된 캘린더를 선택합니다. 지역 공휴일의 모두 둘러보기 를 선택하면 각나라의 휴일을 선택할 수 있습니다. 우리는 대한민국의 휴일 을 선택합니다. 캘린더에서 공휴일 보기 대한민국 휴일에 대한 설정을 했다면 이제 보기 좋게 표시하면 됩니다. 설정을 정상적으로 했다면 좌측메뉴에 대한민국의 휴일 이라는 캘린더가 보입니다. 캘린더명의 우측끝에 더보기 아이콘 을 선택합니다. 색상을 빨간색으로 선택합니다. (보통 공휴일은 빨간색이므로.. ㅎ) 그러면 캘린더에 휴일의 명칭이 빨간색 으로 표시되게 됩니다. 감사합니다.