컨플릭트를두려워하지말자

정적 타입 검사란 ? 타입스크립트가 기본적으로 제공하는 기능으로,

컴파일 단계에서 변수나 리턴값, 파라미터 등의 타입에러를 찾아주는 것을 말한다. 

동적 타입 언어인 javascript는 암묵적 타입 변환 등을 허용하기 때문에 서로 다른 타입간의 계산을 허용하는 경우도 있고,

그로인해 예기치못한 런타임 에러가 발생할 수도 있다. 

그러나 타입스크립트는 컴파일시에 모든 변수, 매개변수 등의 정적 타입 검사를 진행하기 때문에, 

런타임시 발생할 에러를 사전에 방지할 수 있다. 

예를 들어, 

자바스크립트의 경우에는 

let num = 30;
let strNum = "2";

let plus = num+strNum;
console.log(plus); // "302" 출력 ;

let minus = num - strNum;
console.log(minus); //28 출력

암묵적 타입 변환을 허용해서 덧셈 연산인 경우, 숫자를 문자열로 변환한 계산을 시도하고, 뺄셈 연산의 경우엔 문자열을 숫자로 바꾸는 것을 시도한다. 

그러나 타입스크립트는 위와 같은 암묵적 타입 변환을 허용하지 않고, 코드에서부터 타입 에러를 표시해준다. 

또한, 

tsconfig.json 파일을 수정해서 더욱 엄격한 모드로 변경하는 것도 가능하다. (any를 허용하지 않음)

타입 추론이란, 

타입을 코드상에 명시적으로 지정하지 않아도 컴파일러가 변수 or 상수의 값을 자동으로 추론해주는 것을 말한다. 

예를 들어서, 

const x = 22;

const y = 10;

const z = x+ y ;

일때 컴파일러는 z의 타입이 number임을 자동으로 추론한다.

재할당이 가능한 let의 경우에는,

let MyName = "Ann";

MyName = 223; //MyName의 타입을 string으로 추론중이므로 에러 발생!

이것은 함수의 리턴값이나 객체의 타입을 추론하는 경우에도 동일하다. 

그러나 const와 let의 타입 추론 방식은 조금 다르다. 

상수인 const 는 리터럴 타입, 변수인 let은 원시 타입 추론이 이루어진다. 

여기서 리터럴 타입이란, string, number 와 같이 넓은 의미의 타입이 아니라, 

const x = 30의 경우 x는 30 이라는 구체적인 리터럴 타입으로 추론되는것을 말한다.  

원시타입은 우리가 일반적으로 아는 string, number, boolean, undefined 등 포괄적으로 사용되는 타입을 말한다. 

재할당이 가능한 let은 넓은 범위의 원시 타입으로 추론되지만. 재할당이 불가능한 상수 const는 리터럴 타입으로 추론되는 것이다. 

 
[ 테스트 코드란? ]
 
컴포넌트 안에 들어가는 기능(onClick 이벤트 등 핸들러)과 전체적인 동작이 개발자의 의도대로 동작하는지 확인하는 코드 . jest는 Meta에서 개발한 js 테스트 프레임워크로 리액트와의 호환성이 뛰어나 리액트 프로젝트에서 많이 사용된다! 
리액트 외에 Vue.js, Angular에서도 사용 가능하다 
 
 
 
테스트 코드를 작성하는데 도움을 받은 문서 
 
리액트에서의 테스트 방안 한글문서 
 
https://ko.legacy.reactjs.org/docs/testing-recipes.html#mocking-modules

 
 
getting started - jest 
 
 
https://jestjs.io/docs/getting-started

 
 
 
jest 설치 방법(with Typescript)
 
npm이나 yarn을 통해 jest와 관련 패키지를 설치한다.

npm install --save-dev jest @testing-library/jest-dom @testing-library/react @types/jest
npm install @testing-library/user-event

 
패키지에 대한 설명 
 
jest : 테스트 프레임워크 
@testing-library/jest-dom : dom 관련 테스트 메쳐 추가제공  *테스트 메쳐: 테스팅프레임워크에서 사용되는 함수. 
@testing-library/react : 리액트 컴포는트를 테스트하기 위한 유틸리티 제공 
@types/jest : 타입스크립트에서 jest를 사용할때 필요한 타입 제공 
@testing-library/user-event  사용자이벤트를 시뮬레이션하여 테스트할수있게 함 . 
 
 
테스트 코드를 작성 후 
콘솔에서 npm test 를 입력하면 테스트코드가 돌아간다. 
 
 
jest의 매쳐(matcher)를 사용해서 테스트를 진행해보자 
 
 
describe : 테스트케이스들을 그룹화 하는 함수 
 
it or test : 개별 테스트 케이스를 작성하는 함수. 둘 다 동일한 기능. describe 안에서 여러개를 작성 할 수도 있고, describe 없이 하나만 작성하는 것도 가능. 그러나 afterEach, beforeEach 등의 기능을 쓰기위해서는 describe안에 정의해야만 한다. 
 
afterEach , beforeEach: 테스트 실행 전,후에 실행될 동작을 정의하는 함수. 테스트케이스별로 각각 동작한다. 
 
afterAll , beforeAll: describe 그룹 내의 모든 테스트 가 동작하기 전,후로 한 번씩만 실행될 동작을 정의하는 함수. 
 
expect : 테스트의 결과를 검증할때 사용. 특정 함수가 예상대로 동작하는지 확인하는 함수.
e.g) expect(어떤value).toBe(어쩌고handler); => 어떤 value가 true일때 어쩌고 핸들러가 동작해야 한다. 
 
 
테스트코드의 파일명은 
(파일명).test.ts 등으로 작성하는 것이 일반적이다. 
 
왜나하면, jest가 테스트 파일로 자동 인식하는 파일명 패턴이 정해져있기 때문이다! 
 
패턴 종류
.test.js .test.jsx .test.ts .test.tsx
.spec.js .spec.jsx .spec.ts .spec.tsx
 
 
이제 위에 소개한 메쳐들이 들어간 테스크 코드를 jest 공식문서에 나오는 코드를 사용해서 작성해보자 
 
 
파일명 예시 : mathHook.test.ts 

describe("덧셈 뺄셈 테스트 코드", ()=>{


beforeEach(()=>{
//각각의 테스트 코드 실행 전에 실행할 내용을 작성 
//e.g) 변수 초기화 등 
});

test('two plus two is four', () => {
  expect(2 + 2).toBe(4);
});


it('four minus two is two', () => {
  expect(4 - 2).toBe(2);
});


afterEach(()=>{
//각각의 테스트 코드 실행 후에 실행할 내용을 작성 
//e.g) 리소스 해제 등 메모리 할당 해제 
});

})

 
 
- describe를 통해 덧셈 테스트코드, 뺄셈 테스트코드를 하나의 그룹으로 묶고 
- it or test를 사용해 각각의 테스트코드를 작성한다. 
- expect를 통해 기대되는 값을 확인한다. 
 
 
 
 
앞으로 더 추가할 예정..