일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- @test
- 컨테이너
- Ubunt
- Dependency Injection
- unix
- XML
- Spring JDBC
- @Spring-Test
- Spring Boot
- java spring
- POJO
- myBatis
- 프로퍼티
- Framework
- Linux
- JDBC TEMPLATE
- spring aop
- AOP
- SpringJDBC
- @JUnit
- pointcut
- STS
- java
- JdbcTemplate
- spring framework
- Di
- 리눅스
- 마이바티스
- spring
- @AspectJ
- Today
- Total
목록TypeScript (14)
개키우는개발자 : )
광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ' | 타입 스크립트 인덱스 타입 타입을 동적으로 사용할 때 사용하는 방법중 하나인 index type Props 인터페이스에 string 타입의 key 의 타입은 string 입니다. index type은 [ key : string | number ] 둘중 하나의 타입만 가능하며 만약 index type이 아닌 name 처럼 고정된 데이터를 적용 할 경우 name은 반드시 필요하고 key type의 key는 문자,숫자 가 사용 가능하며 데이터는 string type인 값만 저장 가능 합니다. 할당된 index type 은 접근방식이 동적 인것을 확인 할 수 있습니다. p.abc는 실제 없는 key 지만 접근하여도 에러는 발생하지 않습니다. keyof ..
광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ' | 타입 스크립트 타입 별칭 타입에 직접 이름을 부여할 수 있습니다. intersection type으로 User와 Action을 UserAction이라는 별칭을 type키워드를 사용하여 만들 수 있습니다. interface User { name : string; } interface Action{ do() : void; } type UserAction = User & Action; function createUserAction() : UserAction{ return { do() {}, name : '' } } union type 도 별칭으로 부여 가능하며 generic type 또한 별칭이 가능하다 type StringOrNumber = stri..
광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ' | 타입 스크립트 인터섹션 & 유니온 | Intersection type 여러타입을 합쳐서 사용하는 타입 User,Action 타입을 합쳐서 반환하는 함수가 있을 때 두개의 타입을 & 통해 타입을 선언 할 수 있습니다. interface User{ name : string; } interface Action{ do() : void; } function createUserAction(u: User, a: Action) : User & Action{ return {...u,...a}; } const u = createUserAction({ name : 'dog' }, {do(){} }); u.do(); u.name; | Union type 변수 또는 함..
광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ' | 타입 스크립트 제네릭 함수에 generic 타입을 적용 가능 createPromise 함수에 어떠한 타입이 올 지 모를 때 를 사용하여 타입을 지정합니다. 타입의 이름은 자유롭게 작성 가능하며 관례상 대문자로 작성합니다. function createPromise(x: T, timeout:number){ return new Promise((resolve: (v : T) => void ,reject)=>{ setTimeout(() =>{ resolve(x); },timeout) }) } createPromise("eh",100) .then(v=> console.log(v)) createPromise(1,100) .then(v=> console.log..
광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ' | 타입 스크립트 클래스 interface의 상속 및 abstract(추상화) class Person 은 이름이 있고 말을 할 수 있습니다. Programmer는 코드를 작성할 수 있습니다. 클래스에는 상속을 받을 수 있는데 class에서 class를 상속받을 땐 extends를 사용하고 interface를 상속받을 땐 implements 키워드를 사용하여 상속받습니다. interface의 키워드는 다중 상속이 가능합니다. 하지만 클랜은 하나의 클래스만 상속이 가능합니다. KoreanProgrammer는 Person, Programmer 인터페이스를 상속받아 interface에 선언된 property와 method를 모두 구현하고 추가로 구현된 ki..
광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ' | 타입 스크립트 클래스 es6의 추가된 class를 new 연산자를 통해 객체로 인스터스화 가능하다. class Cart{ constructor(user){ this.user = user; this.store = {}; } put(id,product){ this.store[id] = product; } get(id){ return this.store[id]; } } TypeScript의 작성방식 User, Product 인스턴스를 선언합니다. 그리고 Cart class 블록 안에 user, store 속성을 정의할 수 있습니다. 그리고 각 파라미터 값에 타입을 작성합니다. interface User{ name : string; } interface..
광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ' | 타입 스크립트 enum 타입 enum 타입의 등급 데이터 를 선언한다. 그리고 switch 문을 사용하여 등급별 할인률을 반환하게 되는데 WELCOME, GREEN, GOLD 의 값이 무엇인지 알 수 없다. 그래서 콘솔에 값이 어떻게 찍히는지 컴파일 후 js파일을 실행해본다. enum StarbuksGrade{ WELCOME, GREEN, GOLD } function getDiscount(v: StarbuksGrade) : number{ switch(v){ case StarbuksGrade.WELCOME: return 0; case StarbuksGrade.GREEN: return 5; case StarbuksGrade.GOLD: return 1..
광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ' | 타입 스크립트 함수형 타입 타입스크립트에서 함수의 파라미터 값에는 타입을 지정해 주어야 합니다. 더하기 함수인 add의 x , y는 숫자이므로 타입스크립트에서 result는 number 타입으로 추론을 합니다. function add (x: number, y: number){ return x + y; } const result = add(1,2); 아니면 반환되는 값을 함수에 타입을 지정할 수 있습니다. function add (x: number, y: number): number{ return x + y; } const result = add(1,2); optional 처리는 값이 있을 수도 있고 없을 수도 있다. 속성 뒤에 ? 를 붙여주면 된..
광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ' | 타입 스크립트 인터페이스 인터페이스는 추상화의 작업이라고 생각한다. 추상화란? 컴퓨터 과학에서 추상화(abstraction)는 복잡한 자료, 모듈, 시스템 등으로부터 핵심적인 개념 또는 기능을 간추려 내는 것을 말한다. interface 에는 어떠한 행위(기능)를 하는 메서드를 선언하는 영역이다. 그중 interface TV는 화면을 켜고, 끄는 기능의 선언 부만 작성을 한다. 그리고 그 선언한 메서드의 return 타입 또한 지정해야 한다. 선언한 interface TV를 myTv의 타입으로 선언하고 myTv 객체에는 turnOn , turnOff 메서드를 구현해야 합니다. turnOn 같은 경우는 return type 이 boolean이기 때..
광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ' | 타입 스크립트 기본 타입 최신 ECMAScript 표준은 다음과 같은 7개의 자료형을 정의한다. let numValue : number; let stringValue : string; let boolenValue : boolean; let undefinedValue : undefined; let nullValue : null; let objValue : object; let symbolValue : symbol; let anyValue : any; 기본 자료형(Primitive) 타입 Number String Boolean Undefined Null Symbol (ECMAScript 6에 추가됨) 객체형 타입 object가 있습니다. 타입을 선언..
광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ' | 타입 스크립트 변수 선언 variables.ts 파일 만들기 기본적으로 ts 파일은 js 파일과 마찬가지로 var, let, const 변수 선언이 가능합니다. var score1 = 0; let score2 = 200; const defaultScore = 0; 하지만 기존의 var와 es6이상의 let은 큰 차이가 있는데 두 개의 큰 차이는 scope단위입니다. var 변수들은 함수 단위로 접근이 가능합니다. function outer(){ function inner(){ var score = 10; } console.log(score); } inner 함수의 선언된 변수는 외부 함수에서 사용할 수 없습니다. 당연하죠 뭐,..ㅋ outer에 ..
광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ' | 타입 스크립트 컴파일러 설정 파일 기존의 커맨드 창에서 옵션을 직접 넣어 컴파일하는 방식이 아닌 설정파일을 작성하여 컴파일 하는 방법입니다. 설정 파일은 프로젝트의 최상단에 항상 만들어줍니다. 최상단 폴더에 tsconfig.json을 만들어 줍니다. tsconfig.json파일에 작성합니다. include : 컴파일할 파일 경로를 설정합니다. [ src폴더 하위의 모든 .ts 확장자를 가진 파일 ] exclude : 컴파일 대상을 제외하는 옵션 compilerOptions : 실제 컴파일 할 경우 적용되는 옵션들 module : 어떤 모듈 방식으로 컴파일할지 설정 rootDir : 시작하는 루트 폴더 outDir : 컴파일 후 생성되는 js파일이..
광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ' | 타입스크립트 컴파일러 비주얼 스튜디오 코드를 실행하여 프로젝트를 오픈 후 터미널을 엽니다. 그 후 Node.js를 이용하여 npm install -g typescript 컴파일러를 설치합니다. 터미널에 tsc 옵션 보기 hello.ts 파일에 작성 후 tsc hello.ts 컴파일 하기 var hello = "hello"; let hello2 = "hello2"; es6 이상의 변수 선언인 let이 구형 브라우저에서 사용할 수 있게 var로 변환됩니다. 하지만 최신 브라우저에서만 사용할 목적이라면 target이란 키워드를 사용하여 컴파일합니다. es6이상의 변수 선언인 let으로 컴파일됩니다. es6이상부터 나온 타입인 Promise 객체를 작성..
광고 클릭은 개발자(저) 에게 큰 힘이 됩니다!!'ㅁ' | 타입 스크립트 개요 오픈소스 프로그래밍 언어 자바스크립트의 상위 집합으로 ECMA스크립트의 최신 표준을 지원 정적인 언어로 컴파일 시간에 타입을 검사 장점 강력한 타입으로 대규모 애플리케이션 개발에 용이 유명한 자바스크립트 라이브러리와의 편리한 사용 개발 도구에서의 강력한 지원 | 개발환경 구성 (Windiws 10) Node.js 설치 ( https://nodejs.org/ko/ ) 비주얼 스튜디오 코드 설치 ( https://code.visualstudio.com/download ) 프로젝트 생성 비주얼 스튜디오 코드까지 설치 완료하셨다면 원하는 폴더를 생성하여 상단 메뉴바에 Terminal -> New Terminal -> mkdir typ..