타입 넓히기 let num = 1; 위와 같이 숫자 1이 할당된 변수 num이 있다고 하자. 타입스크립트에서는 변수를 선언할 때 항상 변수 이름 옆에 타입을 쓴다고 했었다. 하지만, 모든 변수에 타입을 일일이 적는 것도 힘들고 번거로울 수 있기 때문에 타입스크립트는 변수의 초깃값을 기준으로 타입을 자동적으로 추론하는 기능을 제공해 준다. 그렇다면 자동으로 타입이 추론된 변수 num의 타입은 무엇일까? 바로 number 타입이다. 하지만, 일부는 이런 생각을 할 수도 있다. "숫자 1을 넣었으니까 숫자 타입이 아닌 숫자 리터럴 타입으로 추론되는 게 맞지 않나?" 물론, 이 말도 맞지만 타입스크립트의 타입 추론은 기본적으로 타입 넓히기에 입각하여 추론된다. 타입 넓히기란 타입을 추론할 때 좁은 타입(ex. ..

타입의 호환성 타입스크립트의 타입들은 각자 타입마다 호환되는 타입이 있고 호환되지 않는 타입이 존재한다. 이전 글에서 unknown 타입에 대해 설명할 때, 값으로서는 사용하지 못하는 타입이라고 했었다. (unknown 타입에 number 타입은 들어가지만, number 타입에 unknown 타입은 들어가지 못한다.) 이게 바로 타입의 호환성이며, 타입마다 어떤 타입은 값으로 사용이 가능하지만 어떤 타입은 불가능한 걸 뜻한다. 타입에는 슈퍼 타입과 서브 타입이 있다. (슈퍼 타입은 부모 타입, 서브 타입은 자식 타입이라고 봐도 무방하다.) 슈퍼 타입은 서브 타입을 반환할 수 있지만, 서브 타입은 슈퍼 타입을 반환하지 못한다. 예를 들어, void 타입과 undefined 타입을 놓고 비교했을 때 void..

원시 타입 원시 타입이란 숫자, 문자열, boolean, null, undefined 등 동시에 한 개의 값만 저장할 수 있는 타입들을 말한다. 배열과 객체를 제외한 거의 대다수의 타입들을 원시 타입이라고 할 수 있다. Number(숫자) 타입 let num1: number = 1; let num2: number = Infinity; let num3: number = NaN; num1 = 'str'; // Error! num1.toUpperCase(); // Error! 숫자 타입에는 말 그대로 숫자 그리고 무한대(Infinity), NaN까지 값으로 들어간다. 처음에 변수를 선언할 때 타입까지 지정하기 때문에 해당하는 타입에 맞는 값으로만 재할당이 가능하다. 위의 예시를 보면, 숫자 타입인 num1 변..

타입스크립트란? 요즘 신입 프론트엔드 개발자 채용 공고를 보면, 우대사항 혹은 기본 자격사항으로 까지 타입스크립트를 할 줄 아는 사람을 뽑는 기업들이 많아지고 있다. 도대체 타입스크립트란 무엇이며, 현재 개발자들에게 인기가 많은 이유는 무엇일까? (자바스크립트를 공부한 사람들은 알 것이다. 자바스크립트가 얼마나 지X맞은 언어인지..) Node.js의 등장으로 자바스크립트 언어를 다양한 플랫폼에서 사용할 수 있게 되었으며, 이로 인해 자바스크립트의 사용 범위가 확대되었지만, 동시에 자바스크립트의 한계점도 함께 부각되었다. 애플리케이션의 안정성을 고려할 때, 자바스크립트는 어느 정도 엄격성이 필요하게 되었고, 이러한 요구들에 의해 여러 가지 대안을 갖추게 되는데 이것이 바로 오늘날 타입스크립트가 되었다. 즉..

useRef()란? useRef()는 리액트의 Hooks 중 하나로, 함수 컴포넌트 내에서 변수를 유지하고 싶을 때 사용한다. 또한, DOM 요소에 접근하기 위해 참조를 생성하기도 한다. 예를 들어, 특정 DOM 요소의 크기나 위치를 가져오거나 스크롤 바 위치를 가져와야 할 때, 엘리먼트에 포커스를 설정해줘야 할 때 등의 작업을 수행할 때 많이 사용한다. useRef()를 호출하면 반환되는 객체는 current라는 속성을 가지고 있는데, 이 속성을 통해서 변수를 유지할 수 있다. current 속성의 값은 첫 번째 렌더링 이후에도 유지되며, 이 값을 변경해도 컴포넌트가 리렌더링 되지 않는다. (DOM을 선택하든 변수를 담든 무조건 current 속성을 가져와야 한다. useRef는 current와 한 몸..