1. Typescript vs Javascript
타입스크립트란 자바스크립트의 타입을 강제시키는 언어이다.
일반적인 프로그래밍 언어에서는 문자열로 선언된 함수에는 문자열만 들어가야한다.
하지만 자바스크립트에는 그런 제약이 없다.
자바스크립트에서는 아래 그림처럼 변수에 문자열을 할당했다가 이후에 숫자열을 재할당해도 문제가 되지 않았다.
이렇게 타입없이 변수를 할당하는 것이 쓰기에는 편하나 나중에 지뢰밭이 될 수있다.
타입 스크립트에서는 :string과 같이 타입을 지정해줘서 아래와 같이 숫자 숫자를 할당하려하면 오류가 발생한다.
그렇다면 여기서 지뢰밭은 무엇이고 왜? 타입스크립트를 사용하는가?
아래 로직은 자바스크립트로 빨간 코드와 같이 작성할 수 있다.
1인당 글쓰기 권한을 5개로 제한하였는데 어떤사람은 5개를 넘어서 여러개의 글을 올렸다.
이것이 어떻게 가능할까?
누군가가 실수로 Number가 아닌 String 형태의 숫자 "0"을 할당하였는데
위의 로직이 수행되면서 글쓰기 권한이 "0111111111"와 같이 설정되면서
무한으로 글을 쓰는게 가능해졌다.
이는 서비스의 규모가 클 수록 불안정한 지뢰밭을 만들 것이다.
그렇다면 이를 타입스크립트로 어떻게 안전하게 만들 수 있을까?
방법은 간단하다 위와같이 타입만 지정해주면 된다.
타입스크립트는 브라우저에서 처리하지않고, vscode에서 검사하고 타입이 맞는지 검사하는 패키지이다.
객체의 타입스크립트
Interface 객체이름(변수처럼 설정) {
name: string;
age: number;
}객체는 이처럼 설정하면 된다.
여기서 age: 13이 아닌 age: "13"을 입력 받았다면 에러가 나온다.
환경설정(tsconfig.json)
next.js에서는 루트 폴더에 빈 tsconfig.json 파일을 생성하고
클라이언트 서버를 작동시키면 아래와 같이 tsconfig.json 파일을 자동으로 완성한다.
"skipLibCheck": true 은 npm라이브러리는 스킵하겠다는 의미이다.
"target"은 바꿔줄 자바스크립트 버전을 의미한다.
타입스크립트를 엄격하게 관리하려면 "strict"를 true로 두면 된다.
타입 체크를 포함하거나 제외할 폴더는 * 을 사용하여 명시 할 수 있다.
* 별 한개는 모든 파일명을 의미하고, ** 별 두개는 모든 폴더명을 의미한다.
기존의 자바스크립트 문법으로만 작성 된 파일은 ts,
JSX 문법을 사용하여 작성 된 파일은 tsx라는 확장자로 변경해 주어야 한다.
JSX
JSX에서 X는 XML을 뜻하는데 eXtensible Markup Language의 약자로 확장가능한 마크업 언어를 말한다.
XML은 HTML의 <div>나 <span>과 같은 태그를 <apple> <banana>와 같이 확장하여 사용할 수 있다.
그래서 JSX문법에서 사용한 <h1> <input>태그는 HTML의 <h1> , <input>을 확장해서 만들고
이름만 같게 한것이기에 JSX문법을 사용하는 React에서는 javascript의 onchange와는 다른 onChange라는
camelCase 형태의 이벤트 이름을 사용한다.
2. Typescript 사용하기
타입스크립트는 타입을 명시할 때도 앞에서 명시한 타입과 타입이 맞지 않으면 에러를 출력한다.
함수 타입의 경우 언제 어디서 호출할 지 모르기 때문에 매개변수에 타입을 명시해 준다.
