정적 웹사이트 호스팅을 무료로 할 수 있는 방법에 대해 알아보다가 github pages 라는 서비스를 알게 되어 이를 알아보고 적용한 과정을 정리해서 공유드립니다. branch 를 대상으로 설정하는 방법도 있지만, 본 글에서는 github action 과 tag 를 이용한 방법으로 공유 드리고자 합니다. github action yml 파일 작성.github/workflows/github-page-ci-cd.yml 파일을 생성 후 내용을 아래와 같이 작성해줍니다.name: github-page-ci-cdon: push: tags: # 레포지토리에 아래 패턴과 일치하는 태그가 생성될 때 아래 jobs 들이 진행됩니다. # 아래 예시같은 경우 레포지토리에 github-page-..

개발을 하다 보면 자주 사용되는 것들은 패키지화 하여 필요할 때 불러와 사용하곤 합니다. 저번 포스팅에선 github 에 패키지를 배포하는 과정에 대해 공유드렸었는데, 이번에는 github action 을 이용하여 npm 에 배포하는 방법에 대해 공유드리고자 합니다. ✻ 필요 패키지 설치 배포하고자 하는 패키지의 레포지토리의 루트 경로에서 아래 명령어를 통해 빌드시 필요한 패키지들을 설치합니다. npm i -D esbuild esbuild-css-modules-plugin 이 외에도 레포지토리에서 필요로 하는 패키지들은 모두 devDependencies 로 설치하거나 옮기실 것을 권장합니다. 나중에 esbuild 로 번들링 할 때 필요 패키지들은 같이 묶여서 번들링 될 것이기 때문입니다. ✻ packag..

안녕하세요. 루루개발자 입니다. 이번 시간에는 github action 을 활용하여 github package 저장소에 npm package 를 배포하는 방법에 대해 기술해보고자 합니다. 본 글에서는 typescript 기반의 react 와 프론트엔드(브라우저)에서 사용되는 패키지를 기준으로 하며 레포지토리의 패키지 개발 코드들이 src 폴더 밑에 있다고 가정하고 배포하는 방법을 설명하기 때문에 이 점 참고해주세요. :) 1. personal access token 발급 받기 github action 에서 github package 저장소로 패키지를 publish 하기 위해서는 해당 권한이 있는 토큰이 필요하므로 아래 과정을 참고하여 토큰을 발급받아 주세요. https://github.com/ githu..

안녕하세요! 루루개발자 입니다. 회사 업무를 하다 보면 가끔은 집에 있는 개인 PC 에서 재택으로 일을 하는 경우가 있는데, 그러다보니 git 의 글로벌 설정으로 user.name 과 user.email 을 회사 계정으로 설정해두고 사용하고 있었습니다. 하지만 가끔은 제 개인 레포지토리에 푸쉬를 날릴 때도 있는데, 이 때 실수로 제 회사 계정 정보로 커밋된 정보가 제 개인 레포지토리로 푸쉬 되는 경우가 종종 있었습니다. 이를 방지하기 위해 github 에서 public 으로 공개된 제 개인 레포지토리들의 branch rule 에서 서명된 커밋만 푸쉬가 가능하도록 설정하였고, 이후 서명된 커밋을 이용하는 방법에 대해 공유드리고자 합니다. 1. 개발 PC 에서 gpg 설치하기 우선 커밋할 때 서명을 사용하기..