[FE 개발환경] 6. 팀원들이 함께 작업 시 어떻게 버그를 막고, 코드 품질을 유지할까?

[hyoseok0]

CI 란?

• Continuus Integration
• merge 전 빌드, 테스트 등이 수행되는 respository 로 코드 merge
• merge 전 코드의 정합성 보장

CI pipeline 이란?

• merge 전 수행되는 일련의 step 들

  어떤 step 들이 있을까?

• commit 전
  • prettier 와 eslint 수행
    • 수정 가능한 항목은 수정
• pull request (PR) 후
  • prettier 와 eslint 수행
    • warning / error 메시지 표시
  • test 코드 실행
  • webpack compile 을 해서, compile error 확인
  • code review 등

pipeline 내 step 수행 방법

• commit 전 prettier 와 eslint 를 어떻게 수행?

  • editor 에 적용 가능

  • 저장하거나, 단축키로 prettier 적용 가능

  • 저장 시, eslint --fix 실행 가능

  • git commit hook 가능

  • commit 전 변경된 부분에 한해 eslint --fix 적용

  • Runs Prettier as an ESLint rule

  // package.json
  
    "husky": {
      "hooks": {
        "pre-commit": "lint-staged"
      }
    }
  
    "lint-staged": {
      "*.{jsx,ts,tsx}": [
        "eslint --fix",
      ],
    },

• PR 후 task 들을 어떻게 수행할까?

  • task 들은 보통 jenkins 서버에서 수행됨
  • GitHub 의 CI 연동 기능을 활용해 GitHub 와 jenkins 서버 연결
  • PR operation 발생 시, jenkins 의 job 수행
  • 필수 task 실패 시, merge 막기
  • 예시

각 step 상세

prettier 와 eslint

• 개괄

  • format - prettier
  • code-quality - eslint

• prettier

  • code formatter
  • consistent code style 유지
  • default 설정이 있음. 수정 필요 시, .prettierrc.yml 에 설정
    • option - https://prettier.io/docs/en/options.html
  • 설정 예시

    
    // .prettierrc.yml

  printWidth: 120 // 한줄의 max length 는 대략 120 semi: false // line 끝에 ; 빼기 singleQuote: true // '' 사용 jsxSingleQuote: true // React 의 jsk 내에서 '' 사용 trailingComma: 'all' // multi-line 에서 항상 , 표시

• eslint

  • lint 는 스웨터 보푸라기
  • linter 는 스웨터 보푸라기를 제거하듯 코드에서 format 이 안 맞거나, quality 를 떨어트리는 항목을 알려줌
  • rule
    • 보통 airbnb 에서 제공한 rule 을 기본으로 해서 일부 변경
  • 설정 예시

    // .eslintc.yml
    {
    rules: {
    no-unused-vars: "warn", // 사용하지 않는 변수에 대해 warning
    react/no-unused-prop-types: "warn", // react component 에서 사용하지 않는 props 에 대해 warning
    import/no-unresolved: "error", // import 경로가 유효하지 않다면 error
    }
    }

    test code

  • TDD (Test-Driven-Development)
  • jest 활용
  • 예시

    test('excludeFalsy', () => {
    const array: (number | null)[] = [1, null, 2, 3, null]
    expect(ArrayUtil.excludeFalsy(array)).toEqual([1, 2, 3])
    })

code review

• https://engineering.linecorp.com/ko/blog/effective-codereview/
  • 변화를 작게 유지하자
  • 리뷰는 자주 짧은 세션으로 진행하자
  • 리뷰를 위해 최대한 빨리 PR 을 보내자
  • 의미있는 PR 을 만들기에 충분한 정보를 제공하자
  • 코드 분석 및 코드 스타일 확인을 거치자

[hyoseok0]

DevOps

• What?
  • Development + Operation
  • the engineers work across the entire application lifecycle
    • from development and test to deployment to operations, and develop a range of skills not limited to a single function
• Advantage
  • speed, rapid delivery, reliability, scale, improved collaboration, security
• 기존에는 왜 못했는가?
  • technology stack, tools 개발이 안되어, 각 단계가 manual, slow
    • 특정 team 에서 하기에 너무 양이 많음
• practices
  • perform very frequent but small updates
  • microservices
    • decouples large, complex systems into simple, independent projects
    • each service is paired with small, agile teams who take ownership of each service, organizations can move quickly