그럼에도 불구하고

오늘은 JSX에 대해 알아보겠습니다. [ JSX ] JSX는 내장형 XML 같은 구문입니다. 변환의 의미는 구현에 따라 다르지만 유효한 JavaScript로 변환되어야 합니다. JSX는 React로 큰 인기를 얻었지만, 이후 다른 구현도 등장했습니다. TypeScript는 임베딩, 타입 검사, JSX를 JavaScript로 직접 컴파일하는 것을 지원합니다. [ 기본 사용법 (Basic usage) ] JSX를 사용하려면 다음 두 가지 작업을 해야 합니다. 1. 파일 이름을. tsx 확장자로 지정합니다. 2. jsx 옵션을 활성화 합니다. TypeScript는 preserve, react 및 react-native라는 세 가지의 JSX 모드와 함께 제공됩니다. 이 모드들은 방출 단계에서만 영향을 미치며, ..

오늘은 유틸리티 타입에 대해 알아보겠습니다. [ 유틸리티 타입 ] TypeScript는 공통 타입 변환을 용이하게 하기 위해 몇 가지 유틸리티 타입을 제공합니다. 이런 유틸리티들은 전역으로 사용이 가능합니다. [ Partial ] T의 모든 프로퍼티를 선택적으로 만드는 타입을 구성합니다. 이 유틸리티는 주어진 타입의 모든 하위 타입 집합을 나타내는 타입을 반환합니다. HTML 삽입 미리보기할 수 없는 소스 [ Readonly ] T의 모든 프로퍼티를 읽기 전용(readonly)으로 설정한 타입을 구성합니다. 즉 생성된 타입의 프로퍼티는 재할당할 수 없습니다. HTML 삽입 미리보기할 수 없는 소스 이 유틸리티는 런타임에 실패할 할당 표현식을 나타낼 때 유용합니다. (예, frozen 객체의 프로퍼티에 재..

오늘은 데코레이터에 대해 알아보겠습니다. [ 데코레이터 (decorator) ] 데코레이터(Decorator)는 타입스크립트에서는 실험적으로 도입된 기능입니다. 타입스크립트의 데코레이터는 자바(Java)의 어노테이션이나 파이썬(Python)의 데코레이터와 유사한 기능을 합니다. 그러나 자바 어노테이션은 컴파일 타임에 영향을 받지만, 타입스크립트 데코레이터는 컴파일 타임에 영향을 받지 않기 때문에 오히려 파이썬(Python)의 데코레이터와 거의 비슷하다고 합니다. 데코레이터는 일종의 함수로 코드 조각을 장식해 주는 역할을 하며, 타입스크립트에서는 그 기능을 함수로 구현한 것입니다. 메서드, 클래스, 프로퍼티, 등 위에 @로 시작하는 데코레이터를 선언하여 장식하면 코드가 실행됐을 때, 데코레이터 함수가 실행..

오늘은 input 개수에 따른 useState 활용법에 대해 알아보겠습니다. 아래에는 다음과 같은 코드가 있습니다. 이 코드는 input에 사용자명과 메시지를 입력할 수 있는 text란이 2개 있고 확인 버튼을 누르면 alert 메서드로 내가 입력한 사용자명과 메시지를 알려줍니다. 📌 App.js HTML 삽입 미리보기할 수 없는 소스 📌 EventPractice2.js HTML 삽입 미리보기할 수 없는 소스 EventPractice2에는 인풋이 두 개 밖에 없기 때문에 이런 코드도 나쁘지는 않습니다. 하지만 인풋의 개수가 많아질 것 같으면 e. target.name을 활용하는 것이 더 좋을 수 있습니다. 예를 들어 HTML 삽입 미리보기할 수 없는 소스 위와 같이 객체 안에서 key를 [ ]로 감싸면 ..

오늘은 propTypes를 통한 props 검증에 대해 알아보겠습니다. [ propTypes를 통한 props 검증 ] 컴포넌트의 필수 props를 지정하거나 props의 타입(type)을 지정할 때는 propTypes를 사용합니다. 컴포넌트의 propTypes를 지정하는 방법은 defaultProp을 설정하는 것과 비슷합니다. 우선 propTypes를 사용하려면 코드 상단에 import 구문을 사용하여 불러와야 합니다. HTML 삽입 미리보기할 수 없는 소스 PropTypes를 불러왔다면 코드 하단에 다음과 같이 입력해 보세요. HTML 삽입 미리보기할 수 없는 소스 이렇게 설정해 주면 name 값은 무조건 문자열(string) 형태로 전달해야 된다는 것을 의미합니다. App 컴포넌트에서 name 값을..

[ 소스 맵 (Source Map) ] 소스 맵(Source Map)이란 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능입니다. 보통 서버에 배포를 할 때 성능 최적화를 위해 HTML, CSS, JS와 같은 웹 자원들을 압축합니다. 그런데 만약 압축하여 배포한 파일에서 에러가 난다면 어떻게 디버깅을 할 수 있을까요? 정답은 바로 소스 맵을 이용해 배포용 파일의 특정 부분이 원본 소스의 어떤 부분인지 확인하는 것입니다. 이러한 편의성을 제공하는 것이 소스 맵입니다. [ 소스 맵 설정하기 ] 웹팩에서 소스 맵을 설정하는 방법은 아래와 같습니다. HTML 삽입 미리보기할 수 없는 소스 devtool 속성을 추가하고 소스 맵 설정 옵션 중 하나를 선택해 지정해주면 됩니다.

오늘은 Webpack Dev Server에 대해 알아보겠습니다. [ Webpack Dev Server ] 웹팩 데브 서버는 웹 애플리케이션을 개발하는 과정에서 유용하게 쓰이는 도구입니다. 웹팩의 빌드 대상 파일이 변경 되었을 때 매번 웹팩 명령어를 실행하지 않아도 코드만 변경하고 저장하면 웹팩으로 빌드한 후 브라우저를 새로고침 해줍니다. 매번 명령어를 치는 시간과 브라우저를 새로 고침하는 시간 뿐만 아니라 웹팩 빌드 시간 또한 줄여주기 때문에 웹팩 기반의 웹 애플리케이션 개발에 필수로 사용됩니다. [ Webpack Dev Server의 특징 ] 웹팩 데브 서버는 일반 웹팩 빌드와 다른점이 있습니다. 먼저 명령어를 보겠습니다. HTML 삽입 미리보기할 수 없는 소스 웹팩 데브 서버를 실행하여 웹팩 빌드를 ..

오늘은 제네릭 타입에 대해 알아보겠습니다. [ 제네릭의 Hello World (Hello World of Generics) ] 먼저 제네릭의 "hello world"인 identity 함수를 해봅시다. identity 함수는 인수로 무엇이 오던 그대로 반환하는 함수입니다. echo 명령과 비슷하게 생각할 수 있습니다. 제네릭이 없다면, identity 함수에 특정 타입을 주어야 합니다: function identity(arg: number): number { return arg; } 또는 any 타입을 사용하여 identity 함수를 기술할 수 있습니다: function identity(arg: any): any { return arg; } any를 쓰는 것은 함수의 arg가 어떤 타입이든 받을 수 있다..

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

오늘은 유니온 타입에 대해 알아보겠습니다. [ 유니온 타입 (Union Types) ] 가끔, number나 string을 매개변수로 기대하는 라이브러리를 사용할 때가 있습니다. 예를 들어, 다음과 같은 함수를 사용할 때입니다. HTML 삽입 미리보기할 수 없는 소스 위 예제에서 padLeft의 문제는 매개변수 padding이 any 타입으로 되어있다는 것입니다. 즉, number나 string 둘 다 아닌 인수로 함수를 호출할 수 있다는 것이고, TypeScript는 이를 무리 없이 받아들입니다. HTML 삽입 미리보기할 수 없는 소스 전통적인 객체지향 코드에서, 타입의 계층을 생성하여 두 타입을 추상화할 수 있습니다. 이는 더 명시적일 수는 있지만, 조금 과하다고 할 수도 있습니다. 기존 방법의 pa..

Webpack에 대해 알아보겠습니다. [ Webpack ] Webpack이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)입니다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원 (HTML, CSS, JavaScript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미합니다. 그럼 모듈과 모듈 번들링에 대해서 조금 더 살펴보겠습니다. [ 모듈이란? ] 모듈이란 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미합니다. 자바스크립트로 치면 아래와 같은 코드가 모듈입니다. // math.js function sum(a, b) { return a + b; } function substract(a, b) {..

dependencies와 devDependencies의 차이에 대해 알아보겠습니다. [ 배포용 라이브러리 ] dependencies에 설치되어 있는 라이브러리의 경우 배포용 라이브러리입니다. 아래의 사진은 예시입니다. 이렇게 설치된 배포용 라이브러리는 npm run build로 빌드를 하면 최종 애플리케이션 코드 안에 포함됩니다. 📌 npm i "내가 설치할 라이브러리" [ 개발용 라이브러리 ] devDependencies에 설치되어 있는 라이브러리의 경우 개발용 라이브러리 입니다. 📌 npm i "내가 설치할 라이브러리" -D 설치 옵션에 -D를 주었다면 해당 라이브러리는 빌드하고 배포할 때 애플리케이션 코드에서 빠지게 됩니다. 따라서, 최종 애플리케이션에 포함되어야 하는 라이브러리는 -D로 설치하면 ..