타입스크립트19 예시코드와 함께 알아보는 타입스크립트 디자인패턴: 팩토리 패턴 소개 디자인 패턴은 소프트웨어 개발에서 자주 발생하는 문제를 해결하기 위한 일련의 해결책입니다. 이러한 패턴은 개발자들 사이에서 공통된 언어와 구조를 제공하여 코드의 가독성과 유지보수성을 향상시킵니다. 타입스크립트는 자바스크립트의 상위 집합으로, 정적 타입을 지원하여 개발자들이 코드를 더욱 안정적으로 작성할 수 있게 도와줍니다. 이번 블로그 포스트에서는 타입스크립트에서 자주 사용되는 디자인 패턴 중 하나인 팩토리 패턴에 대해 알아보겠습니다. 본문 1. 팩토리 패턴이란? 팩토리 패턴은 객체를 생성하는 인터페이스를 정의하고, 이를 서브 클래스가 결정하게 하는 패턴입니다. 이 패턴은 객체의 생성과정을 캡슐화하여 클라이언트 코드와의 결합도를 낮추고, 유연성과 확장성을 높이는데 도움을 줍니다. 팩토리 패턴은 다음.. 2023. 6. 22. 타입스크립트 정리하기 6. 함수 본 글의 모든 내용은 https://goalkicker.com/ 에서 다운로드한 TypeScript Notes For Professionals 를 번역한 내용입니다. 본 글의 목적은 본인의 학습 및 참고자료로 사용하기 위함입니다. 6. 함수 6-1. 기본 파라미터와 옵션 파라미터 옵션 파라미터 타입스크립트에서는 모든 파라미터가 사용되어야한다. 파라미터 이름 끝에 ?를 추가하면 해당 파라미터를 옵션 파라미터로 설정할 수 있다. 단, 첫 번째 파라미터는 항상 반드시 사용되어야 하는 파라미터이며, 옵션 파라미터로 설정할 수 없다. function buildName(firstName:string, lastName?:string){ //.... } function buildNameInvalid(firstName?.. 2020. 4. 19. 타입스크립트 정리하기 5. Enum 본 글의 모든 내용은 https://goalkicker.com/ 에서 다운로드한 TypeScript Notes For Professionals 를 번역한 내용입니다. 본 글의 목적은 본인의 학습 및 참고자료로 사용하기 위함입니다. 5. Enum 5-1. 특정한 값을 가진 Enum enum의 기본값은 각 요소가 풀어질 때 숫자 값이 할당된다. enum MimeType { JPEG, PNG, PDF } MimeType의 PDF를 사용하게 되면, 값은 2가 된다. 이 때, 각 요소에 값을 할당할 수 있다. enum MimeType { JPEG = 'image/jpeg', PNG = 'image/png', PDF = 'application/pdf' } 이제 MimeType의 PDF를 사용하게 되면, 값은 'ap.. 2020. 4. 19. 타입스크립트 정리하기 4. 배열 본 글의 모든 내용은 https://goalkicker.com/ 에서 다운로드한 TypeScript Notes For Professionals 를 번역한 내용입니다. 본 글의 목적은 본인의 학습 및 참고자료로 사용하기 위함입니다. 4. 배열 4-1. 배열에서 Object 찾기 - find() 사용 const inventory = [ {name: 'apples', quantity: 2}, {name: 'bananas', quantity: 0}, {name: 'cherries', quantity: 6} ] function findCherries(fruit) { return fruit.name === 'cherries'; } inventory.find(findCherries); // {name: 'cherri.. 2020. 4. 19. 타입스크립트 정리하기 3. 타입스크립트의 주요타입 본 글의 모든 내용은 https://goalkicker.com/ 에서 다운로드한 TypeScript Notes For Professionals 를 번역한 내용입니다. 본 글의 목적은 본인의 학습 및 참고자료로 사용하기 위함입니다. 3. 타입스크립트의 주요 타입 3-1. String Literal Types String Literal Types는 문자열이 가질 수 있는 특정 값을 한정할 수 있다. let myFavoritePet: "dog"; myFavoritePet = "dog"; // OK myFavoriyePet = "rock"; // Error: Type '"rock"' is not assignable to type '"dog"'. 타입의 이름을 주어 enum과 같은 역할을 할 수 있다. type .. 2020. 4. 13. Type Script 정리 - 2. 타입스크립트를 언제 또 왜 사용해야 하는가? 본 글의 모든 내용은 https://goalkicker.com/ 에서 다운로드한 TypeScript Notes For Professionals 를 번역한 내용입니다. 본 글으 목적은 본인의 학습 및 참고자료로 사용하기 위함입니다. 2-1. 안전성 타입스크립트는 정적 분석을 통해 타입에러를 잡아낸다. function double(x: number) : number { return 2*x; } double('2'); // ~~~ Argument of type '"2"' is not assignable to parameter of type 'number'. 2-2 가독성 타입스크립트는 에디터에서 상황에 맞는 문서를 제시한다. 2-3. 자동완성 타입스크립트는 에디터가 자동으로 소스코드를 지정한 형태로 포맷을 자.. 2020. 4. 13. Type Script 정리 - 1. 타입스크립트 시작하기 본 글의 모든 내용은 https://goalkicker.com/ 에서 다운로드한 TypeScript Notes For Professionals 를 번역한 내용입니다. 본 글으 목적은 본인의 학습 및 참고자료로 사용하기 위함입니다. 1. 타입스크립트 시작하기 1-1. 설치 및 설정 배경 타입스크립트는 자바스크립트 코드로 바로 컴파일하여 사용하기위한 자바스크립트의 형식화된 스크립트 코드이다. 타입스크립트는 .ts 확장자를 사용한다. 많은 IDE가 특별한 설치 없이 타입스크립트를 지원하지만, command line 에서도 Node.JS의 Typescript 패키지를 활용하여 컴파일 할 수 있다. TypeScript를 지원하는 IDE Visual Studio Visual Studio Code WebStorm I.. 2020. 4. 5. TS 변수의 기본형과 변수 선언 1. 개요 Angular를 하기 전에 Angular에서 사용하는 TS 에 대한 정리가 먼저 필요할 것이다. 무턱대고 시작한 Angular는 개발시간을 오래 걸리게 하고, 디버깅에 혼선만 주기 시작했다. 기본적으로 TS를 사용하는 프레임워크이기 때문에 TS를 알아보도록 한다. 2. JS ES5와 ES6의 차이 ES5와 ES6에서 변수 선언 방식은 각각 다음과 같다 var a = 10; // ES 5 let a = 10; // ES 6 변수 선언 방식과 변수의 타입 지정 등 여러가지가 바뀌었다. 하지만 여전히 ES5의 선언방식을 ES6에서 사용할 수 있다. 주의사항은, 이 둘을 혼용했을 때, 디버깅을 어렵게 할 수 있다는 점이다. var로 선언한 변수는 다른 코드블럭에서도 접근이 가능하기 때문에, 변수가 꼬.. 2020. 3. 30. Angular 시작하기 - 1 1. 템플릿 문법 - 앵귤러의 템플릿 문법은 HTML과 JS의 문법을 확장한 것으로 볼 수 있다. - angular-cli를 활용하여 간단하게 컴포넌트 또는 프로젝트를 생성할 수 있다. 1) 컴포넌트 만들기 ng generate component product-list(컴포넌트 명) 또는 ng g c product-list ng 명령어를 활용하여 컴포넌트를 쉽게 만들 수 있다. ng generate component product-list 를 축약한 명령어가 ng g c product-list이다. 이 명령어를 실행시키면 src/app/product-list 디렉토리가 생성되고, 내부에 ts, html, css 파일이 생성된다. 기본적으로 실행되는 내용이 모두 포함되어 있기 때문에 간편하게 사용이 가능하.. 2019. 7. 10. 이전 1 2 3 다음 반응형
