오늘은 타입스크립트에 대해서 알아보자. 타입스크립트에 대해서 알아보기 전에 간단하게 자바스크립트를 짚고 넘어가자면,
자바스크립트는 동적 타입 프로그래밍 언어이다. 변수를 선언할 때 타입을 따로 지정해주지 않아도 할당하는 값의 타입에 따라 변수의 타입이 정해진다. 자바스크립트의 이런 특징은 서비스의 규모에 따라 장단점이 확실하게 드러난다. 동적 타이핑은 유연하고 강력해서 개발 초기 단계에서 개발 속도가 정말 빠르지만 프로젝트 규모가 커질 수록 예기치 않은 타입 변경으로 예상하지 못한 에러가 날 확률이 높아지고 코드량이 늘어나서 에러가 났을 때 원인을 파악하기도 힘들어진다.
경매 사이트에서 1인당 5개의 글을 쓸 수 있게 권한을 주고 배포를 했다.
다음 날, 한 유저가 5개가 훨씬 넘는 글을 발행했다. 알고 보니 글 개수의 초기값이 문자열 "0" 으로 잡혀있었고 글을 쓸 때 마다 거기에 숫자 1을 더해서 문자열이 계속 추가되었던 것이다.
이런 문제를 사전에 확실히 방지해줄 수 있는 것이 바로 'TypeScript'이다.
타입스크립트
타입스크립트는 변수를 선언할 때, 자바스크립트와 달리 타입을 지정해줄 수 있어서 타입 관련 문제를 사전에 방지할 수 있다.
타입스크립트는 런타임에서 실행되는 인터프리터 언어인 자바스크립트와 달리, 컴파일을 통해 자바스크립트로 변환되어 동작하는 컴파일 언어이다. TS -> Compile -> JS -> Run 순으로 변환되기 때문에 트랜스파일 언어라고도 불린다. 이 컴파일 과정에서 타입 체크를 하고 버그가 생기면 바로 수정할 수 있어 코드의 안정성이 높아진다.
하지만,
기존 자바스크립트의 변수나 함수 등 모든 곳에 타입을 지정해줘야 하는 건 아니지만, 대부분의 경우에 타입을 지정해주는 게 좋기 때문에 절대적인 코드량이 늘어나게 되고, 컴파일 과정도 거쳐야하기 때문에 전체적인 개발 속도가 자바스크립트에 비해서 느려진다.
그럼 뭘 써야할까?
코드를 작성하는 전체적인 과정에서 타입을 일일히 지정해가며 코드를 짜는 것이 답답하고 느리게 느껴질 지라도, 자바스크립트를 사용해서 나중에 생길 에러를 파악하고 고치는 데에 시간을 쓰는 것보다는 나을 거라 생각한다. 같은 양의 코드 vs 에러 중에 고르라면 코드를 생각한 대로 짜는 것보다 에러를 파악하고 고치는 것이 더 오래걸린다고 생각하기 때문이다.
JSX 파일은 .js 확장자로 만들어도 괜찮지만, .tsx 파일은 .ts 확장자로 만들면 안된다.
타입스크립트 함수의 타입 지정에서 input에서 얻어오는 event 타입 지정은 리액트 개발자들이 따로 만들어둔 ChangeEvent와 같은 것들이 있다.
인풋을 객체로 받아서 인터페이스에서 ChangeEvent 일일히 다 안 달아도 돼서 마음이 편안해진다..
타입스크립트에서 타입들을 저장한 파일을 따로 만들어서 보관한 다음 import로 불러와 쓰는 것이 관심사 분리와 유지 보수 측면에서 좋을 것 같다.
ex) 파일명.types.ts
??? : 서버에서 받아온 데이터들 타입 interface로 전부 정리해놔~
🤪 : 응 아니야~ graphQL codegen 쓸 거야~
codegen과 현재 디렉토리를 연결하기 위해 codegen을 설치한 후 디렉토리 최상단에 codegen.yaml을 만들어준다.
.yaml 파일은 .json 파일과 같은 설정 파일인데, 차이점이라고 하면 부모 자식의 구분을 띄어쓰기 개수로 판단한다.
Utility Type?
외부에서 받아온 api의 타입을 걸러주는 작업을 도와주는 타입이다.
예시로 Pick이 있는데, Pick은 많은 타입들 중에 하나를 골라서 쓸 수 있게 해준다.
일단 any로 해놓고 나중에 바꿔야징~ 따윈 집어치우자!!!!!!!!!
추가 습득 지식
<input /> 태그에는 기본값을 설정해줄 수 있는 deafultValue라는 속성을 사용할 수 있다.
package.json은 설치 히스토리 -> node_modules
yarn add --dev 와 yarn add 차이
--dev는 devDependencies에 들어가고
그냥 add는 dependencies로 들어간다.
dev-dependencies 는 개발 & vscode 전용
build, start 에 적용 안됨.
배포용으로 할 땐 yarn install --production 은 devDep은 설치가 안되고 dep만 설치 -> 시간이 줄어듦.
.json 키워드 검색 resolutions
리액트 위에서 타입스크립트를 사용하려면 .tsx 이라는 확장자를 사용 해야한다.
포트폴리오 주제 정하기 ( 들어갈 기능 생각도 같이 )
한 컴포넌트에서 useQuery 두 번 쓰고 싶다 -> 구조분해 & 겹치는 변수명을 다시 {겹치는변수명: 바뀐변수명} 로 변경 가능
유니코드 상에서 대문자(영어)가 소문자 보다 작은 숫자를 가지고 있다.
console.log(String.fromCharCode(65); // A
console.log(String.fromCharCode(97); // a