공부한거 기록하는 블로그

객체지향 기초 개념 정리

SpaceCowboy — Thu, 2 Mar 2023 21:56:18 +0900

참고

https://en.wikipedia.org/wiki/Object_(computer_science)

객체란?

객체 지향 프로그래밍에서 객체가 뜻하는건 무엇일까요?

보통 객체지향에서 객체는 변수, 함수, 데이터 구조의 혼합을 뜻합니다. C언어의 Structure에서 메서드가 추가되었다고 생각하면 편합니다. (엄밀히 따지면 더 복잡하지만)

특히 Class 기반의 객체 지향 프로그래밍 언어에서 Class에 의해 생성된 Instance를 나타냅니다.

객체지향프로그래밍이란?

그러면 객체 지향 프로그래밍은 또 뭘까요?

OOP는 현실세계의 객체들을 모델링하고 그런 객체들끼리 상호작용하는 프로그램을 개발하는 패러다임입니다.

객체들의 상태와 행동을 캡슐화해서 코드의 재사용성, 유지보수성, 확장성을 높이는 걸 목적으로 합니다.

따라서, 객체 지향 프로그래밍은 객체들을 중심으로 코드를 구성하여 높은 추상화 수준을 제공하고 코드의 구조화와 관리를 용이하게 합니다.

객체지향의 특징

추상화 (Abstraction)
- 네이버 지식백과에서 설명하는 추상화 - https://terms.naver.com/entry.naver?docId=3607505&cid=58598&categoryId=59316
- 객체지향프로그래밍에서 추상화는 복잡한 현실 세계의 개념을 단순화하고 모델링하는 것을 의미합니다.
- 즉, 객체들의 공통된 속성과 행동을 추출해 상위 개념을 정의하고, 이를 기반으로 하위 개념들을 생성하는 과정입니다.
다음은 TypeScript에서 추상화를 구현한 예제입니다.
```
interface Vehicle {
  speed: number;
  move(): void;
}

class Car implements Vehicle {
  speed: number;
  constructor(speed: number) {
    this.speed = speed;
  }
  move(): void {
    console.log("The car is moving at " + this.speed + " km/h.");
  }
}

class Bicycle implements Vehicle {
  speed: number;
  constructor(speed: number) {
    this.speed = speed;
  }
  move(): void {
    console.log("The bicycle is moving at " + this.speed + " km/h.");
  }
}

const car = new Car(100);
const bicycle = new Bicycle(20);

car.move(); // The car is moving at 100 km/h.
bicycle.move(); // The bicycle is moving at 20 km/h.
```
위 예시에서 Vehicle이라는 인터페이스를 선언하고, Car 클래스와 Bicycle 클래스가 이를 구현하고 있습니다. Vehicle 인터페이스는 speed 속성과 move 메서드를 정의하고 있으며, 이 두 속성과 메서드는 Car 클래스와 Bicycle 클래스에서 모두 구현되고 있습니다.

이처럼 인터페이스를 통해 공통된 속성과 행동을 추상화하고, 이를 구현한 클래스들에서 공통된 코드를 재사용함으로써, 소프트웨어의 유지보수성과 확장성을 높일 수 있습니다.

상속 (Inheritance)
- 객체 지향 프로그래밍에서 상속은 부모 클래스가 가지고 있는 속성과 메서드를 자식 클래스에서 물려받아 사용할 수 있는 개념입니다.
- 자식 클래스는 부모 클래스의 기능을 그대로 상속받을 뿐 아니라, 필요에 따라 새로운 속성과 메서드를 추가하거나, 부모 클래스의 기능을 재정의할 수도 있습니다.
- 상속은 클래스 간의 계층 구조를 만들어 코드의 재사용성을 높이고, 클래스 간의 관계를 명확하게 해줍니다.
TypeScript에서 상속을 사용한 예시 코드는 다음과 같습니다.
```
class Vehicle {
  speed: number;
  constructor(speed: number) {
    this.speed = speed;
  }
  move(): void {
    console.log("The vehicle is moving at " + this.speed + " km/h.");
  }
}

class Car extends Vehicle {
  constructor(speed: number) {
    super(speed);
  }
}

class Bicycle extends Vehicle {
  constructor(speed: number) {
    super(speed);
  }
  move(): void {
    console.log("The bicycle is moving at " + this.speed + " km/h.");
  }
}

const car = new Car(100);
const bicycle = new Bicycle(20);

car.move(); // The vehicle is moving at 100 km/h.
bicycle.move(); // The bicycle is moving at 20 km/h.
```
Car 클래스와 Bicycle 클래스 모두 공통적인 특성을 가지고 있습니다. 속도나 움직이는 행동이 있습니다. 따라서 Vehicle 클래스를 정의해서 speed라는 속성을 정의하고 move라는 메서드를 정의했습니다. 그리고 Car와 Bicycle 클래스가 상속을 받도록 해서 중복되는 특성을 편하게 받을 수 있도록 했습니다.

다형성 (Polymorphism)
- 객체 지향 프로그래밍에서 다형성(Polymorphism)은 같은 이름의 메서드나 연산자가 다른 클래스의 인스턴스에서 다르게 동작하는 능력을 말합니다.
- 즉, 하나의 인터페이스나 추상 클래스를 여러 클래스가 구현하고, 이를 사용하는 코드에서는 여러 클래스의 객체를 동일한 타입으로 처리할 수 있는 능력입니다.
다형성을 이용하면, 코드의 재사용성과 확장성을 높일 수 있습니다. 예를 들어, 다양한 도형(원, 삼각형, 사각형 등)이 있을 때, 각 도형의 면적을 계산하는 메서드를 구현할 때, 다형성을 이용하면 여러 도형 클래스에서 이 메서드를 구현할 수 있습니다. 이렇게 하면, 코드의 재사용성이 높아지며, 새로운 도형 클래스를 추가해도 기존 코드의 수정이 필요 없습니다.

TypeScript에서는 인터페이스나 추상 클래스를 이용하여 다형성을 구현할 수 있습니다. 다음은 TypeScript에서 다형성을 구현한 예시 코드입니다.
```
interface Shape {
  getArea(): number;
}

class Rectangle implements Shape {
  width: number;
  height: number;
  constructor(width: number, height: number) {
    this.width = width;
    this.height = height;
  }
  getArea(): number {
    return this.width * this.height;
  }
}

class Circle implements Shape {
  radius: number;

  constructor(radius: number) {
    this.radius = radius;
  }

  getArea(): number {
    return Math.PI * this.radius * this.radius;
  }
}

function printArea(shape: Shape): void {
  console.log("The area is " + shape.getArea());
}

const rectangle = new Rectangle(10, 20);
const circle = new Circle(5);

printArea(rectangle); // The area is 200
printArea(circle); // The area is 78.53981633974483
```
위 코드에서는 Shape 인터페이스를 정의하고, Rectangle 클래스와 Circle 클래스가 이를 구현하고 있습니다. 이 때, 각 클래스에서는 getArea 메서드를 구현하고 있습니다. printArea 함수는 Shape 타입을 매개변수로 받으며, 이를 구현한 Rectangle 클래스와 Circle 클래스의 인스턴스를 모두 전달할 수 있습니다. 이렇게 하면, printArea 함수에서는 각 도형 클래스에서 구현한 getArea 메서드가 동일한 이름으로 호출되며, 다형성이 구현됩니다.

캡슐화 (Encapsulation)
- 객체 지향 프로그래밍에서 캡슐화(Encapsulation)란, 데이터와 데이터를 처리하는 메서드를 하나의 묶음으로 묶는 것을 말합니다.
- 이를 통해, 데이터에 직접 접근하는 것을 제한하고, 데이터와 메서드를 함께 캡슐화된 객체의 인터페이스를 통해 사용하도록 하는 것입니다.
캡슐화를 이용하면, 객체의 내부 구현을 외부로부터 숨길 수 있어 정보은닉(Information Hiding)이 가능해집니다. 이를 통해, 객체 간의 상호작용이 명확하게 정의될 수 있으며, 객체의 내부 구현이 변경되더라도 외부에서 영향을 받지 않도록 할 수 있습니다.

TypeScript에서는 클래스를 이용하여 캡슐화를 구현할 수 있습니다. 클래스의 속성에는 접근 제어자(Access Modifier)를 이용하여 외부에서의 접근을 제어할 수 있습니다. 다음은 TypeScript에서 캡슐화를 구현한 예시 코드입니다.
```
class BankAccount {
  private balance: number;

  constructor(initialBalance: number) {
    this.balance = initialBalance;
  }

  public deposit(amount: number): void {
    this.balance += amount;
  }

  public withdraw(amount: number): void {
    if (amount <= this.balance) {
      this.balance -= amount;
    } else {
      console.log("Insufficient balance");
    }
  }

  public getBalance(): number {
    return this.balance;
  }
}

const account = new BankAccount(1000);
console.log(account.getBalance()); // 1000

account.deposit(500);
console.log(account.getBalance()); // 1500

account.withdraw(1000);
console.log(account.getBalance()); // 500

// Cannot access 'balance' because it is private.
// account.balance = 2000;
```
위 코드에서는 BankAccount 클래스가 정의되어 있습니다. 이 클래스에는 balance 속성이 private 접근 제어자로 선언되어 있습니다. 이렇게 하면, balance 속성에는 클래스 외부에서 직접 접근할 수 없습니다. 대신에, deposit, withdraw, getBalance 메서드를 이용하여 balance 속성에 간접적으로 접근할 수 있습니다. 이렇게 하면, balance 속성의 값을 클래스 외부에서 보호할 수 있습니다.

자바스크립트 자주 쓰는 메서드 정리

SpaceCowboy — Thu, 2 Mar 2023 21:43:58 +0900

이번에는 일 할 때 자주 쓰던 메서드들을 정리해봤습니다.

Notion Export 기능이 안먹혀서 일단 링크로 대신 올립니다.

자바스크립트 자주 쓰는 메서드 정리

Nest.js에서 TypeORM Configuration 하는 방법

SpaceCowboy — Tue, 14 Feb 2023 23:40:18 +0900

참고

개요

Nest.js 환경에서 환경변수를 로드할 때 @nestjs/config 패키지를 사용합니다. 해당 패키지와 함께 TypeORM configuration 하는 방법을 알아봅니다.

참고로 여기서 쓰이는 방법은 다른 패키지 쓸 때도 적용할 수 있습니다.

일단 환경변수 설정하기 feat. `ConfigModule`

우선 환경변수 로드를 위해서 ConfigModule 설정을 해야합니다. 저는 해당 모듈의 설정 파일을 src/config/config.validator.ts 에 두었습니다.

import { ConfigModuleOptions } from '@nestjs/config/dist';
import * as Joi from 'joi';

export const CONFIG_VALIDATOR: ConfigModuleOptions = {
  validationSchema: Joi.object({
    DB_HOST: Joi.string().required(),
    DB_PORT: Joi.number().required(),
    DB_USERNAME: Joi.string().required(),
    DB_PASSWORD: Joi.string().required(),
    DB_DATABASE: Joi.string().required(),
  }),
  isGlobal: true,
};

Joi 패키지를 사용해서 환경변수 검증을 할 수 있습니다. 그리고 isGlobal 옵션을 true로 설정해서 전역적으로 쓰일 수 있게 했습니다.

그리고 AppModule에 ConfigModule을 imports 해줍니다.

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { CONFIG_VALIDATOR } from './app/config/config.validator';
import { CatsModule } from './cats/cats.module';

@Module({
  imports: [CatsModule, ConfigModule.forRoot(CONFIG_VALIDATOR)],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

ConfigService를 통해 TypeORM Configuration 하기

이제 ConfigService를 주입받아서 TypeORM 설정을 해야합니다. 우선 저같은 경우에는 TypeORM 설정 파일을 src\app\mysql\mysql-config.provider.ts 에 두었습니다.

import { Injectable } from '@nestjs/common';
import { ConfigService } from '@nestjs/config';
import { TypeOrmModuleOptions, TypeOrmOptionsFactory } from '@nestjs/typeorm';

@Injectable()
export class MysqlConfigProvider implements TypeOrmOptionsFactory {
  constructor(private configService: ConfigService) {}

  createTypeOrmOptions(): TypeOrmModuleOptions {
    return {
      type: 'mysql',
      host: this.configService.get('DB_HOST'),
      port: this.configService.get<number>('DB_PORT'),
      username: this.configService.get('DB_USERNAME'),
      password: this.configService.get('DB_PASSWORD'),
      database: this.configService.get('DB_DATABASE'),
      autoLoadEntities: true,
      synchronize: true,
      logging: true,
    };
  }
}

이제 마지막으로 AppModule에서 TypeOrmModule을 imports 하면됩니다.

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import { TypeOrmModule } from '@nestjs/typeorm';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { CONFIG_VALIDATOR } from './app/config/config.validator';
import { MysqlConfigProvider } from './app/mysql/mysql-config.provider';
import { CatsModule } from './cats/cats.module';

@Module({
  imports: [
    CatsModule,
    ConfigModule.forRoot(CONFIG_VALIDATOR),
    TypeOrmModule.forRootAsync({
      useClass: MysqlConfigProvider,
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

TypeORM 0.3에서 Seeding 하기

SpaceCowboy — Mon, 13 Feb 2023 23:47:30 +0900

참고

Seeder란?

데이터베이스에 초기 데이터 및 테스트 용 더미 데이트를 입력해주는 도구입니다.

권한 정보나 관리자 계정같은 데이터는 초기에 필요한 정보인데 이를 Seeder를 사용해서 미리 입력할 수 있습니다.
테스트할 때 필요한 데이터들을 편리하게 채워넣을 수 있습니다.

우선 셋업을 설명하기 전에, 보통 TypeORM Seeding을 위해서 구글링을 해보면 typeorm-seeding이라는 패키지를 사용한다는걸 알 수 있습니다. 하지만 두 가지 이유로 비추천합니다.

더 이상 관리되고 있지 않음: 여기에서 확인해보시면 마지막 업데이트가 3년전입니다.
따라서 여전히 ormconfig를 사용해야함: dataSource 사용이 좀 더 권장됩니다. 왜 ormconfig를 쓰면 안되는지는 여기에서 확인하실 수 있습니다.

그래서 제가 찾아본 패키지는 typeorm-extension이라는 패키지입니다.

https://www.npmjs.com/package/typeorm-extension
지속적으로 관리되고 있습니다. - 2023년 2월 12일 기준으로 한달 전까지 업데이트가 있었군요!
TypeORM 공식문서에도 소개되어있습니다! - 여기를 보시면 확인하실 수 있습니다. 신뢰도가 상승하는군요…
dataSource를 사용합니다.

TypeORM Seeding 셋업 및 실행

TypeORM Migration 을 읽고 오셨다는 가정하에 진행됩니다.

typeorm-extension 패키지를 통해 seeding 셋업을 진행해봅시다.

npm install typeorm-extension --save

package.json의 scripts 섹션에 다음 스크립트를 넣습니다.

"seed": "ts-node -r tsconfig-paths/register ./node_modules/typeorm-extension/dist/cli/index.js seed",

typeorm-extension cli의 경우에도 절대경로를 이해하지 못해서 tsconfig-paths 패키지를 활용한 모습입니다.

- typeorm-extension은 DataSource 파일의 디폴트 경로로 루트 디렉토리의 data-source.ts 파일을 찾습니다. 따로 지정할 수 있습니다.
- typeorm-extension의 seed 명령어는 seeder 파일의 디폴트 경로를 src/database/seeds/**/*{.ts,.js} 로 간주합니다. 따로 지정할 수 있습니다.

typeorm-extension 패키지도 typeorm의 dataSource를 사용하기 때문에 data-source.ts 가 필요할거같네요. 루트 디렉토리에 추가했습니다.

import { ConfigService } from '@nestjs/config';
import { config } from 'dotenv';
import { DataSource } from 'typeorm';

config();

const configService = new ConfigService();

export default new DataSource({
  type: 'mysql',
  host: configService.get('DB_HOST'),
  port: configService.get<number>('DB_PORT'),
  username: configService.get('DB_USERNAME'),
  password: configService.get('DB_PASSWORD'),
  database: configService.get('DB_DATABASE'),
  synchronize: false,
  entities: ['src/**/*.entity.ts'],
  migrations: ['src/database/migrations/*.ts'],
  migrationsTableName: 'migrations',
});

이제 우리의 Cat Entity에 대한 초기 데이터 삽입을 위해서 src/database/seeds 경로에 cats.seeder.ts 파일을 추가합니다.

해당 파일에서 어떤 데이터를 넣을지 정의하면 됩니다.

import { Cat } from 'src/cats/entities/cat.entity';
import { DataSource } from 'typeorm';
import { Seeder } from 'typeorm-extension';

export default class CatsSeeder implements Seeder {
  async run(dataSource: DataSource): Promise<any> {
    const repository = dataSource.getRepository(Cat);
    await repository.insert([
      {
        name: 'cat1',
        kind: 'cat',
      },
    ]);
  }
}

보시다시피, typeorm-extension의 Seeder를 구현했습니다. 그리고 내부적으로 DataSource를 주입받고 repository를 사용해서 실제 데이터를 입력하는 방식으로 진행된다는걸 알 수 있습니다.

이제 터미널에서 다음 명령어를 실행합니다.

npm run seed

다음과 비슷한 화면이 나오면 성공한겁니다.

따로 성공했다는 메시지는 없습니다.

실제로 데이터가 잘 들어갔는지 확인하기 위해, MySQL Workbench로 확인해봤습니다.

잘 들어갔네요.

랜덤 데이터 삽입하기 feat. Faker, Factory

위의 과정에서는 우리가 임의로 정한 데이터만 삽입하는 과정이였고 랜덤한 데이터가 입력되게 하고 싶을 수도 있습니다.

typeorm-extension에서는 factory라는 기능을 통해서 랜덤한 데이터를 입력할 수 있습니다.

src/database/factories 디렉토리에 cats.factory.ts 파일을 추가합니다.

typeorm-extension은 factory 파일의 디폴트 디렉토리를 src/database/factories로 간주합니다. 따로 지정할 수 있습니다.

import { Cat } from 'src/cats/entities/cat.entity';
import { setSeederFactory } from 'typeorm-extension';

export default setSeederFactory(Cat, (faker) => {
  const cat = new Cat();
  cat.name = faker.name.fullName();
  cat.kind = faker.animal.cat();

  return cat;
});

cats.seeder.ts 의 코드를 수정합니다.

import { Cat } from 'src/cats/entities/cat.entity';
import { DataSource } from 'typeorm';
import { Seeder, SeederFactoryManager } from 'typeorm-extension';

export default class CatsSeeder implements Seeder {
  async run(
    dataSource: DataSource,
    factoryManager: SeederFactoryManager,
  ): Promise<any> {
    const repository = dataSource.getRepository(Cat);
    // await repository.insert([
    //   {
    //     name: 'cat1',
    //     kind: 'cat',
    //   },
    // ]);

    const catsFactory = factoryManager.get(Cat);
    await catsFactory.saveMany(5);
  }
}

SeederFactoryManager를 주입받아서 다음과 같은 동작을 합니다.

get 메서드를 통해서 Entity에 관련된 factory를 얻습니다. 해당 Entity와 관련된 factory가 src/database/factories에 존재해야합니다.
saveMany 메서드를 통해 원하는 개수만큼 랜덤 데이터를 입력할 수 있습니다.

이후 npm run seed 명령어를 실행하고나서 DB를 보면 랜덤한 데이터가 생성되어 있는 것을 보실 수 있습니다.

5번부터 9번까지 랜덤하게 생성된것을 느낄 수 있습니다.

그 외

typeorm-extension 공식문서를 보시면 아시겠지만 굳이 Seeding 뿐만 아니라 다양한 용도로 쓸 수 있습니다. 직접 확인해보세요

TypeORM 0.3에서 migration 해보기

SpaceCowboy — Thu, 9 Feb 2023 22:41:44 +0900

Migration

migration이란?

TypeORM에서 synchronize: true 기능을 사용하게 되면 Entity의 수정사항을 자동으로 DB에 갱신시켜줍니다. 이 기능이 편한건 맞지만 간혹 특정 데이터를 아예 밀어버릴 수 있기 때문에 production 레벨에서는 안전하지 않습니다.

그래서 보통 백엔드 관련 프레임워크에서는 Migration이라는 기능을 제공합니다.

TypeORM에서는 데이터베이스 스키마를 업데이트하는 sql 쿼리를 모은 하나의 파일을 migration이라고 합니다.

이번 섹션에서는 Nest.js 환경에서 typeorm을 쓸 때 migration을 어떻게 진행할 수 있는지 서술합니다.

migration을 위한 셋업

우선 아래의 의존성들을 설치합니다. ts-node와 tsconfig-paths입니다.

npm install -D ts-node tsconfig-paths

그리고 루트 디렉토리에 data-source.ts 라는 파일을 만들고 다음 코드를 작성합니다.

import { ConfigService } from '@nestjs/config';
import { config } from 'dotenv';
import { DataSource } from 'typeorm';

config();

const configService = new ConfigService();

export default new DataSource({
  type: 'mysql',
  host: configService.get('DB_HOST'),
  port: configService.get<number>('DB_PORT'),
  username: configService.get('DB_USERNAME'),
  password: configService.get('DB_PASSWORD'),
  database: configService.get('DB_DATABASE'),
  synchronize: false,
  entities: ['src/**/*.entity.ts'],
  migrations: ['src/database/migrations/*.ts'],
  migrationsTableName: 'migrations',
});

파일 이름이나 코드 내용은 어느 정도 커스텀하셔도 상관없습니다.

그리고 package.json의 scripts에 TypeORM migration 관련 스크립트를 넣습니다.

"scripts": {
    "prebuild": "rimraf dist",
    "build": "nest build",
    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
    "start": "nest start",
    "start:dev": "nest start --watch",
    "start:debug": "nest start --debug --watch",
    "start:prod": "node dist/main",
        // typeorm 스크립트
    "typeorm": "ts-node -r tsconfig-paths/register ./node_modules/typeorm/cli.js --dataSource ./data-source.ts",
    "migration:create": "ts-node -r tsconfig-paths/register ./node_modules/typeorm/cli.js migration:create ./src/database/migrations/Migration",
    "migration:generate": "npm run typeorm migration:generate ./src/database/migrations/Migration",
    "migration:run": "npm run typeorm  migration:run",
    "migration:revert": "npm run typeorm migration:revert",
    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:cov": "jest --coverage",
    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
    "test:e2e": "jest --config ./test/jest-e2e.json"
  },

TypeORM의 공식문서 설명과는 좀 다른 스크립트입니다. TypeORM CLI가 절대경로를 이해하지 못해서 공식문서대로 따라하다가는 can not found module 같은 에러를 맞닥뜨리게 될겁니다. 그래서 임의로 절대경로를 이해시키기 위해 ts-node -r tsconfig-paths/register 가 들어간 것을 볼 수 있습니다.

ts-config-paths 모듈에 관한 내용은 여기에서 확인하실 수 있습니다.

아무튼 여기서 npm migration:generate 명령어를 실행해보시고 대충 아래 화면처럼 뜨면 성공한겁니다.

migration 해보기

먼저 처음에 다음 entity가 존재하고 DB에도 적용되어있다고 가정합니다.

import { BaseEntity } from 'src/app/base/base.entity';
import { Column, Entity, PrimaryGeneratedColumn } from 'typeorm';

@Entity()
export class Cat extends BaseEntity {
  @PrimaryGeneratedColumn()
  idx: number;

  @Column()
  name: string;
}

여기서 고객의 요구로 (가정) Cat 에 kind 컬럼을 추가합니다.

import { BaseEntity } from 'src/app/base/base.entity';
import { Column, Entity, PrimaryGeneratedColumn } from 'typeorm';

@Entity()
export class Cat extends BaseEntity {
  @PrimaryGeneratedColumn()
  idx: number;

  @Column()
  name: string;

  @Column()
  kind: string;
}

기존에는 typeorm의 synchronize 기능을 통해 자동으로 변경되었겠지만 이번에는 synchronize 기능을 끄고 migration 방식으로 진행해봅시다.

위의 migration을 위한 셋업 과정을 잘 진행했다면 npm run migration:generate 명령어를 터미널에서 실행했을 때 src/database/migartions 디렉토리에 {timestamp}-Migration.ts파일이 생성된 것을 보실 수 있습니다.

import { MigrationInterface, QueryRunner } from 'typeorm';

export class Migration1675868794851 implements MigrationInterface {
  name = 'Migration1675868794851';

  public async up(queryRunner: QueryRunner): Promise<void> {
    await queryRunner.query(
      `ALTER TABLE \`cat\` ADD \`kind\` varchar(255) NOT NULL`,
    );
  }

  public async down(queryRunner: QueryRunner): Promise<void> {
    await queryRunner.query(`ALTER TABLE \`cat\` DROP COLUMN \`kind\``);
  }
}

up은 npm run migration:run
down은 npm run migration:revert

실제로 npm run migration:run을 실행하면 터미널에서 다음과 같이 진행될겁니다.

이렇게 성공했다고 뜨면 migration을 완료한겁니다!

migration 파일 생성할 때 create vs generate

아마 공식문서를 보면 migration 파일을 만드는 방법이 generate 말고도 create 방식이 있다는걸 알 수 있습니다.

npm run migration:create 명령어를 실행하면 다음과 같은 파일이 생성됩니다.

// src/database/migrations/1675869805076-Migration.ts

import { MigrationInterface, QueryRunner } from 'typeorm';

export class Migration1675869805076 implements MigrationInterface {
  public async up(queryRunner: QueryRunner): Promise<void> {}

  public async down(queryRunner: QueryRunner): Promise<void> {}
}

generate와는 달리 up과 down 메서드 부분에 내용이 아무것도 없습니다.

generate: 읽어들인 모든 entity 파일과 실제 데이터베이스를 비교해서 테이블을 추가 및 수정하는 migration 파일을 생성합니다.
create: 빈 migration 파일을 생성합니다. 따라서 스스로 테이블을 수정시키는 sql 쿼리문을 작성해야합니다.

generate는 컬럼을 아예 DROP 시키고 나서 재생성하는 쿼리문을 작성해줄 때가 종종 있습니다. 따라서 generate 방식을 쓸 땐 쿼리문을 확인해서 DROP하는 쿼리문이 있다면, 직접 모두 수동으로 작성하는 create 방식으로 진행하는게 좋습니다.

migration 파일 위치 src vs dist 비교

import { ConfigService } from '@nestjs/config';
import { config } from 'dotenv';
import { DataSource } from 'typeorm';

config();

const configService = new ConfigService();

export default new DataSource({
  type: 'mysql',
  host: configService.get('DB_HOST'),
  port: configService.get<number>('DB_PORT'),
  username: configService.get('DB_USERNAME'),
  password: configService.get('DB_PASSWORD'),
  database: configService.get('DB_DATABASE'),
  synchronize: false,
  entities: ['src/**/*.entity.ts'],
  migrations: ['src/database/migrations/*.ts'],
  migrationsTableName: 'migrations',
});

여기서 migrations: ['src/database/migrations/*.ts'] 부분에 의문이 갔던게, 저기를 dist 폴더 기준으로 하시는 분들도 좀 있던거 같습니다. (정확히는 기억 안남)

src 폴더 기준으로 넣어야할지 dist 폴더 기준으로 넣을지 고민이 되어서 뭐가 좋을지 고민해봤는데 그냥 src 폴더 기준으로 넣는게 좋을거 같습니다. 다음은 chatGPT 답변을 기용한겁니다.

이는 TypeORM이 개발 단계에서 사용하는 소스 코드를 기준으로 마이그레이션을 수행할 수 있기 때문입니다. dist 기준으로 설정하면 빌드 과정에서 생성된 파일을 기준으로 마이그레이션을 수행하기 때문에, 소스 코드와 빌드 결과가 맞지 않을 경우 문제가 발생할 수 있습니다.

TypeORM에서 Custom Repository 쓰기

SpaceCowboy — Wed, 1 Feb 2023 22:03:01 +0900

참고

https://stackoverflow.com/questions/74542474/how-to-create-custom-separate-file-repository-in-nestjs-9-with-typeorm-0-3-x

우선 기본적으로 다음과 같은 entity가 있다고 가정하고 진행하겠다.

import { Entity, Column, PrimaryGeneratedColumn } from 'typeorm';

@Entity()
export class User {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  name: string; 
}

TypeORM 0.2.x 버전에서의 custom repository

import { EntityRepository, Repository } from "typeorm";
import { User } from "./entity/user.entity";

@EntityRepository(User)
export class UserRepository extends Repository<User>{}

TypeORM에서 제공되는 @EntityRepository 데코레이터로 간단하게 구현할 수 있다.

다만, TypeORM 0.3.x 버전부터는 deprecated 되었고 사용이 불가능하다. 따라서 위와 비슷하게 구현하기 위해서 여러가지 방법이 나오고 있다.

TypeORM 0.3.x 버전에서의 custom repository

여러가지 방법으로 구현할 수 있겠지만 내가 본 것 중에서 그나마 간단하면서 기존의 @EntityRepository를 쓴 custom repository와 비슷하게 구현할 수 있는 방법을 설명하겠다.

우선 결론적으로 repository class는 다음과 같이 구현하면 된다.

import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { UserEntity } from './user.entity';

@Injectable()
export class UserRepository extends Repository<User> {
    constructor(
        @InjectRepository(UserEntity)
        private readonly repository: Repository<User>
    ) {
        super(repository.target, repository.manager, repository.queryRunner);
    }

   // 원하는 메서드 알아서 작성
}

이제 UserRepository를 다른 Service class에서 쓰기 위해서는 Module에 등록을 해야한다.

import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { User } from './user.entity';

@Module({
  imports: [TypeOrmModule.forFeature([User])], // here we provide the TypeOrm support as usual, specifically for our UserEntity in this case
  providers: [UserRepository], // 모듈의 providers 배열에 UserRepository class 등록 
  exports: [UserRepository] // 다른 모듈에서 쓸 수 있도록 exports 배열에 UserRepository class를 등록
})
export class UserModule {}

TypeORM에서 Soft Delete 써보기

SpaceCowboy — Sun, 29 Jan 2023 22:05:33 +0900

참고

https://typeorm.io/delete-query-builder#soft-delete

https://github.com/myvoltron/typeorm-soft-delete

Soft Delete란?

실제로 데이터를 삭제시키는 방법이 Hard Delete

삭제여부를 알 수 있는 컬럼에 삭제를 표현하는 방법이 Soft Delete, 즉 실제로 삭제하지는 않음

따라서 실제로 삭제시키지 않고 삭제된 것처럼 표현이 가능해서 Soft Delete된 데이터가 남아있으니 이를 활용할 수 있어서 현업에서는 Soft Delete가 권장되는 분위기입니다.

TypeORM에서 Soft Delete를 하는 방법

방법	장점	단점
직접 구현	1. 자기가 원하는 방식으로 soft delete를 구현할 수 있다.	1. 조회나 업데이트 같은 메서드를 쓸 때마다 soft delete 처리되었는지 확인하는 where절을 넣어야합니다.
TypeORM의 Soft Delete	1. soft delete 처리되었는지 확인하는 where절을 자동으로 넣어줍니다. 2. soft delete된 데이터들을 복구시키는 메서드도 제공합니다. 3. soft delete된 데이터들도 같이 조회하는 기능도 제공합니다.	1. 무조건 `@DeleteDateColumn()`방식으로만 soft delete가 구현됩니다.

TypeORM의 Soft Delete 써보기

빠르게 soft delete 써보기

우선 entity에 @DeleteDateColumn() 처리된 컬럼이 필요합니다.

import { CreateDateColumn, DeleteDateColumn, UpdateDateColumn } from 'typeorm';

export class BaseEntity {
  @CreateDateColumn()
  createdDate: Date;

  @UpdateDateColumn()
  modifiedDate: Date;

  @DeleteDateColumn() // soft delete를 하려면 필수
  deletedDate: Date;
}

import { BaseEntity } from 'src/app/base/base.entity';
import { Column, Entity, PrimaryGeneratedColumn } from 'typeorm';

@Entity()
export class Cat extends BaseEntity {
  @PrimaryGeneratedColumn()
  idx: number;

  @Column()
  name: string;
}

BaseEntity를 정의해서 Cat Entity에서 extends했습니다.

이제 CatsService에서 CatsRepository를 사용해서 soft delete를 할 수 있습니다.

async softDelete(idx: number) {
    return this.catsRepository.softDelete(idx);
  }

내부 원리

TypeORM logging 기능을 켜서 실제로 어떤 쿼리문이 실행되는지 알아봅시다.

query: SELECT `Cat`.`createdDate` AS `Cat_createdDate`, `Cat`.`modifiedDate` AS `Cat_modifiedDate`, `Cat`.`deletedDate` AS `Cat_deletedDate`, `Cat`.`idx` AS `Cat_idx`, `Cat`.`name` AS `Cat_name` FROM `cat` `Cat` WHERE `Cat`.`deletedDate` IS NULL

이게 조회를 했을 때 쿼리문입니다. 따로 Where절을 넣지않았음에도 deletedDate를 체크하는 모습입니다.

query: UPDATE `cat` SET `deletedDate` = CURRENT_TIMESTAMP, `modifiedDate` = CURRENT_TIMESTAMP WHERE `idx` IN (?) -- PARAMETERS: [3]

이게 soft delete를 했을 때 쿼리문입니다. deleteDate 컬럼에 현재 TimeStamp를 넣는것을 볼 수 있습니다.

데이터 복구

soft delete 처리된 데이터들을 쉽게 복구시킬 수 있는 메서드가 제공됩니다.
```
async restore(idx: number) {
    return this.catsRepository.restore({ idx });
  }
```
restore 메서드를 통해서 soft delete 처리된 row 데이터를 복구시킬 수 있습니다.
```
query: UPDATE `cat` SET `deletedDate` = NULL, `modifiedDate` = CURRENT_TIMESTAMP WHERE `idx` = ? -- PARAMETERS: [3]
```
restore 메서드를 실행했을 때의 쿼리문입니다. deletedDate를 null처리 하는걸 볼 수 있습니다.

Soft Delete 처리된 데이터 함께 조회하기

find 옵션에서 withDeleted 옵션 true로 세팅하면 TypeORM의 soft delete 기능을 써서 처리한 row 데이터들도 함께 조회합니다.
```
async findAllWithDeleted() {
    return this.catsRepository.find({ withDeleted: true });
  }
```
```
query: SELECT `Cat`.`createdDate` AS `Cat_createdDate`, `Cat`.`modifiedDate` AS `Cat_modifiedDate`, `Cat`.`deletedDate` AS `Cat_deletedDate`, `Cat`.`idx` AS `Cat_idx`, `Cat`.`name` AS `Cat_name` FROM `cat` `Cat`
```
withDeleted옵션을 썼을 때 deletedDate컬럼을 체크하는 where 절이 사라진 것을 볼 수 있습니다.

[자바스크립트 필기] #24 - 비동기 프로그래밍이란?

SpaceCowboy — Sun, 22 Aug 2021 02:32:55 +0900

*이 필기는 웹 프로그래밍 튜토리얼에서 보고 작성합니다.

1. 동기 처리와 비동기 처리

함수를 실행할 때 보통 실행 컨텍스트 스택에 올라가고 함수 코드들이 실행된다. 그리고 함수가 끝나고 나서 이 스택에 올라간 함수가 팝되어 제거된다.

이 처럼 실행 컨텍스트 스택에 함수 실행 컨텍스트가 푸시되는 것은 함수 실행의 시작을 알리는 것이다. 그래서 함수의 실행 순서는 스택을 통해 관리되는데 문제는 이 스택이 하나밖에 없어서 2개 이상의 함수를 동시에 실행할 수 없다.

무조건 실행 컨텍스트 스택에 실행중인 함수가 끝나야 다음 함수가 실행될 수 있다.

자바스크립트 엔진은 이 처럼 한 번에 하나의 테스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다. 그래서 처리에 시간이 걸리는 태스크를 실행한다면 다음에 실행시켜야 하는 함수로 넘어갈 수 없어서 블로킹(작업 중단)된다.

다음 예제를 보자

// sleep 함수는 일정 시간 뒤에 func 함수를 실행한다. 
function sleep(func, delay) {
    const delayUntil = Date.now() + delay;
    while (Date.now() < delayUntil);

    // 일정 시간이 지나고 나서 콜백 함수를 호출한다. 
    func();
}

function foo() {
    console.log('foo');
}

function bar() {
    console.log('bar');
}

// sleep 함수는 3초 이상 실행된다. 
sleep(foo, 3 * 1000);
// sleep 함수가 스택에서 팝되어야 하므로 3초 이상 블록킹 된다. 
bar();
// (3초 경과 후) foo -> bar 호출

setTimeout 함수와 비슷하게 일정 시간이 지나면 함수를 호출하는 sleep 함수이다. 여기에서 3초가 지나면 foo 함수를 호출한다. foo함수와 sleep 함수가 스택에서 팝될때까지 bar함수는 3초 이상 호출되지 못하고 블로킹된다.

이렇게 현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식을 동기 처리라고 한다.

장점은 실행 순서가 보장된다는 것이고

단점은 앞선 태스크가 종료될 때가지 이후 태스크들이 블로킹된다는 것이다.

다음은 위 예제를 setTimeout으로 변형한 것이다.

function foo() {
    console.log('foo');
}

function bar() {
    console.log('bar');
}

// 타이머 함수 setTimeout은 bar함수를 블로킹하지 않는다. 
setTimeout(foo, 3 * 1000);
bar();
// bar호출 -> (3초 후에)foo호출

setTimeout 함수는 앞의 sleep 함수와 비슷하게 일정 시간 뒤에 콜백 함수를 호출하지만

setTimeout 함수 이후의 태스크들은 블로킹하지 않고 곧바로 실행한다. 이처럼 현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식을 비동기 처리라 한다.

장점으로는 실행 중인 태스크가 종료되지 않아도 다음 태스크들을 실행할 수 있다는 것이 있다.

단점으로는 태스크의 실행 순서가 보장되지 않는다.

비동기 처리를 하는 함수의 예로는, 타이머 함수인 setTimeout / setInterval 함수 | HTTP 요청 | 이벤트 핸들러 등이 있다.

여기까지 입니다 - 틀린 점이 있다면 꼭 지적해주세요!

[자바스크립트 필기] #23 - 타이머

SpaceCowboy — Sun, 22 Aug 2021 01:42:05 +0900

*이 필기는 웹 프로그래밍 튜토리얼에서 보고 작성합니다.

1. 호출 스케줄링

일정시간이 지나고 나서 함수가 호출되도록 하려면 타이머 함수를 사용해야한다. 이를 호출 스케줄링이라 한다.

자바스크립트에서는 타이머를 생성할 수 있는 setTimeout과 setInterval, 타이머를 제거할 수 있는 clearTimeout과 clearInterval을 제공한다.

여기서 setTimeout과 setInterval은 비동기 처리방식으로 동작한다.

2. 타이머 함수

setTimeout / clearTimeout

setTimeout 함수는 ms단위로 받은 두번째 인수의 시간으로 첫번째 함수를 단 한번 실행하는 타이머를 생성한다.

첫 번째 매개변수 : 타이머가 만료된 뒤 호출될 콜백 함수
두 번째 매개변수 : 타이머 만료 시간(밀리초(ms) 단위)
세 번째 매개변수 : 콜백 함수에 전달해야 할 인수가 있으면 세 번째 인수를 통해 전달할 수 있다.

// 1초(1000ms) 후 타이머가 만료되면 콜백 함수가 호출된다. 
setTimeout(() => console.log('Hi!'), 1000);

// 1초(1000ms) 후 타이머가 만료되면 콜백 함수가 호출된다. 
setTimeout(name => console.log(`Hi! ${name}`), 1000, 'Lee');

// 두 번째 인수를 생략하면 기본값 0이 지정된다. 
setTimeout(() => console.log('Hello!'));

setTimeout 함수는 생성된 타이머를 식별할 수 있는 고유한 타이머 id를 반환한다. 이것을 clearTimeout 함수에 전달해서 타이머를 취소할 수 있다.

const timerId = setTimeout(() => console.log('Hi!'), 1000);

clearTimeout(timerId);

setInterval / clearInterval

setInterval 함수도 setTimeout 함수와 거의 비슷하다. 다만 setInterval 함수는 계속해서 반복 동작하는 타이머를 생성한다. 반환된 타이머 id를 통해 clearInterval 함수로 타이머를 취소시킬 수 있다.

let count = 1;

// 1초 후 타이머가 만료될 때마다 콜백 함수가 호출된다. 
// setInterval 함수는 생성된 타이머를 식별할 수 있는 고유한 타이머 id를 반환한다. 
const timeoutId = setInterval(() => {
    console.log(count); // 1 2 3 4 5
    // count가 5이면 setInterval 함수가 반환한 타이머 id를 clearInterval 함수에 전달해서 
    // 타이머를 취소할 수 있다. 
    if(count++ === 5) clearInterval(timeoutId);
}, 1000);

여기까지 입니다 - 틀린 점이 있다면 꼭 지적해주세요!

[자바스크립트 필기] #22 - 이벤트

SpaceCowboy — Wed, 18 Aug 2021 23:42:26 +0900

*이 필기는 웹 프로그래밍 튜토리얼에서 보고 작성합니다.

1. 이벤트 드리븐 프로그래밍

브라우저는 처리해야할 특정 사건(클릭, 스크롤 등)이 발생했을 때 이를 감지해 이벤트를 발생시킨다. 이러한 이벤트에 대응해서 호출하고 싶은 함수가 있을 것이다. 이런 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러라고 한다. 그리고 브라우저에게 이벤트 핸들러가 호출될 수 있게 하는것을 이벤트 핸들러 등록이라고 한다.

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <button>Click me!</button>
    <script>
        const $button = document.querySelector('button');

        // 사용자가 버튼을 클릭하면 함수를 호출하도록 요청 
        $button.onclick = () => { alert('button click'); };
    </script>
</body>
</html>

위에서 보았듯이, 이벤트 핸들러 프로퍼티에 함수를 할당하면 해당 이벤트가 발생했을 때 할당한 함수가 호출된다.

이와 같이 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식을 이벤트 드리븐 프로그래밍이라 한다.

2. 이벤트 타입

이벤트 타입은 이벤트의 종류를 나타내는 문자열이다. 에를 들어, 이벤트 타입 'click'은 사용자가 마우스 버튼을 클릭했을 때 발생하는 이벤트를 나타낸다.

다음은 다양한 이벤트들을 기록해놓은 사이트이다.

https://developer.mozilla.org/ko/docs/Web/Events

이벤트 참조 | MDN

DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가

developer.mozilla.org

3. 이벤트 핸들러 등록

특정 이벤트가 발생했을 때 브라우저에 의해 호출되는 함수가 이벤트 핸들러이다. 브라우저에게 호출을 위임하는 것을 이벤트 핸들러 등록이라고 하는데 방법이 총 3가지가 있다고 한다.

이벤트 핸들러 어트리뷰트 방식

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <button onclick="sayHi('Lee')">Click me!</button>
    <script>
        function sayHi(name) {
            console.log(`Hi! ${name}`);
        }
    </script>
</body>
</html>

HTML과 자바스크립트는 분리되어 있는게 좋기 때문에 권장되는 방법은 아니다.

이벤트 핸들러 프로퍼티 방식

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <button>Click me!</button>
    <script>
        const $button = document.querySelector('button');

        // 이벤트 핸들러 프로퍼티에 이벤트 핸들러를 바인딩 
        $button.onclick = function () {
            console.log('button click');
        };
    </script>
</body>
</html>

이벤트를 발생시킬 객체인 이벤트 객체 - 버튼 요소

이벤트의 종류를 나타내는 문자열인 이벤트 타입 - 'click'

이벤트 핸들러 - handleClick 함수

이벤트 핸들러 프로퍼티에 하나의 이벤트 핸들러만 바인딩할 수 있다는 단점이 있다.

addEventListenter 메서드 방식

EventTarget.prototype.addEventListener 메서드를 사용하여 이벤트 핸들러를 등록할 수 있다.

첫 번째 매개변수에는 이벤트의 종류를 나타내는 이벤트 타입을 전달한다. 위와는 다르게 접두사 'on'을 붙이지 않는다.

두 번째 매개변수에는 이벤트 핸들러를 전달한다.

마지막 매개변수에는 이벤트 전파 단계를 지정한다. 생략하거나 false의 경우에는 버블링 단계에서 캐치하고 true의 경우에는 캡처링 단계에서 캐치한다.

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <button>Click me!</button>
    <script>
        const $button = document.querySelector('button');

        $button.addEventListener('click', function () {
            console.log('button click');
        });
    </script>
</body>
</html>

4. 이벤트 핸들러 제거

addEventListener 메서드로 등록한 이벤트 핸들러를 제거하려면 EventTarget.prototype.removeEventListener 메서드를 사용한다. 전달한 인수가 동일해야 제거된다.

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <button>Click me!</button>
    <script>
        const $button = document.querySelector('button');

        const handleClick = () => console.log('button click');

        // 이벤트 핸들러 등록 
        $button.addEventListener('click', handleClick);

        // 이벤트 핸들러 제거 
        // addEventListener 메서드에 전달한 인수와 removeEventListener 메서드에 
        // 전달한 인수가 일치하지 않으면 이벤트 핸들러가 제거되지 않는다. 
        $button.removeEventListener('click', handleClick, true); // 실패 
        $button.removeEventListener('click', handleClick); // 성공 
    </script>
</body>
</html>

5. 이벤트 객체

이벤트가 발생하면 이벤트에 관련된 다양한 정보를 담고 있는 이벤트 객체가 동적으로 생성된다. 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달된다.

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <p>클릭하시오. 클릭한 곳의 좌표가 표시됩니다.</p>
    <em class="message"></em>
    <script>
        const $msg = document.querySelector('.message');

        // 클릭 이벤트에 의해 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달한다. 
        function showCoords(e) {
            $msg.textContent = `X: ${e.clientX}, Y: ${e.clientY}`;
        }

        document.onclick = showCoords;
    </script>
</body>
</html>

클릭 이벤트에 의해 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달되어 매개변수 e에 암묵적으로 할당된다. 브라우저가 이벤트 핸들러를 호출할 때 이벤트 객체를 인수로 전달하기 때문이다.
따라서 이벤트 객체를 받을 매개변수를 따로 선언해줘야한다.
이름은 다른거로 사용해도 상관없다.

이벤트 객체의 공통 프로퍼티

https://developer.mozilla.org/ko/docs/Web/API/Event

Event - Web API | MDN

Event 인터페이스는 DOM 내에 위치한 이벤트를 나타냅니다.

developer.mozilla.org

마우스 정보 취득

https://developer.mozilla.org/ko/docs/Web/API/MouseEvent

MouseEvent - Web API | MDN

MouseEvent 인터페이스는 특정 지점을 가리키는 장치를 통해 발생하는 이벤트를 의미한다 (마우스 등). 주로 사용되는 이벤트로는 click, dblclick (en-US), mouseup (en-US), mousedown (en-US)가 있다.

developer.mozilla.org

키보드 정보 취득

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent

KeyboardEvent - Web APIs | MDN

KeyboardEvent objects describe a user interaction with the keyboard; each event describes a single interaction between the user and a key (or combination of a key with modifier keys) on the keyboard.

developer.mozilla.org

6. DOM 요소의 기본 동작 조작

DOM 요소의 기본 동작 중단

a요소를 클릭하면 href에 지정된 링크로 이동하고, checkbox 또는 radio 요소를 클릭하면 체크 또는 해제된다.

이벤트 객체의 preventDefault 메서드는 이러한 DOM 요소의 기본 동작을 중단시킨다.

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <a href="https://www.google.com/"></a>
    <script>
        document.querySelector('a').onclick = e => {
            // a 요소의 기본 동작을 중단한다. 
            e.preventDefault();
        };
    </script>
</body>
</html>

이벤트 전파 방지

이벤트 객체의 stopPropagation 메서드는 이벤트 전파를 중단시킨다.

여기까지 입니다 - 틀린 점이 있다면 꼭 지적해주세요!

공부한거 기록하는 블로그

객체지향 기초 개념 정리

객체란?

객체지향프로그래밍이란?

객체지향의 특징

자바스크립트 자주 쓰는 메서드 정리

Nest.js에서 TypeORM Configuration 하는 방법

참고

개요

일단 환경변수 설정하기 feat. ConfigModule

ConfigService를 통해 TypeORM Configuration 하기

TypeORM 0.3에서 Seeding 하기

Seeder란?

TypeORM Seeding 셋업 및 실행

랜덤 데이터 삽입하기 feat. Faker, Factory

그 외

TypeORM 0.3에서 migration 해보기

Migration

migration이란?

migration을 위한 셋업

migration 해보기

migration 파일 생성할 때 create vs generate

migration 파일 위치 src vs dist 비교

TypeORM에서 Custom Repository 쓰기

TypeORM에서 Soft Delete 써보기

[자바스크립트 필기] #24 - 비동기 프로그래밍이란?

[자바스크립트 필기] #23 - 타이머

[자바스크립트 필기] #22 - 이벤트

일단 환경변수 설정하기 feat. `ConfigModule`