Quest14

Quest 14. 정적 분석: 타입스크립트와 린트 시스템

Introduction

• 이번 퀘스트에서는 타입스크립트와 린트 시스템을 통해 코드에 대한 정적분석의 장점에 대해 알아보겠습니다.

Topics

• Lint
  • ESLint
• TypeScript

Resources

• ESLint
• TypeScript

Checklist

• 코드를 린팅하는 것의 장점은 무엇일까요?

  • 린팅(Linting)이란 소스 코드를 작성할 때 소스 코드를 분석하여 규약을 자동으로 맞춰주는 도구입니다. (ex. JavaScript EsLint 를 이용하여 코드를 린팅하게 되면 작성한 자바스크립트 코드에서 문제들을 찾거나 고쳐줍니다.)
  • 코드를 린팅을 하면 장점으로는 개발자들이 코드의 일관성을 유지할 수 있어 협업하는데 용이합니다. 또한 자동으로 규악을 맞춰주기 때문에 버그를 미리 예방하고 디버깅 시간을 줄일 수 있습니다.

  • 린트 규칙은 어떻게 설정하는 것이 좋을까요? 너무 빡빡한 규칙과 너무 헐거운 규칙 사이에서 어떻게 밸런스를 잡아야 할까요?

    • 기본적으로 팀원간의 합의를 통해 린트 규칙을 설정합니다. 팀의 규칙을 정하되 개발자의 생산성을 지나치게 저해하지 않는 선에서 유연하게 대처해야 합니다.
    • 또는 기존 설정 린트 규칙은 에어비앤비, 구글 스타일 등등 을 이용하여 큰 설정 작업없이 기본적인 뼈대를 잡을 수 있습니다. eslint의 포맷팅 기능을 이용하면 기본적인 문법적 실수는 잡아주기 때문에 같이 사용하면 좋습니다.

• 타입스크립트는 어떤 언어인가요?

  • TypeScript는 JavaScript를 기반으로 하는 강력한 유형의 프로그래밍 언어로 모든 규모에서 더 나은 도구를 제공합니다.
  • 타입스크립트는 자바스크립트의 Superset으로 자바스크립트에 정적 타입 문법을 추가한 언어입니다. 자바스크립트는 동적 타입의 인터프리터 언어로 런타임에서 오류를 발견할 수 있지만, 타입스크립트는 정적 타입의 컴파일 언어로 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있습니다.

  • 타입스크립트를 사용했을 때 얻을 수 있는 장점은 무엇인가요?

    • 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거합니다. 자바스크립트에서 지나치게 유연한 동적 타입으로 인해 발생했던 문제를 막을 수 있습니다.

  • 타입스크립트를 사용하면서 타입이 없는 라이브러리나 프레임워크를 사용해야 할 경우에는 어떻게 해야 할까요?

    • unknown 타입을 사용하면 됩니다.
    • @ts-ignore : 타입체크를 무시할 수 있습니다
    • 타입 선언 파일 작성하기: d.ts작성, @types패키기 사용, declare module문 사용하기 가 있습니다.
    • 대부분의 npm 패키지가 타입스크립트의 타입추론을 돕는 d.ts파일을 가지고 있지만 없는 경우 d.ts파일을 만들어주고 tsconfig.json파일 내부에 typeRoots값을 추가해주면 됩니다. 이 때 배열 내부에 node_modules/@type도 같이 명시해주어야 합니다.

    declare module "패키지명" {
      //타입 명시
    }

  • any 타입을 남용하는 것은 왜 좋지 않을까요?

    • any 타입을 사용하면 타입스크립트의 타입 추론 기능이 무효화되기 때문입니다. 대신 타입 가드를 통해 타입을 좁혀나가는 방식으로 코드를 작성해야 하며, 꼭 사용해야 한다면 any 대신 unknown을 사용하는 것이 좋습니다.

• 린트와 빌드 등의 과정을 개발 싸이클에서 편하게 수행하려면 어떻게 하는 것이 좋을까요?

  • Jenkins, Travis CI, Circle CI, CI/CD 등과 같은 도구를 사용해 자동화된 빌드 시스템을 사용하고 린트와 연동해, 이를 로컬 환경에서 테스트하여 오류를 발견하고 수정하는 것이 좋습니다.

Quest

• 메모장 시스템에 린트 시스템을 적용해 보세요.
• 메모장 시스템을 타입스크립트 기반으로 수정해 보세요.
• package.json 파일의 scripts 항목을 이용하여 린트와 빌드 등의 작업을 스크립트화 해 보세요.

Advanced

• 자바스크립트 코드에 대한 정적분석은 어떤 과정을 통해 이루어질까요?
  • 이러한 정적분석을 수행해 주는 핵심 역할을 하는 npm 패키지는 어떤 것이 있을까요?