Class 설계 - UML

ERD처럼 class도 설계를 할 때 UML 모델링 작업을 한다. UML은 소프트웨어 설계 및 개발에 사용되는 표준화된 표기법 및 시각적 언어인 'Unified Modeling Language'의 약자이다. UML 다이어그램은 종종 소프트웨어 개발자가 복잡한 시스템 설계를 시각화하고 전달하는 데 도움을 주기 위해 사용하며, 여러 팀원이 동일한 코드를 이해하고 작업해야 하는 공동 개발 프로젝트에 특히 유용하다. 클래스 다이어그램, 개체다이어그램, 시퀀스다이어그램 등 여러 시점에 따라서 다른 다이어그램으로 표현할 수 있으며, 보통 설계 단계에서 작성하게 된다. 클래스 다이어그램의 경우 구현 해야 할 메서드나, 멤버변수에 대해서 표현되어 있다. 일반적으로 소스 코드로만 봤을 때, 여러 클래스가 있는 경우 클래..

• format_list_bulleted JavaScript
• · 2023. 4. 28.
• textsms

Jest를 이용한 TDD(Test-Driven Development)

목차 1. TDD 2. Jest 3. Jest 사용하기 4. Jest Syntax 5. Mock Function 1. TDD (Test-Driven Development) TDD는 Test-Driven Development로 소프트웨어 개발방법론 중 하나로 실제 코드를 작성하기 전에 테스트를 먼저 작성하는 방법이다. 테스트 코드를 통한 실패하는 코드(에러코드)를 작성하고 하나씩 고쳐나가면서 개발하는 과정을 거친다. 테스트는 메서드 또는 class처럼 작은 단위로 진행한다. 테스트에 통과되는 코드만 실제 코드로 작성한다. TDD를 이용하여 개발을 진행하게 되면 오류나 문제점을 미리 예방할 수 있어 프로젝트의 안정성과 신뢰성을 높일 수 있다. 작은 단위로 진행하면서 작성하기 때문에 코드의 유지보수가 용이해진..

• format_list_bulleted JavaScript/TypeScript
• · 2023. 4. 24.
• textsms

객체 지향 프로그래밍(OOP) 예제코드

상품을 할인하는 로직을 구현할 때, 객체지향 프로그래밍의 원칙을 최대한 지키면서 구현했다. //단순히 할인된 가격을 구하는 인터페이스 interface Discount { getDiscountPrice(price: number): number } //가격을 이용한 할인된 가격을 구하는 클래스 class FlatDiscount implements Discount { //할인하는 금액 private amount: number constructor(amount: number) { this.amount = amount } //할인된 가격을 구하기 getDiscountPrice(price: number): number { return price - this.amount } } // 퍼센트를 이용한 할인된 가격을 ..

• format_list_bulleted JavaScript/TypeScript
• · 2023. 4. 21.
• textsms

브라우저 환경에서의 TypeScript

오늘 내가 배운 것 1. 브라우저 환경에서의 TypeScript 2. Node환경과 브라우저 환경 3. Troubleshooting 1 4. Troubleshooting 2 1. 브라우저 환경에서의 TypeScript 기존에 구현했었던 화면을 그려주는 JS파일을 이용하여 TS로 변환하는 과정을 했다. 추상 클래스를 이용하는 방법이었다. 추상 클래스를 만든 후 추상 클래스를 확장시켜 구체화를 하였고, Component 클래스는 다른 컴포넌트를 만들 때에도 부모 클래스로써 역할을 하기를 원했기 때문에, 추상 클래스를 제네릭 타입으로 지정하여 구체화한 클래스의 데이터 타입에 따라서 화면을 다르게 렌더 할 수 있도록 확장성을 키웠다. interface IComments { user: IUser list: ICo..

• format_list_bulleted JavaScript/TypeScript
• · 2023. 4. 21.
• textsms

객체 지향 프로그래밍 (OOP) - 데이터 은닉화

목차 1. 데이터 은닉화 2. readonly 1. 데이터 은닉화 클래스의 내부 상태에 대한 접근을 불가능하게 하고 메서드를 통해 제어된 액세스를 제공하기 위해서 사용되는 OOP 기법이다. 데이터를 은닉하게 되면 내부의 상태가 일관되게 유지되고, 무단으로 수정되는 것을 방지할 수 있다. 데이터 은닉화를 하는 방법은 private를 이용하여 객체를 생성하면 된다. 인스턴스를 생성했을 때 접근 할 수 있냐, 없냐에 따라서 private , public 으로 나눈다. 클래스 내부에서는 사용할 수 있지만, 인스턴스 생성 후에 상태를 접근할 수는 없다. 생성자 함수의 매개변수도 provate를 이용해서 작성할 수 있다. class Auth { private email: string private password:..

• format_list_bulleted JavaScript/TypeScript
• · 2023. 4. 21.
• textsms

TypeScript - Function과 Generics(제네릭 타입)

목차 1. Function 2. Generics (제네릭) 3. 다양한 타입의 객체 4. Function overloading VS Generics 1. Function 함수에 대한 데이터 타입을 지정할 때, 함수의 반환값뿐 아니라, 매개변수에도 데이터 타입이 지정되어 있어야 한다. // 함수 선언식 function add(x: number, y: number): number { return x + y } //함수 표현식 const ad2 = function (x: number, y: number): number { return x + y } //화살표 함수 const add3 = (x: number, y: number): number => x + y 1-1. 매개변수의 여러 타입 한 가지 매개변수에 대..

• format_list_bulleted JavaScript/TypeScript
• · 2023. 4. 20.
• textsms