TypeScript의 인터페이스, 클래스 및 객체지향프로그래밍 (OOP)

목차 1. Interface 2. 인터페이스 속성 기본 속성 선택적 속성 읽기 전용 속성 3. 클래스로 데이터 타입 지정하기 4. OOP 1. Interface 코드를 구현하기 위해서 필요한 것은 아니지만 객체의 모양이나 구조를 정의하는 방법 내 오타 같은 실수를 막을 수 있고, 다른 사람이 코드를 봤을 때 직관적으로 보고, 재사용할 수 있도록 도와준다. 동작을 하는 코드가 아니고 구현을 위한 코드가 아니기 때문에 추상적이라고 말할 수 있다. 그래서 JS로 변환하는 과정에서 'Interface'는 변환되지 않는다. 2. 인터페이스 속성 예시 코드 interface IBoard { id: number title: string content: string date: number hit: number like..

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

TypeScript의 Type

목차 1. 변수 2. 데이터 타입 2-1. Number type 2-2. String type 2-3. Boolean type 2-4. Null, Undefined type 2-5. Void type - function 2-5-1. 함수에 데이터 타입 지정하기 2-6. never type 2-7. unknown type, any type 2-8. object type 2-8-1. Object의 데이터 타입 2-8-2. Array의 데이터 타입 1. 변수 JS와 다르게 변수 옆에 변수에 들어올 데이터 타입에 대해서 명시를 해주는 것이 기본 문법이다. 작성 형태는 변수 옆에 콜론(:)을 작성하고 데이터 타입을 작성한다. // JS 변수 선언 let num = 10 const string = "hello JS..

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

객체 지향 프로그래밍(OOP)과 객체 지향 설계 (SOLID)의 기본 개념

목차 1. 객체지향 프로그래밍 (OOP) 2. 객체지향설계 5대 원칙 (SOLID) 3. 추상화와 구체화 4. 추상화와 구체화 코드 예시 1. 객체지향 프로그래밍 (OOP) 객체 개념을 기반으로 하는 프로그래밍이다. 복잡하지만 모듈식이여서 재사용 가능하다. 객체 지향 프로그래밍을 하게 된다면 얻는 이점으로 모듈성, 재사용성, 유연성, 유지보수성이 있다. 1. 모듈성 : 작고, 관리하기 쉬운 단위로 나누어서 데이터와 동작을 캡슐화하여 코드를 더 쉽게 이해하고 유지 관리 할 수 있다. 2. 재사용성 : 상속과 구성을 통해 코드의 재사용성을 높였다. 기존 클래스를 확장하거나, 결합하는 클래스를 생성하여 중복 코드를 작성할 필요성을 줄일 수 있다. 3. 유연성 : 요구사항에 유연하게 대처할 수 있는 코드를 만들..

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

TypeScript 기초, 컴파일 및 컴파일 설정

목차 1. TypeScript 이해하기 Step.1 - TypeScript의 기본 개념 2. TypeScript 이해하기 Step.2 - 기본적인 컴파일 방법 3. TypeScript 이해하기 Step.3 - tsconfig.json을 이용한 컴파일 설정 4. TypeScript 이해하기 Step.4 - Node 환경에서 TypeScript 실행하기 TypeScript 이해하기 Step.1 - TypeScript의 기본 개념 TypeScript MS에서 만들었다. 장점 : 런타임 전에 오류를 찾을 수 있다. 단점 : 잔소리꾼 같은 존재이다. 뭔가를 만들기 위해서 JS에서 치지 않았던 내용들을 쳐야 하는 경우가 있다. 런타임(실행시켜 주는 환경)이 존재하지 않는다. : babel 같은 것을 이용하여 빌드 ..

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

JavaScript - 구조 분해 할당

구조 분해 할당 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다. 배열 구조 분해 할당 1. 배열 구조 분해 할당을 사용하지 않은 할당 방법 let arr = ['1st','2nd', '3nd', '4th', '5th', '6th', '7th'] //mon, tue, wed, thu, fri, sat, sun에 배열 1번요소부터 할당하려고 한다면 //하나씩 기입해줘야했다... const mon = arr[0] const tue = arr[1] const wed = arr[2] const thu = arr[3] const fri = arr[4] const sat = arr[5] const sun = arr[6] console.log(mon) conso..

• format_list_bulleted JavaScript
• · 2022. 12. 12.
• textsms

JavaScript - 자주 쓰이는 배열 메서드 (Array Method)

JavaScript 배열 메서드 최근 노드를 공부하기 시작하면서 배열에 메서드를 이용해서 단순하지만 길게 반복해서 적었던 코드를 간결하고 가독성 좋게 리펙토링 하는 과정이 많아지면서 배열 메서드의 중요성도 많이 알게 되어서 배열 메서드에 대해 알아보았다. 구분자(separator) 뒤에 '?' 선택사항이다. Array.join(separator?) 배열을 문자열로 만들 때 사용한다. 지정한 구분자를 넣어서 문자열로 이어준다. 구분자를 기입하지 않으면 ,(쉼표)를 이용해서 구분하여 준다. const arr = ['바람', '비', '물']; console.log(arr.join()); // 바람,비,물 console.log(arr.join('')); // 바람비물 console.log(arr.join('-..

• format_list_bulleted JavaScript
• · 2022. 12. 12.
• textsms