[프론트엔드 테스트] 정적 분석

프런트엔드 테스트의 범위

 

정적 분석

 - 타입스크립트를 활용하는 정적분석은 버그를 조기에 발견할 수 있도록 한다.

 - 타입 추론은 런타임 작동을 예측해주기 때문에 아주 유용하다.

타입 추론 : 명시적으로 타입을 지정하지 않아도 타입스크립트 컴파일러가 초기에 할당된 값을 바탕으로 변수의 타입을 추론한다.

 

예시 ) if 문 분기에 타입 추론이 적용되면 값을 안전하게 다룰 수 있다.

function getMessage(name :string | undefined){
	const a = name;
    if(!name){
    	return `Hello anonymous!`;
    }
    //if문 분기와 return으로 undefined가 아니라는 것이 판정된다.
    const b = name; //b : string
    return `Hello ${name}!`;
 }

 

함수의 반환값이 생각한 타입과 일치하는지 검증할 때도 도움이된다.

반환 타입이 string | undefined(문자열 혹은 undefined)이 되지 않도록 함수 블로 마지막에 예외를 발생시킨다.

이 처리 덕분에 반환 타입이 반드시 string(문자열)이 되는 타입 추론이 가능해진다.

 

function checkType(type: "A" | "B" | "C" ): string {
	const message: String = "vaild type";
    if(type === "A"){
    	return message;
    }
    if(type === "B"){
    	return message;
    }
    //예외 발생 처리 유무에 따라 함수의 반환 타입 추론이 바뀐다.
    //throw new Error('invaild type')
 }

 

주석 처리된 부분에서 `throw new Error('invaild type')은 `type`이 `"A"` 또는 `"B"`가 아닐 때 예외를 던지겠다는 의도를 가지고 있다. 만약 이 예외 처리 코드(주석)가 활성화되면, `"C"`가 들어올 경우 함수는 `Error`를 던지게 된다. 

useEffect(() => {
	console.log(name);
 },[]);

 - 참조중인 name을 배열에 포함시켜야 한다는 Lint 오류가 발생

코드 가이드라인을 제공하는 ESLint도 정적 분석 도구 중 하나이다.  ESLint는 부적절한 구문을 수정해서 잠재적으로 발생할 수 있는 버그를 사전에 방지한다. (위 코드)