JavaScript & TypeScript
[node.js] express-validator param error
express-validator로 유효성 검사를 할 수 있는데 param의 경우, 경로가 어떻게 되어 있느냐에 따라 검사를 하는 경우가 있고 그렇지 않은 경우가 있습니다. 아래의 코드를 예시로 들면 /route/:id 의 경로를 사용할 경우 string으로 타입이 결정되고 /:id 의 경우 number로 타입이 결정됩니다. 그러므로 전자 경우에서는 유효성검사가 제대로 되지 않고, 후자는 유효성 검사가 제대로 동작이 됩니다. const express = require('express') const { param } = require('express-validator') const app = express() // Not sanitizing correctly app.use('/route/:id', [ par..
[TS] Decorators
데코레이터는 아직 확정적으로 사용할 수 없는 기능이기 때문에 변경사항이 일어나면 코드를 수 없이 변경해야 하기 때문에 깊게 사용하지 않는 것이 좋습니다. 데코레이터는 향후 릴리스에서 변경될 수 있는 실험적 기능입니다. 공식문서에서도 명확히 구현되지 않아 문제점에 대해 이야기 하고 있습니다. 그럼에도 불구하고 많은 곳에서 사용하고 있습니다. (내용은 공식문서에 있는 내용입니다.) Decorators 기능 활성화 Decorators를 활성화하려면 tsconfig.json에서 experimentDecorators compiler options를 true로 설정해야 합니다. { "compilerOptions": { "target": "ES5", "experimentalDecorators": true } } De..
[TS] Compile (option)
타입스크립트를 자바스크립트로 변환하는 과정에서의 옵션을 줄 수 있는 것으로 공식문서나 검색을 하여 어떠한 것이 있는지 어떻게 쓰는지 확인 할 수 있습니다. 1. tsconfig 프로젝트를 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정합니다. { "compilerOptions": { /* Basic Options */ "target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능 "module": "commonjs", //무슨 import 문법 쓸건지 'commonjs', 'amd', 'es2015', 'esnext' "allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지 "c..
[TS] utility type
1. 타입의 기본 변경 타입스크립트에서 타입을 고정하지 않고, 타입을 변환하거나 일부 변환이 가능합니다. Index type 인덱스 타입은 속성이 정해져 있지 않고 동적으로 처리해야 할 경우 사용합니다. 흔히 자바스크립트 객체에서 배우는 내용으로 아래와 같이 접근을 할 수 있습니다. const lol = { cham: 'nunu', }; obj.name; // nunu obj['name']; // nunu 하지만 타입스크립트에서는 세밀하게 type을 이용하여 정의할 수 있습니다. 캐릭터 타입의 name을 이용하고 선언하여 이름을 설정하거나, 캐릭터의 스킬 값 q,r을 정의할 수도 있습니다. 즉, 타입의 선언한 내용을 필요한 것만 사용이 가능한 것입니다. type character = { name: str..
[TS] type alias, interface 차이
type alias, interface는 쉽게 말해서 어떤 오브젝트에 대한 정의를 할 때 주로 선언을 하게 됩니다. type alias, interface 으로 선언을 하면 공통적으로 object에 정의를 하고 타입을 할당이 가능하고 class에서도 implements를 통해 구현이 가능하고 extends 상속을 통해서 확장도 가능합니다. 차이점으로는 interface는 오브젝트와 오브젝트간의 약속사항으로 상호작용을 도와줍니다. 그렇기 때문에 동일한 규격으로 어떤 것을 구현할 때 interface를 사용하는게 좋습니다. interface Person { makeEmail(age: number): Email; } interface Person { makePhone(age: number): Phone; } ..
[JS] ProtoType
JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불립니다. 프로토 타입은 원래의 형태 또는 전형적인 예, 기초 또는 표준으로 무언가 제품을 만드는 과정에서 시험용으로 미리 만들어보는 물건을 의미합니다. 자바스크립트에서는 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미입니다. (상속) 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지입니다. 이를 프로토타입 체인(prototype chain)이라 부르며 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간입니다. 정확히 말하자면 상속되..
[TS] 제네릭(Generics)
클래스 또는 함수에서 사용할 타입(Type)을, 그 클래스나 함수를 사용할 때 결정하는 것으로, 타입에 유연성을 제공하여 컴포넌트 등에서 재사용을 가능하게 해주는 타입입니다. 즉, 어떠한 타입이든 받으면서 받은 해당 타입을 그대로 리턴하게 하는 것 입니다. 제네릭 타입은 다양한 타입을 받을 수 있다는 유연성이란 점에서 타입의 정보가 동적으로 결정됩니다. 클래스 상속을 사용하면 별도의 자료 타입을 받고자 하는 클래스를 추가해야 하고 중복되는 코드를 양산하기에 불편합니다. 바로 이런 경우에 유용하게 사용할 수 있는 것이 제네릭 입니다. 함수 function checkNull(arg: T | null): T { if (arg == null) { throw new Error() } return arg; } fu..
[TS] OOP
Class 타입스크립트에서는 타입을 기본적으로 설정을 해주어야 하는데, OOP를 만족하면서 코드를 작성해 주기 위해서는 결과물에 대한 타입을 먼저 설정해 주어야 합니다. type Smartphone = { color: string; brand: apple; }; 1. Encapsulation(캡슐화) 연관있는 데이터들을 하나의 오브젝트 안에 모아 두는 것이 캡슐화라고 합니다. 그리고 외부에서 보일 필요 없는 내부 데이터를 숨기기도 합니다. 그러므로 내부에 상태를 변경하지 않고 어떤 외부의 데이터가 들어오느냐에 따라 상태가 변하도록 만듭니다. static class 안에서 함수나 변수 앞에 static을 사용하면 class 레벨로 설정이 되며, 쉽게 말해서 만들고 있는 클래스에 고정된 데이터가 되는 것입니..
[TS] Type
타입스크립트에서 타입을 설정하는 방법은 다양합니다. 기본적인 부분만 정리해보려 합니다. 참고 할만한 핸드북 링크 - https://joshua1988.github.io/ts/ 1. 기본 타입 자바스크립드와 다르게 타입스크립트는 변수, 함수를 선언할 때, 타입을 꼭 설정해 주어야 합니다. 1. number const num: number = 3; 2. string const str: string = 'Hello World'; 3. boolean const bool: boolean = false; 4. void function World(): void { console.log('hello world'); return; } 함수가 어떠한 것도 리턴하지 않을 때 사용합니다. (생략 가능) 5. never fun..
![[TS] Type Script](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbKCIGb%2FbtrvglsWbjP%2F97gsngPtQIniTQqsKKijk0%2Fimg.png)
[TS] Type Script
타입스크립트는 2012년도에 마이크로소프트 회사에서 만든 언어 입니다. 자바스크립트는 어떠한 변수에 타입을 지정해주지 않아도 되지만, 타입스크립트에서는 어떠한 타입이 들어가야 하는지 정적으로 설정해 주어야 합니다. (자바스크립트는 Dynamically typed, 타입스크립트는 Statically typed) 자바스크립트를 사용하다가 타입스크립트를 사용한다면 타입이라는 부분에 불편한 언어라고 생각 할 수 있지만, 자바스크립트는 가독성이 떨어집니다.(어떤 변수와 함수를 쓰는지 유추하기 어려움) 그리고 사용자가 사용하면서 에러가 발생하여 죽는 경우가 빈번해지는데, 타입스크립트는 코딩을 하면서 실시간으로 에러를 확인 할 수 가 있습니다. 뿐만 아니라 강력한 객체지향 프로그래밍(OOP)을 할 수 가 있습니다. ..