2024년 12월 16일
✏️ lodash 오픈 소스 프로젝트 만들어보기
-
깃허브 oranization 생성 → repository 생성 → 로컬에 연결(clone 합시다)
-
보호 장치 설정 : settings → branches → protect matching branches → require a pull request before merging (머지 전 pr 체크) (여러 옵션들 있지만 기본적인것 체크해보자)
-
pr, issue template 설정
-
pr template
-
.github 디렉토리 → pull_request_template.md
-
양식 작성
# minidash pull request ## PR 작업 <!-- 작업 주제 or 제목을 적어주세요 --> ## 설명 <!-- 설명을 적어주세요 --> ## TODO - [] 할일 - [] 할일
-
-
issue template
-
.github 디렉토리 → issue_template.md
-
양식 작성
# minidash issue ## issue 작업 <!-- 이슈 주제 or 제목을 적어주세요 --> ## 설명 <!-- 설명을 적어주세요 --> ## 참고 자료 <!-- 파일이나 이미지, url 등 관련 참조 내용을 기입해주세요 --> -
git push
-
-
issues 생성 → 템플릿 양식에 맞게 적기 → labels 추가
-
Reamde 설명 보충 → git push
# minidash ## 설명 minidash는 ~~ ## 특징 - 배열, 객체 ,문자열을 다루기 위한 사용하기 쉬운 API 제공 - 외부 의존성 없는 경량화 - 누구에게나 열려있는 오픈소스 ## 설치 ```bash npm install minidash ``` ## 사용법 ```js import { checkedArr } from minidash; checkedArr([1, 2]); // true ``` ## 기여하기 1. 저장소를 fork 해주세요. 2. 새 브랜치를 만들고 수정사항을 푸쉬해주세요. 3. pr을 요청하고 문서 양식에 맞춰서 내용을 기입해주세요. ## 라이센스 MIT 라이센스에 따라 제공되는 오픈 소스 소프트웨어입니다. -
소스 코드 작업
- npm init -y (노드 패키지 모듈 기본 설정 파일 등록)
- index.js (작업 파일 생성 → 소스코드의 시작점) & 모듈 작성
// checkedArr.js export const checkedArr = (arr) => { return Array.isArray(arr) }// findOddNums.js export const findOddNums = (arr) => { return arr.filter((num)=> num % 2 !== 0); }// findEvenNums.js export const findEvenNums = (arr) => { return arr.filter((num)=> num % 2 === 0); }// capitalize.js export const capitalize = (str) => { if(typeof str !== 'string') return ''; return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase() }// index.js export { checkedArr } from './src/checkedArr'; export { findOddNumbs } from "./src/findOddNums"; export { findEvenNumbs } from "./src/findEvenNums"; export { capitalize } from "./src/capitalize";// package.json ... 생략 ... "type" : "module" }
-
-
PR 관리 : github action 설정
-
github action
- github에서 제공하는 빌드, 테스트, 및 배포 파이프라인을 자동화할 수 있는 CI/CD 서비스
- CI(Continuos Integration, 지속통합)와 CD(Continuous Deployment, 지속배포)
-
github action 설정
-
.github 디렉토리 -> workflows 디렉토리 생성 → workflow.yml (github action 이용한 pull request 검증 workflow 추가) → commit → push 까지
-
깃허브 액션 설정을 위해서 yml 설정이 오류가 난다면 챗gpt 이용하면 빨리 찾을 수 있음!
name: Pull Request Check # 워크플로우 이름 on: # 워크프로우 실행 트리거 설정 pull_request: # pull_request 이벤트에 대해 types: [opened, synchronize] # PR이 오픈되고, 업데이트 되었을때만 실행되도록 정의 jobs: # 작업 정의 check: # 깃헙 액션 환경 설정_작업 이름 runs-on: ubuntu-lastest # 우분트 환경 permissions: # 권한 설정 pull-requests: write # PR에 쓰기 권한 설정 steps: # 작업 단계들 - name: Check PR and Take Actions # 작업 이름 설정 uses: actions/github-script@v7 # Github 스크립트 액션 사용 with: # 옵션 설정 script: | # 스크립트 시작 // async 함수로 스크립트 래핑 async function run() { const pull_request = context.payload.pull_request; // PR 객체 가져오기 if (pull_request === undefined) { // pull_request가 없는 경우 console.log("this is not a pull request"); // 메시지 출력 return; // 종료 } // script를 통해서 스팸성 pr 걸러내는 로직 시작 const body = pull_request.body; // 본문 담기 if(!body) { try { // PR에 코멘트를 추가합니다. await github.rest.issues.createComment({ // PR에 코멘트 추가 owner: context.repo.owner, // 저장소 소유자 repo: context.repo.repo, // 저장소 이름 issue_number: pull_request.number, // PR 번호 body: "해당 PR은 가이드라인을 준수하지 않았습니다. 때문에 PR을 닫도록 하겠습니다. 가이드라인 준수해서 다시 PR 요청해주세요~", // 코멘트 내용 }); // PR을 닫습니다. await github.rest.pulls.update({ // PR을 닫음 owner: context.repo.owner, // 저장소 소유자 repo: context.repo.repo, // 저장소 이름 pull_number: pull_request.number, // PR 번호 state: "closed", // 상태를 닫힘으로 변경 }); console.log("PR was closed successfully.") // 닫힘 성공 메시지 출력 } catch (error) { console.error("Error occurred while closing PR:", error); // 닫힘 오류 메시지 출력 } } } // async 함수 실행 run();
-
-
가계정으로 로그인 후, pr 동의 후 머지시키기 (한명 이상 동의해야 머지 될 수 있게 설정해놨으니깐)
-
pr에 조건 하나 더 걸기 (주석 삭제해야 pr 날릴 수 있음)
- pr template 수정# minidash pull request <!-- 아래에 내용을 작성하시고 해당 라인을 삭제해주세요 --> ## PR 작업 <!-- 작업 주제 or 제목을 적어주세요 --> ## 연관된 이슈 <!-- 이슈번호를 적어주세요 --> ## 설명 <!-- 설명을 적어주세요 --> ## 작업 내용 <!-- 작업한 내용을 설명해주세요(깃해시코드 입력도 부탁드려요) --> 1. todo 2. todo ## 참고 자료(UI가 바뀐 부분은 이미지를 넣어주세요) <!-- 파일이나 이미지, url 등 관련 참조 내용을 기입해주세요 -->-
workflow.yml 수정
name: Pull Request Check # 워크플로우 이름 on: # 워크프로우 실행 트리거 설정 pull_request: # pull_request 이벤트에 대해 types: [opened, synchronize] # PR이 오픈되고, 업데이트 되었을때만 실행되도록 정의 jobs: # 작업 정의 check: # 깃헙 액션 환경 설정_작업 이름 runs-on: ubuntu-lastest # 우분트 환경 permissions: # 권한 설정 pull-requests: write # PR에 쓰기 권한 설정 steps: # 작업 단계들 - name: Check PR and Take Actions # 작업 이름 설정 uses: actions/github-script@v7 # Github 스크립트 액션 사용 with: # 옵션 설정 script: | # 스크립트 시작 // async 함수로 스크립트 래핑 async function run() { const pull_request = context.payload.pull_request; // PR 객체 가져오기 if (pull_request === undefined) { // pull_request가 없는 경우 console.log("this is not a pull request"); // 메시지 출력 return; // 종료 } // script를 통해서 스팸성 pr 걸러내는 로직 시작 const body = pull_request.body; // 본문 담기 const message = "아래에 내용을 작성하시고 해당 라인을 삭제해주세요"; // 조건 하나더 걸기 if(!body || body.includes[message]) { try { // PR에 코멘트를 추가합니다. await github.rest.issues.createComment({ // PR에 코멘트 추가 owner: context.repo.owner, // 저장소 소유자 repo: context.repo.repo, // 저장소 이름 issue_number: pull_request.number, // PR 번호 body: "해당 PR은 가이드라인을 준수하지 않았습니다. 때문에 PR을 닫도록 하겠습니다. 가이드라인 준수해서 다시 PR 요청해주세요~", // 코멘트 내용 }); // PR을 닫습니다. await github.rest.pulls.update({ // PR을 닫음 owner: context.repo.owner, // 저장소 소유자 repo: context.repo.repo, // 저장소 이름 pull_number: pull_request.number, // PR 번호 state: "closed", // 상태를 닫힘으로 변경 }); console.log("PR was closed successfully.") // 닫힘 성공 메시지 출력 } catch (error) { console.error("Error occurred while closing PR:", error); // 닫힘 오류 메시지 출력 } } } // async 함수 실행 run(); -
주석 지우지 않으면 pr 되지 않음! (github action탭 보면 확인 가능)
-
-
pr 승인
- Files changed → Review changes → 메시지 작성(LGTM : Look Good To Me - 많이 쓰인다구함!) → Submit view
-
프론트엔드개발자가 되고 싶어서 열심히 땅굴 파는 자