[백엔드TIL] github Actions 개념 (65일차)

도입 배경

1. #PR 을 올림

2. #코드리뷰 완료

3. Merge 시킴 

4. development 브랜치를 빌드 & 배포

5. development 테스트 후 통과 

6. master 브랜치로 머지 후 빌드 & 배포 

​

이런방식으로 개발을 하는데,

4번 dev 브랜치에 머지된 코드를 배포하기전 빌드를 하면 타입스크립트 에러가 난다거나 컴파일에러가 나는 경우가 종종 발생했다.

사실 PR을 올리기전에 개발자가 각자 build를 해보고 올리면 좋으려만 ... 하고 있었는데

​

#github 에서 #Action이라는 기능이 추가된 것이다.

​

그래서 우리 프로젝트에도 PR을 올리면 #CI (npm run build 실행)가 돌도록 적용해 보았다.

​

---

적용 방법

​

한줄 요약

.github/workflows/nodejs.yml 파일이 있으면 action이 실행되므로 해당 파일을 만들어 주면 된다.

​

​

​

1. github에서 Action 탭 이동

2. Node.js 를 이용하여 Set up this workflow 클릭 한다.

​

3. 그러면 nodejs.yml 파일을 작성할 수 있도록 나오는데, 여기서 우리가 원하는 행동을 정의하면 된다.

-> 즉 .github/workflows/nodejs.yml 파일이 있으면 action이 실행된다고 보면된다.

 

아래 내용은 기본 default 설정

기본 내용에서는 push 할때 CI가 돌도록 되어있고 하단에 보면 steps도 우리가 원하는 커맨드가 아니다.

그래서 커스텀이 필요하다.

​

​

그래서 나는 우리 프로젝트에 맞게 아래 부분을 조금 수정했다.

- develop 브랜치에 PR이 올라오면 action이 실행

- node 버전은 10만 돌림

- 실제 소스코드가 있는 src로 들어가서 npm install 후, npm run build 하도록

name: Node.js CI on: pull_request: branches: - develop jobs: build: runs-on: macOS-latest strategy: matrix: node-version: [10.x] steps: - uses: actions/checkout@v1 - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v1 with: node-version: ${{ matrix.node-version }} - name: npm install, and build run: | cd src npm install npm run build env: CI: true

4. Start commit 버튼을 눌러서 nodejs.yml 파일을 커밋한다.

5. 커밋하는데 master에 바로 하는방법, branch를 만드는방법 두가지가 있지만 나는 이력을 남기기 위하여 branch로 하도록한다.

6. Master 브랜치로 합쳐지도록하여 PR 올림

​

​

---

결과

이렇게 PR올리면 갈색으로 build 되는 것이 보이고 모두 끝나면 아래와 같이 보여진다.

detail

​

---

Pricing 가격

그렇다면 #action가격 은 무룐가??? 무료인 것인가??

https://github.com/features/actions

우리는 #Pro를 쓰고있는데 한달에 3000분 무료라고 한다.

Detail 확인하니 한번에 3분정도 걸리는거 같은데 한달에 PR이 1000개 올라오진 않으니까 넉넉한거같다 :)

​

번외) 

<li className={styles.navItem}> <Link href="/profile"> <a> <img src={ cookies.user_info && cookies.user_info.picture ? cookies.user_info.picture : '/images/ic-person.png' } alt="프로필 이미지" width="120" /> </a> </Link> </li>

 

 

img 태그 밖에 a태그를 쓰는 이유는 뭐일까 ?

 

 

<a> 태그 안에서 <img> 태그를 사용하는 이유는 두 가지 측면에서 설명될 수 있습니다.

1. 시맨틱 HTML: HTML은 시맨틱한 마크업을 권장합니다. 시맨틱 마크업은 의미론적으로 올바르게 태그를 사용하여 문서 구조를 설계하는 것을 의미합니다. <a> 태그는 링크를 나타내는 시맨틱한 태그이며, <img> 태그는 이미지를 나타내는 태그입니다. 이러한 시맨틱 마크업은 웹 브라우저나 스크린 리더 등이 문서를 이해하고 접근하는 데 도움을 줍니다. 따라서 이미지에 링크를 포함하려면 <img> 태그를 <a> 태그 내부에 넣는 것이 더 의미론적으로 정확하다고 볼 수 있습니다.
2. 접근성 (Accessibility): 웹 접근성은 모든 사용자가 웹 사이트와 애플리케이션을 사용할 수 있도록 하는 것을 목표로 합니다. 스크린 리더 사용자 및 일부 장애인들은 웹 페이지의 구조와 컨텐츠를 탐색할 때 주로 링크를 사용합니다. 만약 이미지가 링크의 일부로 인식되지 않는다면, 스크린 리더 사용자는 해당 이미지에 있는 링크를 인식하지 못할 수 있습니다. 따라서 이미지를 링크의 내용으로 감싸는 것이 웹 접근성을 향상시키는 한 가지 방법입니다.

이러한 이유로, 이미지를 링크의 일부로 감싸는 시맨틱한 방식을 사용하는 것이 권장됩니다.