글이 자동으로 비공개 처리 됩니다

[iamfiro]

혹시 어디 문장이 문제인지 알 수 있을까요?

블로그 주소입니다 https://velog.io/@awsome_firo/%EA%B9%83%ED%97%99-README%EC%97%90-%EC%B5%9C%EC%8B%A0-%ED%8F%AC%EC%8A%A4%ED%8A%B8-%EC%8B%A4%EC%8B%9C%EA%B0%84-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8-%ED%95%98%EA%B8%B0

고1의 중간고사 기간 텐션을 이용한 천방지축 빙글빙글 사이드 프로젝트 해보기 라는 내용을 담고 있는 글입니다

---

💎 프로젝트

프로젝트명 : README-velog-updater 제작 기간 : 2024-04-19 (하루) 설명 : Github Actions을 이용한 매일 3시간 마다 최근 5개 Velog 포스트를 가져와 Readme에 커밋하는 개쩌는 프로젝트 사용 기술 : Javascript xml-js (XML to JSON 라이브러리) mustache(템플릿에 데이터를 결합하여 동적으로 파일을 생성하는 라이브러리 ex. ejs)

프로젝트 URL 🔗 : https://github.com/iamfiro/iamfiro

---

1. 개발하게 된 이유 🤔

thmsgbrt님의 README를 보다보니 매일 3시간 마다 업데이트 되는 날씨, 최근 인스타그램 포스트 등에서 아이디어를 얻어 "이 개발자가 작성한 코드를 조금만 변형하면 Velog 글을 불러와서 실시간으로 Github README.md에 업데이트 할 수 있지 않을까?" 라는 아이디어에서 시작했습니다

---

2. 어떻게 해야 하나요?

리포지토리 Fork 하기 🖇️

잠깐 Fork란? 다른 사람의 repository를 나의 github repository로 복제하는 기능

(주로 내가 repository의 어떤 부분을 수정하거나 추가 기능을 넣고 싶을 때 사용하는 기능입니다)

https://github.com/iamfiro/iamfiro 리포지토리에 들어가셔서 오른쪽에 Fork 버튼을 눌러주세요

⚠️ 자신의 Github 아이디와 같은 이름의 Repository를 아래 Create Fork 버튼을 눌러 새로 생성해주세요

---

Github Actions ENV 세팅하기 🔄️

GitHub Actions은 배포를 제어할 수 있는 기능을 제공합니다. 마케팅 목록의 구성원을 관리할 수 있습니다. 다양한 이벤트를 사용하여 워크플로를 트리거합니다 (Github 문서)

Personal access tokens 발급받기 🔒

Personal access tokens으로 이동하여 Github 자동 Push를 위한 토큰을 생성합니다.

1. 토큰 이름(Note)은 기억하기 쉬운 이름으로 설정해주세요
2. Scope중에 Repo를 체크 한 뒤에 토큰 생성후 발급된 토큰을 복사해주세요

토큰을 생성 한 뒤 Fork 한 Repository 상단 탭에 Settings -> Secrets and variables -> Actions 로 이동 후 New environments 버튼을 눌러 Github Action을 위한 Enviroments를 생성 해주세요

아래쪽에 있는 Repository secrets -> New repository secret을 눌러 환경 변수를 설정해주세요

GITHUB_TOKEN 시크릿 설정

1. New secret 후 Name에는 GH_TOKEN 을 입력하고 Value에는 아까 발급했던 토큰을 넣어주세요

   Velog ID 시크릿 설정

2. New secret 후 Name에는 VELOG_USERNAME 을 입력하고 Value에는 자신의 README에 표시할 Velog 아이디에서 '@'를 제거한 상태로 넣어주세요

예시 이미지

---

Github Actions 작동하게 설정하기 🔄️

Fork한 repository에서 상단 탭 -> Actions를 들어가주세요

Github Actions를 처음 세팅 하면 동작하는 Workflows 없습니다, Workflows를 작동 시킬까요? 라는 메세지가 나옵니다

Cronjob을 세팅하기 위해 I understand my workflows, go ahead and enable them을 눌러주세요

왼쪽 탭에 Workflows -> Velog README build -> Enable workflow 버튼을 눌러주세요

---

README 템플릿 수정하기 📜

repository에 들어가셔서 main.mustache이름을 한 파일을 수정해주세요

main.mustache는 Action에서 README를 생성할때 사용하는 리드미 템플릿 파일입니다

파일을 수정하실때 아래를 참고해주세요

{{post}} : Velog 포스트 관련 HTML 태그가 들어가는 예약어 {{{updatedAt}}} : 최근 업데이트 시간을 표시하는 예약어

main.mustache 파일을 수정하시고 변경 사항을 Commits & Push 하면 Github이 알아서 Actions을 실행해 main.mustache 파일을 기반으로 README.md 파일을 생성 합니다!

수고하셨습니다! 모든 세팅은 끝났습니다 🎉

---

3. 마주했던 문제들 🤨

어떻게 자동화를 하지..?

처음 프로젝트를 기획할때 어떻게 매 시간마다 코드를 실행 할 수 있게 구현하지?라는 생각이 다가왔습니다 해당 내용을 구글링 해본 결과 Cronjob이라는 매일 특정 시간대에 코드를 실행 할 수 있다는 기술을 찾았고 그 기능을 Github Actions에서 지원해준 다는 겁니다 와! 🥳

Github에서 Cronjob을 구현하려면 repository 루트 폴더에 .github/workflows 폴더를 생성한뒤 *.yml 파일을 만들어야 한다는 것을 알았고 Github-Actions 글을 보며 Github Action을 위한 .yml 파일 작성법을 공부하며 아래 코드를 작성했습니다

name: Velog README build

on:
  push:
    paths:
      - 'main.mustache'
  schedule:
    - cron: '0 */3 * * *'

jobs:
  cron:
    runs-on: ubuntu-latest

    steps:
    - name: checkout
      uses: actions/checkout@v1
    - name: setup node
      uses: actions/setup-node@v1
      with:
        node-version: '20.x'
    - name: cache
      uses: actions/cache@v1
      with:
        path: node_modules
        key: ${{ runner.os }}-js-${{ hashFiles('package-lock.json') }}
    - name: Install dependencies
      run: npm install
    - name: Generate README file
      run: node index.js
      env:
          VELOG_USERNAME: ${{secrets.VELOG_USERNAME}}
    - name: Push new README.md
      uses: mikeal/publish-to-github-action@master
      env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BRANCH_NAME: 'main'

그러면 cron: 안에 있는 설정된 Cronjob 스케줄 시간 마다 steps: 안에 있는 내용들이 실행 됩니다

Generate README file의 이름을 가진 step이 실행되고 Actions에서 새로 생성된 README를 리포지토리에 적용을 하려면 업데이트 된 README에 대한 Push을 해야하는데 그 방법은 mikeal/publish-to-github-action@master를 Step에 추가하여 리드미가 업데이트 되면 기존 리포지토리에 변경된 README를 Push하는 방식으로 자동화를 구현했습니다

publish-to-github-action를 사용할때 기본 Branch가 Master로 잡혀 Push가 되지 않은 문제가 있는데 env: 안에 BRANCH_NAME: '브랜치 이름'을 추가하면 해결 됩니다

- name: Push new README.md
uses: mikeal/publish-to-github-action@master
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
BRANCH_NAME: 'main'

Action이 계속 실패하다 성공하는 그 희열은 아직도 잊을 수 없습니다 😎

---

동적인 README 구현하기

fs로 파일을 불러와서 특정 예약어를 Replace를 사용하여 데이터를 주입할까... 라는 생각하던 찰나에 mustache-js 라이브러리를 알게 되었습니다

Mustache.js는 템플릿 엔진으로서, 데이터와 HTML 템플릿을 결합하여 동적인 웹 페이지를 생성하는 데 사용하는 라이브러리입니다. 예시로 Pug, EJS 등이 있습니다

mustache에서는 데이터가 삽입될 위치를 {{ }} 두괄식으로 표시합니다.

main.mustache

### 나의 README!!
**안녕하세요 저는 ... 입니다**

{{awsome_data}}

index.js

let data_list = {
awsome_data: '저의 취미는 코딩하기 입니다',
}

await fs.readFile(MUSTACHE_FILE_DIR, (err, fileData) => {
const output = Mustache.render(fileData.toString(), data_list);
fs.writeFileSync('README.md', output);
});

하지만 mustache에서 {{ }}를 사용하면 HTML-escape 처리 되어 렌더링이 이상하게 되는 현상이 있습니다

All variables are HTML-escaped by default. If you want to render unescaped HTML, use the triple mustache: {{{name}}}. You can also use & to unescape a variable.

모든 변수는 기본적으로 HTML-escape입니다. 만약 이스케이프되지 않은 HTML을 렌더링하고 싶다면, {{{name}}}를 사용해 주세요

간단하게 {{ name }}가 아닌 {{{ name }}}으로 변경하면 데이터가 정상적으로 렌더링 되는걸 확인할 수 있습니다

---

마무리 😎

프론트 엔드 개발자를 꿈꾸며 개발 공부를 하고 있는 중간고사 6일 남은 고1입니다

저에게 Velog는 쉬는 시간에 자주 챙겨보는 그저 개발 블로그였는데 이번에 Velog 관련 프로젝트를 하면서 개발한 김에 글이라도 써보자 하는 마음에 글을 작성하게 되었습니다

다른 사람에게 공개하는 목적으로 글을 써보는건 처음이라 많이 서툴수도 있습니다, 읽으실때 거슬리는 부분이 있더라도 양해 부탁드려봅니다..!

이 글을 시발점으로 Velog에 입문하여 개발하면서 느꼈던점, 문제 해결 등 다양한 글을 써보려고 합니다

긴 글 읽어주셔서 감사합니다!

[winverse]

안녕하세요 Velog 이용중에 불편을 드려 죄송합니다.

해당글은 공개 처리로 전환 되었습니다.

자동 비공개 글 전환 알고리즘은 개선 하고 있습니다. 양해 부탁 드리도록 하겠습니다 :)

오늘도 좋은 하루 보내세요!

[iamfiro]

필터링에 걸릴때 무슨 단어에 걸렸는지 알려주는 기능도 있으면 좋을 것 같네요

[winverse]

안녕하세요 의견 주셔서 감사드립니다 :)

문의 주신 내용은 여러명이서 요청 주셨지만 단어를 외부로 노출 하다보면 결국 Velog를 저희 의도대로 이용하지 않으신 분들이 악용할 소지가 있다는 판단이 들었습니다.

이 점 양해 부탁드리며, 조금 더 나은 알고리즘, 기능 개선으로 노력해보겠습니다.

감사합니다!