그럼에도 불구하고

PropTypes를 이용하여 리액트 컴포넌트의 유효성을 검증하는 방법에 대해 알아보겠습니다. 목차 [ 속성의 유효성 검증 방법 ] 리액트 컴포넌트의 유효성을 검증하는 방법은 여러 가지가 있습니다만 타입스크립트를 사용한다면 타입스크립트의 정적 타입 지원 기능을 이용할 수 있습니다. 이 방법은 컴파일(빌드) 시에 타입을 검사하며, IDE를 통해서 코드 자동완성 기능을 지원받을 수 있습니다. 또 다른 유효성 검증 기능으로는 PropTypes가 있습니다. PropTypes는 리액트가 지원하는 기능이며, 컴파일할 때가 아닌 실행 중에 속성에 대한 유효성 검증을 수행합니다. 따라서 속성으로 전달하는 값과 타입에 따라 경고를 발생시킵니다. 일반적으로는 타입스크립트의 정적 타입을 이용한 유효성 검증만으로도 충분하지만,..

TypeScript의 Classes에 대하여 알아보겠습니다. [ 클래스 (Classes) ] 간단한 클래스-기반 예제를 살펴보겠습니다. HTML 삽입 미리보기할 수 없는 소스 C#이나 Java를 사용해 봤다면, 익숙한 구문일 것입니다. 새로운 클래스 Greeter를 선언했습니다. 이 클래스는 3개의 멤버를 가지고 있습니다: greeting 프로퍼티, 생성자 그리고 greet 메서드 입니다. 클래스 안에서 클래스의 멤버를 참조할 때 this.를 앞에 덧붙이는 것을 알 수 있습니다. 이것은 멤버에 접근하는 것을 의미합니다. 마지막 줄에서, new를 사용하여 Greeter클래스의 인스턴스를 생성합니다. 이 코드는 이전에 정의한 생성자를 호출하여 Greeter 형태의 새로운 객체를 만들고, 생성자를 실행해 초기..

오늘은 리터럴 타입에 대해 알아보겠습니다. [ 리터럴 타입 좁히기 (Literal Narrowing) ] var 또는 let으로 변수를 선언할 경우 이 변수의 값이 변경될 가능성이 있음을 컴파일러에게 알립니다. 반면, const로 변수를 선언하게 되면 TypeScript에게 이 객체는 절대 변경되지 않음을 알립니다. HTML 삽입 미리보기할 수 없는 소스 무한한 수의 잠재적 케이스들 (문자열 값은 경우의 수가 무한대)을 유한한 수의 잠재적 케이스 (helloWorld의 경우: 1개)로 줄여나가는 것을 타입 좁히기 (narrowing)라 합니다. [ 문자열 리터럴 타입 (String Literal Types) ] 실제로 문자열 리터럴 타입은 유니언 타입, 타입 가드 그리고 타입 별칭과 잘 결합됩니다. 이런..

오늘은 TypeScript로 Google Maps API 사용해 보겠습니다. 기능적인 측면에 목적을 두었기 때문에 외적인 모습은 딱히 꾸미지 않았습니다 :) 📌 index.html HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 발급받은 API KEY를 채워주시면 됩니다. https://developers.google.com/maps?hl=ko Google Maps Platform | Google Developers Google Maps Platform 설명 developers.google.com 📌 app.ts HTML 삽입 미리보기할 수 없는 소스

TypeScript의 기본 타입에 대해 알아보겠습니다. [ 타입스크립트 기본 타입 ] 타입스크립트로 변수나 함수와 같은 자바스크립트 코드에 타입을 정의할 수 있습니다. 타입스크립트의 기본 타입에는 크게 다음과 같이 12가지가 있습니다. Boolean Number String Object Array Tuple Enum Any Void Null Undefined Never 📌 String 자바스크립트 변수의 타입이 문자열인 경우 아래와 같이 선언해서 사용합니다. HTML 삽입 미리보기할 수 없는 소스 💡 Tip 위와 같이 : 를 이용하여 자바스크립트 코드에 타입을 정의하는 방식을 타입 표기 (Type Annotation)이라고 합니다. 📌 Number 타입이 숫자이면 아래와 같이 선언합니다. HTML 삽입 ..