요즘 팀 프로젝트를 진행하면서 정말 많은 깃허브 기능을 사용해 봤습니다.
이를 통해 원활한 소통과 문제 해결을 진행할 수 있었습니다.
반면 이런 생각도 들었습니다 -> " 개인 프로젝트에서는 필요 없는 거 아닌가? "
일단 결론부터 말하면,
제 개인적인 생각으로는 필수라고 생각합니다.
정말 갑자기 떠오른 예시를 들어본다면
[롤을 하는데, 어차피 내가 잘해서 캐리 하면 되니까 우리 팀 조합이나 상대팀 조합은 고려하지 않고 내가 항상 가던 템트리 올리고, 내가 하던 대로 하면 되는 거 아닌가? 조합 따지는 건 팀랭이나 프로들이나 하는 거지~]
이 느낌입니다
써놓고 보니 정말 별로인 예시인 거 같지만... 왜 이 예시를 떠올려나면
롤을 하는데 = 개발을 하는데
내가 잘해서 캐리 하면 = 내가 개발 능력이 좋아서 코드만 잘 작성하면
우리 팀 조합이나 상대팀 조합 고려 = CI/CD, 사용자
내가 항상 가던 템트리 = 내가 혼자 개발할 때 하던 버릇
조합 따지는 건 팀랭이나 프로들이나 = CI/CD, 사용자 고려는 팀프로젝트나 회사 가면
하지만 롤 해보신 분은 아시겠지만, 조합 고려 안 하면 높이 올라가는 건 불가능합니다
코딩도 똑같다고 생각합니다.
아무리 개인 프로젝트라도 설정한 주제에 대한 예상 유저가 있을 것이고, 인터넷 검색등도 어떻게 보면 협업이라 생각합니다
예시는 별로지만 결국 말하고 싶은 건,
저 개인적으로는 GitHub는 정말 중요하고 계속 연습해야 할 툴이라 생각합니다
왜 그렇게 느꼈는지, 그래서 어떻게 사용했는지 등에 대해서 하나씩 작성해보려 합니다
1. GitHub Issues
깃허브 repo를 생성하고 가장 먼저 하는 일이 프로젝트 계획 또는 기획에 대해 Issue를 작성하는 일입니다.
이를 통해 내가 무엇을 개발할 것이고, 어떻게 개발할 것이고, 왜 이렇게 개발할 것인지를 명확하게 설정할 수 있습니다
아래는 제가 작성한 이슈중 하나입니다.
이슈 1: 사용자 등록 및 프로필 관리 기능 구현
이슈 설명:
프로젝트에서는 사용자 등록 및 프로필 관리 기능을 구현해야 합니다. 사용자는 계정을 생성하고 로그인하며, 프로필을 관리할 수 있어야 합니다. 또한 프로필 사진을 업로드하고 관리할 수 있어야 합니다.
체크리스트:
- 회원 가입 페이지 설계
- 로그인 페이지 설계
- 사용자 등록 기능 구현
- 사용자 로그인 기능 구현
- 프로필 생성 페이지 설계
- 프로필 수정 페이지 설계
- 프로필 삭제 기능 구현
- 프로필 사진 업로드 기능 구현
- 프로필 사진 관리 기능 구현
관련 기능 이슈
[FRONTEND-TASK] 회원가입 폼 구현 #2
우선순위: 높음
마감일: 2023-05-25
(실제 이슈 링크)
저는 우선 기획 이슈를 작성합니다
이를 통해 내가 무엇을 개발해야하는지 명확하게 알 수 있습니다.
이슈 (#12): 로그인 / 회원가입 폼 구현
이슈 설명:
로그인 / 회원가입 폼 디자인과 기능(비밀번호 찾기, 비밀번호 재설정 / 유효성 검사)을 구현합니다
체크리스트:
- 로그인 폼 디자인
- 비밀번호 찾기
- 비밀번호 재설정
- 필수 필드가 입력되었는지 확인하고 이메일 형식을 유효성 검사
우선순위: 보통
마감일: 2023.05.25
담당자: [joseph0926]
레이블: frontend
마일스톤: [ v1.2]
(실제 이슈 링크)
그 다음으로는 개발 이슈를 작성합니다
이를 통해 내가 어떻게 개발하는지를 명확하게 알 수 있습니다
마지막으로는 코멘트를 통해 왜 이렇게 개발하는지를 토론합니다 (이것은 개인 프로젝트에서는 빠질 수 있습니다)
예시: https://github.com/Selody-project/Frontend/issues/38
[BUG] 쿠키(httpOnly)를 이용했을 때 인증 여부 확인 · Issue #38 · Selody-project/Frontend
설명 상황: 백엔드에서 토큰을 전달 방식을 쿠키로 설정 이때 XSS(Cross-Site Scripting) 공격으로부터 보호를 위해 httpOnly를 사용 (즉, 프론트에서 쿠키 컨트롤 불가능) 하지만 프론트에서 유저가 쿠키
github.com
이러한 일련의 과정을 통해 좀 더 명확한 프로젝트를 구축할 수 있습니다.
2. GitHub Actions
- GitHub Actions 이란?
- 깃허브에 올라가있는 코드에 대한 다양한 자동화를 제공하는 서비스
- 이러한 깃허브 액션은 크게 2가지 영역으로 볼 수 있는데,
- CI / CD
- CI (Continuous Integration)
- 코드 변화에 따라 자동적으로 빌드, 테스트, 통합등을 하는 것을 뜻함
- CD (Continuous Delivery)
- 코드 통합 이후 앱의 새로운 버전을 자동으로 게시하는 것을 뜻함
- CI (Continuous Integration)
- Code & Repo 관리
- 자동화된 코드 리뷰, 이슈 관리…
- CI / CD
- GitGub Actions 사용시 알아야 할 3가지 컨셉
- Workflows
- 이벤트(또는 트리거)를 설정하고, 그것이 해당 워크플로우의 실행 시기를 결정함
- Jobs
- Runner 정의 (실행 환경)
- 하나의 워크플로우에 여러 job이 존재한다면, 그것들은 기본적으로 병렬로 실행되지만, 설정을 건드려 순차적으로 실행되도록 설정할 수 있다
- 특정 조건에서만 실행되도록 설정할 수 있다
- Steps
- 실행해야하는 스크립트 (shell script or action)
- 하나의 job에 여러 step이 존재한다면, 그것들은 기본적으로 순차적으로 실행된다, job과 달리 무조건 순차적 실행이다
- 특정 조건에서만 실행되도록 설정할 수 있다
- 위 3가지 컨셉의 관계
- repo > workflow > job > step
- Workflows
- Workflow 정의하기
name: Test Workflow
on: [push, workflow_dispatch]
jobs:
test:
runs-on: ubuntu-latest
steps:
- name: Get code
uses: actions/checkout@v3
- name: Install NodeJS
uses: actions/setup-node@v3
with:
node-version: 18
- name: Install dependencies
run: npm ci
- name: Run tests
run: npm test
deploy:
needs: test /* test job이 성공해야 해당 job이 시작됨 */
runs-on: ubuntu-latest
steps:
- name: Get code
uses: actions/checkout@v3
- name: Install NodeJS
uses: actions/setup-node@v3
with:
node-version: 18
- name: Install dependencies
run: npm ci
- name: Build Project
run: npm run build
- name: Deploy
run: echo "Dummy Deploying,,,"
저는 위 예시 코드처럼 아직 테스트, 배포에만 GitHub Action을 사용중이지만,
좀 더 숙련도가 올라가면 활용 방법에 따라 정말 큰 도움이 될거같습니다.
실제 기존 프로젝트에 GitHub Actions을 추가한 예시 링크
다음 글에서는 기존 프로젝트에 GitHub Actions를 적용하면서 자세히 해당 키워드, 기능들에 대해서 작성해보려합니다.
'기타 > Tip' 카테고리의 다른 글
프로젝트에는 어떤 CSS 방식을 사용 해야 할까? (styled-components, tailwind, chakraUI) (0) | 2023.05.21 |
---|---|
[기타] 노드 버전 매니저 (Node Version Manager) (0) | 2023.02.26 |