6주차 과제 피드백

유닛 테스트 (Unit testing)

하나의 모듈을 기준으로 독립적으로 진행되는 가장 작은 단위의 테스트

통합 테스트(Integration Test)

모듈을 통합하는 과정에서 모듈 간의 호환성을 확인하기 위해 수행되는 테스트

문자열 실수

문자열을 직접 비교하는건 오류가 발생하기 충분히 쉽다.

ex)

if (node.type === 'DIRECTORY') {...}
if (node.type === 'FILE') {...}

해결방법

객체를 만들어 그곳에 저장시켜 처리한다.

ex)

const NodeType = { DIRECTORY: 'DIRECTORY', FILE: 'FILE', }
if (node.type === NodeType.DIRECTORY) { ... }
if (node.type === NodeType.FILE) { ... }

early return pattern

안되는 상황에 대해 미리 리턴을 진행한다.

early return pattern 장점

• 가독성이 좋다 => 의미 명확
• 누군가가 실수로 결과를 수정하려는 코드를 넣는다고 해도 안전
• 문제에 따르는 코드의 동작을 줄일 수 있다.

if (!type || ! validation(this.state)) { return }

Jest

JS 테스트 프레임워크
작성한 코드가 제대로 동작하는지 확인할 때 사용

코드줄이기

isRoot: id ? false : true

• 아래와 같이 줄이기

isRoot: !id

가독성 높이기

  if (!(typeof isRoot === "boolean")) alert("isRoot validation Error");
  if (!(typeof isLoading === "boolean")) alert("isLoading validation Error");
  if (!(nodes instanceof Array)) alert("nodes validation Error");
  if (!(paths instanceof Array)) alert("paths validation Error");
  if (!(typeof type === "string")) {
    alert("type validation Error");
  }
  if (!(typeof selectedImageUrl === "string")) {
    alert("selectedImagUrl validation Error");
  } else return true;

• 아래처럼 정의해서 수정하기

  const validationBoolean = (value, fieldName) => {
    if (typeof value !== 'boolean') {
      throw new Error(`${fieldName} is not boolean!`)
    }
  }

  const validationString = (value, fieldName) => {
    if (typeof value !== 'string') {
      throw new Error(`${fieldName} is not boolean!`)
    }
  }

  const validationArray = (value, fieldName) => {
    if (!(nodes instanceof Array)) {
      throw new Error(`${fieldName} is not boolean!`)
    }
  }

  validationBoolean(isRoot, 'isRoot')
  validationBoolean(isLoading, 'isLoading')

  validationString(type, 'string')
  validationString(selectedImageUrl, 'string')

  validationArray(nodes, 'nodes')
  validationArray(paths, 'paths')

alert과 console.error

• 에러상황에 대해서 사용자에게 친절하게 알려주는 부분은 지양하는게 좋다
• 보통 "에러가 발생했습니다. 재시도해주세요!" 정도로만 보여주고 뒤에서 로깅해서 개발자에게 알려주는 경우가 더 많다
• 어차피 구체적으로 알려줘봤자 대처할 수 없는 사용자이기도 하고, 취약점을 알려주는 경우도 될 수 있어서 그렇다

css 세션

• 기본값은 많이 알 수록 원인을 찾을 수 있다.
• PostCSS는 CSS 표준 문법(CSS 커스텀 프로퍼티)이나 표준화 작업 중에 있는 문법(CSS 중첩(Nesting))을 제공
• PostCSS는 Sass에 비해 덜 유명
• Babel : 하위 호환성 맞추기
• 크로스 브라우징 : 웹 페이지 제작 시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게(호환성) 나오게 하는 작업 ( 최대한 다 비슷하게 만드는 것 )
• polyfill : 웹 개발에서 기능을 지원하지 않는 웹 브라우저 상의 기능을 구현하는 코드

polyfill / babel

polyfill : 새로 추가된 전역 객체들(Promise, Map, Set)을 사용가능한 객체로 바꾸어주는 개념
babel: ES6/7 코드를 ES5 코드로 Transpiling 해주는 Transpiler

• Promise 객체는 기존에 존재하지 않는 ES6 에서 추가된 객체로, ES6 이전에서 new Promise() 를 하는 경우 Javascript 의 Syntax 이지만 정의되지 않는 function 이라는 의미에서 'Promise is not a function' 의 결과를 보여준다. Polyfill 개념을 이용해 Promise 를 사용할 수 있도록 정의해주는 것을 Babel-Polyfill 이 해줄 수 있다.

출처

유닛테스트
polyfill