제가 타입스크립트를 사용하면서 코딩을 하다보면 꼭 그냥 지나치는법이 없는 타입에러들이 있습니다. 고것은 바로 event, dom, useRef의 타입에러입니다. 이번 포스팅은 자주 사용되지는 않지만 꼭 발생했던 useRef 타입에러에 대해 공부해보고 에러없이 사용할 수 있도록 해보자. useRef가 무엇인지 모르시면 useRef 훅은 따로 공부하시는게 좋을 것 같습니다. 간단하게만 설명하자면 hook 중에 하나로, 지정한 초깃값을 객체의 .current 프로퍼티에 저장하는 것. DOM객체의 값을 직접 접근하거나, 변경할 때 사용한다. 주로 인풋 포커싱, 불필요한 리랜더링을 방지하기 위해 사용한다. 그럼 본론으로 넘어가서 useRef 타입에러 해결에 대해서 알아보자. useRef 에러 예시 코드 // Si..
나는 지금까지 나름 타입스크립트를 열심히 쓰고있었다 생각했었는데, 진짜 열심히만 쓰고 잘 쓰고있지는 않았나보다. 타입스크립트의 유틸리티 타입을 이제서야 알았으니.. 나는 타입스크립트를 사용해오면서 분~명히 이렇게 정의하는게 맞는건가 뭔가 미심쩍었지만, 그냥 에러만 안뜨면 된다 라고 생각하고 타입정의를 상당히 바보같이 하고 있었다. 하지만 이번에야말로 지저분한 타입정의 코드를 고쳐잡기 위해 유틸리티 타입을 알아보고 사용해보려고한다. 유틸리티 타입은 타입스크립트를 사용할 때 공통 타입 변환을 용이하게 하기 위해서 제공되는 타입이라고 타입스크립트 핸드북에서 설명하고 있다. 찾아보니 너무나 다양한 유틸리티 타입이 있었다. 근데 3개만 자주 사용한다고해서 3개만 포스팅할거임. 다른 유틸리티 타입은 차차 알아가보도..
열거형(Enum) 이넘은 특정 값들의 집합을 의미하는 자료형이다. 열거형은 숫자형 이넘, 문자형 이넘으로 나뉜다. 숫자형 이넘 enum Direction { Up = 1, Down, Left, Right, } console.log(Direction); // Up: 1, // Down: 2, // Left: 3, // Right: 4 열거형은 숫자형과 문자열형, 혹은 이 둘의 조합으로 정의될 수 있습니다. 디폴트 값으로 숫자형을 사용하며, 각 값은 자동으로 0부터 시작하여 1씩 증가합니다. 그러나 다음과 같이 수동으로 값을 지정할 수도 있습니다. 문자형 이넘 enum Direction { Up = "UP", Down = "DOWN", Left = "LEFT", Right = "RIGHT", } consol..
말로만 듣던 타입스크립트를 드디어 한다. 타입스크립트 쓰고싶어요. 타입스크립트는 시작부터 난관이였다. 코드들 쳐보면서 콘솔에 찍어보면서 해보고싶었는데, 그마저도 쉽게 허용해주지 않았다. 그냥 라이브러리 설치하는거 마냥 설치를 해버리면?? 보기좋게 실행이 안될 것이다. 그럼 어떻게 해야하냐?? 폴더를 새로 만든다. node.js패키지를 초기화시킨다. npm init 터미널에 해당 명령어를 입력하여 초기화시킴 @types/node 설치하기 npm i @types/node 터미널에 해당 명령어를 입력하여 Node.js 내장 기능들의 타입 정보를 담고있는 @types/node를 설치해준다. 설치하지 않으면 타입스크립트의 컴파일 과정에서 타입 검사가 실패하여 오류가 발생할 수 있다. 타입스크립트 컴파일러 설치하기..
