본문 바로가기

Frontend

 (290)
TIL 23.07.27 타입과 인터페이스 타입과 인터페이스 공통점 1. 타입 정의 : 타입과 인터페이스는 둘 다 새로운 타입을 정의할 때 사용하며, 여러 변수에 동일한 타입을 재사용 하거나 함수의 매개변수 및 타입 반환을 할 때 사용된다. 2. 타입 체킹 : 타입스크립트는 타입과 인터페이스를 이용하여 코드를 검사, 컴파일 할 때 타입오류를 찾아낸다. // 인터페이스 예제 interface Person { name: string; age: number; } // 타입 예제 type PersonType = { name: string; age: number; }; // 확장 예제 interface Car { brand: string; model: string; } interface ElectricCar extends Car { batteryCapac..
TIL 23.07.26 TypeScript/ Node.js 기본 버전 설정 문제점 지옥같은 노드 버전 12.22.12 때문에 타입스크립트랑 호환이 안돼서 몇일 내내 고생을 했음 🤬 아무리 명령어 입력하고 노드 설치해도 계속 12.22.12 가 디폴트 값이 되는.. 그런 너무 힘들었다. 시도해본것 진짜 임시 방편으로 다음 명령어를 입력하면 노드최신버전을 설치하면 일시적으로는 버전이 최상위 버전인 v20.5.0 으로 바뀌는데 진짜 그순간뿐이라서 터미널끄면 사라짐.. nvm install node 해결방안 터미널에서 다음과 같이 명령어를 치면 nvm ls 다음처럼 현재 설치된 노드 버전목록들을 보여줌 (원래 나의 디폴트 버전은 12.22.12) 다음과 같이 디폴트 설정할 노드 버전을 입력해주면 nvm alias default [원하는 노드 버전] 다음과 같이 현재 노드 버전이 바뀐것..
[TypeScript] 객체 지향 설계원칙 - S.O.L.I.D 객체지향 설계를 할때는 S.O.L.I.D 원칙을 따라서 설계하는것이 필수이다. 1. SRP 원칙 ⭐ 매우 중요 ⭐ - 클래스는 하나의 책임만 가져야 한다는 매우 기본적인 원칙이다. - 5개의 원칙 중 가장 기본적이고 중요한 원칙 - 예를 들어, 유저 서비스라는 클래스가 있다면 유저서비스에서는 유저 관련된 액션만 해야 함 잘못된 사례 : 유저 서비스에 생뚱맞게 이메일 전송 로직이 있음. 서비스 내에서 다른 서비스를 참조하는것은 지양해야 함. class UserService { constructor(private db: Database) {} getUser(id: number): User { // 사용자 조회 로직 return this.db.findUser(id); } saveUser(user: User):..
[TypeScript] 인터페이스 인터페이스 인터페이스는 TypeScript 에서 객체의 타입을 정의하는데 사용되며, 객체가 가져야하는 속성과 메서드를 정의한다. 인터페이스를 구현한 객체는 인터페이스를 반드시 준수해야 하며 이를 통해 코드의 안정성과 유지보수성을 향상시킬 수 있다. 추상 클래스와 인터페이스의 차이 1. 구현부 제공여부 추상클래스 : 클래스의 기본 구현을 제공 인터페이스 : 객체의 구조만을 정의하고 기본 구현을 제공하지 않음. 2. 상속 메커니즘 추상클래스 : 단일상속만 지원 인터페이스 : 다중상속을 지원, 하나의 클래스는 여러 인터페이스를 구현가능 3. 구현 메커니즘 추상클래스 : 추상 클래스를 상속받은 자식 클래스는 반드시 추상함수를 구현해야함 인터페이스 : 인터페이스를 구현하는 클래스는 인터페이스에 정의된 모든 메서드..
[TypeScript] 추상 클래스 추상 클래스 추상 클래스는 클래스와는 다르게 인스턴스화를 할 수 없는 클래스 추상 클래스의 목적 - 상속을 통해 자식 클래스에서 메서드를 제각각 구현하도록 강제를 하는 용도 - 물론 추상 클래스도 최소한의 기본 메서드는 정의할 수 있음. - 핵심기능의 구현은 전부 자식클래스에게 위임을 하는 것 추상클래스 사용방법 - 추상 클래스 및 추상함수는 abstract 키워들 사용 - 추상 클래스는 1개이상의 추상함수가 있는 것이 일반적 abstract class Shape { abstract getArea(): number; // 추상 함수 정의!!! printArea() { console.log(`도형 넓이: ${this.getArea()}`); } } class Circle extends Shape { rad..
[TypeScript] 상속 상속(inheritance) - 상속은 객체 지향 프로그래밍에서 클래스 간의 관계를 정의하는 중요한 개념 - 상속을 통해 기존 클래스의 속성과 메서드를 물려받아 새로운 클래스를 정의할 수 있음 - 상속이 있어서 똑같은 코드를 계속 반복적으로 작성할 필요가 없음. - 위의 예제에서 Car 라는 클래스를 생성했으면 무스탕, 골프와 같은 차량들은 Car 라는 클래스를 상속받고 자체적으로 필요한 속성 및 메소드를 추가하면 끝 - 상속을 구현하려면 extends 키워드를 사용하면 됨. class Animal { name: string; constructor(name: string) { this.name = name; } makeSound() { console.log('동물 소리~'); } } class Dog e..
[TypeScript] 클래스 클래스 클래스는 객체지향 프로그래밍 (OOP) 의 핵심 구성요소 중 하나로, 객체를 만들기 위한 틀(Template) 이다. 클래스의 구성요소 클래스에서는 같은 종류의 객체들이 공통적으로 가지는 속성(Attribute) 과 메서드(Method)를 정의한다. 속성 : 객체의 성질을 정의하는 것 ex) 붕어빵은 팥이란 속성이 있는 팥 붕어빵과 슈크림이라는 속성이 있는 슈크림 붕어빵이 있다. 메서드 : 객체의 성질을 변화시키거나 객체에서 제공하는 기능들을 사용하는 창구 ex) 붕어빵 주인은 팥 붕어빵에서 슈크림 붕어빵으로 전환할 수 있음, 붕어빵을 사는 고객들은 팥 붕어빵, 슈크림 붕어빵의 가격을 알 수 있음. 객체 객체란 클래스를 기반으로 생성되며 클래스의 instance 라고도 한다. 클래스 및 객체 정의..
[TypeScript] 프로젝트 세팅 1. 터미널을 열고 프로그램이 위치할 디렉토리 새로 생성 나는 보통 데스크탑에 만들어서, cd desktop -> mkdir [디렉토리명] -> cd [디렉토리명] 으로 접근 2. 다음의 명령어를 차례대로 입력 npm init -y 나는 노드 버전때문에 아래와 같이 최신으로 다운받아줘야 한다. nvm install node tsc --init --rootDir ./src --outDir ./dist --esModuleInterop --module commonjs --strict true --allowJS true --checkJS true --rootDir ./src : 프로그램의 소스 파일이 들어가는 경로는 src 디렉토리 --outDir ./dist : 컴파일이 된 파일들이 들어가는 디렉토리는 dis..

티스토리툴바