그럼에도 불구하고

자바스크립트 내에서 유효성 검사를 할 때 흔히 타입 검사를 하고는 합니다. 타입 검사에 대해 알아보겠습니다. HTML 삽입 미리보기할 수 없는 소스 위의 결과 값, 모두 납득이 가시나요? [ PREMITIVE vs REFERENCE ] PREMITIVE value의 경우 typeof로 잘 구분할 수 있지만 REFERENCE value의 경우는 typeof로 구분하기가 어렵습니다. 자바스크립트는 동적으로 변하는 언어이기 때문에 타입도 동적입니다. 이로 인해 동적인 타입까지 검사하기가 어려워서 주의를 해야 합니다. 따라서 REFERENCE value를 검사할 때는 typeof 보다는 instanceof를 사용하는 것이 객체를 확인하는 데 있어 더 용이합니다. 하지만 instanceof도 완벽하게 검사를 해내..

CleanCode를 작성하기 위한 과정 중 변수에 대해 알아보겠습니다. 목차 [ var를 지양하자 ] 📌 var : 함수 단위 스코프 📌 let & const : 블록 단위 스코프 let과 const의 경우 블록 단위 스코프와 + TDZ (Temperal Dead Zone)으로 안전한 코드 작성이 가능합니다. https://despiteallthat.tistory.com/46 [JavaScript] 변수 선언 / 변수 호이스팅 / 값의 할당 오늘은 변수 선언 / 변수 호이스팅 / 값의 할당에 대해 알아보자 [ 변수 선언 ] 변수 선언(variable declaration)이란 변수를 생성하는 것을 말한다. 좀 더 자세히 말하면 값을 저장하기 위한 메모리 공 despiteallthat.tistory.com..

오늘은 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 삽입 미리보기할 수 없는 소스 웹팩 데브 서버를 실행하여 웹팩 빌드를 ..

오늘은 웹팩의 4가지 주요 속성에 대해 알아보겠습니다. 1. Entry 2. Output 3. Loader 4. Plugin [ Entry ] entry 속성은 웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점이자 자바스크립트 파일 경로입니다. HTML 삽입 미리보기할 수 없는 소스 위 코드는 웹팩을 실행했을 때 src 폴더 밑의 index.js를 대상으로 웹팩이 빌드를 수행하는 코드입니다. [ Entry 파일에 어떤 것이 들어가야 하는가 ] entry 속성에 지정된 파일에는 웹 애플리케이션의 전반적인 구조와 내용이 담겨 있어야 합니다. 웹팩이 해당 파일을 가지고 웹 애플리케이션에서 사용되는 모듈들의 연관 관계를 이해하고 분석하기 때문에 애플리케이션을 동작시킬 수 있는 내용들이 담겨 있어야 합니다. ..

오늘은 제네릭 타입에 대해 알아보겠습니다. [ 제네릭의 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 형태의 새로운 객체를 만들고, 생성자를 실행해 초기..