코드 기어 Code Gear - 개발 강좌

Nestjs에서 e2e 테스트 수행에는 성공했지만 다음과 같은 메시지가 나오면서 테스트가 종료되지 않는 문제가 발생했습니다.

Jest did not exit one second after the test run has completed.
'This usually means that there are asynchronous operations 
that weren't stopped in your tests. 
Consider running Jest with `--detectOpenHandles` to troubleshoot this issue.

오류 메시지에 친절하게도 --detectOpenHandles를 사용하라고 나옵니다.

이 옵션을 추가해서 실행해 보았습니다.

에러 메시지는 사라졌지만 여전히 커서가 깜빡이면서 종료가 되지 않습니다.

이때 추가적으로 --forceExit 옵션을 사용하면 테스트 완료 후 정상적으로 종료가 됩니다.

npm test:e2e --detectOpenHandles --forceExit

https://youtu.be/k7UtpY7uqDE

Application을 개발시 여러개의 DB에 접속하여 데이터를 핸들링 해야 하는 경우가 있습니다.
Nestjs에서는 TypeORM의 Multiple Connection을 이용하여 이러한 구현이 가능합니다.

예제에서는 다음과 같이 두개의 database를 사용합니다.

• Database #1 : cat
• Database #2 : slider

Table 정보

사용하는 테이블 생성 정보는 다음과 같습니다.

cat

CREATE TABLE `cat` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL COMMENT '고양이 이름',
  `age` int(11) NOT NULL COMMENT '고양이 나이',
  `breed` varchar(255) NOT NULL COMMENT '고양이 종류',
  PRIMARY KEY (`id`)
);

slider

CREATE TABLE `slider` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `image_url` varchar(200) NOT NULL,
  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `updated_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
);

프로젝트 생성

아래와 같이 프로젝트를 생성합니다.

nest new multi-connection

폴더로 이동 후 Visual Studio Code를 실행합니다.

cd multi-connection
code .

패키지 설치

아래와 같이 TypeORM 패키지를 설치합니다.

yarn add @nestjs/typeorm typeorm mysql2

첫번째 database 연결하기

ORM 설정파일

프로젝트에 orm 환경 설정 파일을 만듭니다.

• 소스 폴더 : src/config/orm.config.ts

import { TypeOrmModuleOptions } from "@nestjs/typeorm";

function ormConfig(): TypeOrmModuleOptions {
    return {
        name: 'default',
        type: 'mysql',
        database: 'cat',
        host: 'localhost',
        port: Number(13306),
        username: 'cat',
        password: 'cat',
        logging: (process.env.NODE_ENV === 'local'),
        synchronize: true,
        entities: [__dirname + '/domain/*.entity.{ts,js}'],
        migrations: [__dirname + '/migrations/**/*.{ts,js}'],
        migrationsRun: false,
    };
}
function ormConfigSlider(): TypeOrmModuleOptions {
    return {
        name: 'sliderConnection',
        type: 'mysql',
        database: 'slider',
        host: 'localhost',
        port: Number(13306),
        username: 'slider',
        password: 'slider',
        logging: (process.env.NODE_ENV === 'local'),
        synchronize: true,
        entities: [__dirname + '/domain/*.entity.{ts,js}'],
        migrations: [__dirname + '/migrations/**/*.{ts,js}'],
        migrationsRun: true,
    };
}
export { ormConfig, ormConfigSlider };

orm config import 하기

app.module.ts 에 orm config를 import 합니다.

import { ormConfig } from './config/orm.config';

imports: [
    TypeOrmModule.forRootAsync({
      useFactory: ormConfig
    }),
    TypeOrmModule.forRootAsync({
      name: 'sliderConnection',
      useFactory: ormConfigSlider
    })
  ],

Entity 생성

typeorm-model-generator를 사용해서 테이블에 있는 cat, slider entity를 생성합니다.

사용법은 아래 포스트에서 확인하실 수 있습니다.
https://codegear.tistory.com/122

typeorm-model-generator -h localhost -d cat -p 13306 -u cat -x cat -e mysql -o ./gen_models
typeorm-model-generator -h localhost -d slider -p 13306 -u slider -x slider -e mysql -o ./gen_models

gen_models 폴더에 생성된 entity 파일을 domain 폴더로 복사합니다.

파일 이름을 아래와 같이 변경합니다.(ormConfig에서 설정한 파일명 형식)

Cat.ts -> Cat.entity.ts
Slider.ts -> Slider.entity.ts

Module에 Entity 선언하기

app.module.ts의 import 아래에 다음을 추가합니다.

(TypeOrmModule.forRootAsync 아래에 추가하면 됩니다)

TypeOrmModule.forFeature([Cat]),
TypeOrmModule.forFeature([Slider], 'sliderConnection')

Cat & Slider 데이터 조회하기

app.controller.ts에 다음을 추가합니다.

@Get('/cats')
async getCats(){
  return await this.appService.getCats();
}

@Get('/sliders')
async getSliders(){
  return await this.appService.getSliders();
}

app.service.ts에 다음을 추가합니다. (getCats, getSliders)

import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { Cat } from './domain/Cat.entity';
import { Slider } from './domain/Slider.entity';

@Injectable()
export class AppService {
  constructor(
    @InjectRepository(Cat)
    private catRepository: Repository<Cat>,
    @InjectRepository(Slider, 'sliderConnection')
    private sliderRepository: Repository<Slider>
  ){}
  
  getHello(): string {
    return 'Hello World!';
  }
  async getCats() {
    return await this.catRepository.find(); 
  }
  async getSliders() {
    return await this.sliderRepository.find();
  }
}

브라우저에서 다음을 각각 호출합니다.

http://localhost:3000/cats
http://localhost:3000/sliders

결과는 다음과 같습니다.

[
   {
      "id":1,
      "name":"kitty",
      "age":1,
      "breed":"cyprus"
   },
   {
      "id":2,
      "name":"pitty",
      "age":2,
      "breed":"percian"
   }
]

[
   {
      "id":1,
      "imageUrl":"https://..../images/test.jpg",
      "createdAt":"2024-08-19T14:08:20.000Z",
      "updatedAt":"2024-08-19T14:08:20.000Z"
   }
]

이상으로 Nestjs에서 TypeORM을 사용해서 여러개의 DB를 사용하는 방법에 대해 알아보았습니다.

https://youtu.be/KwqP314OpxQ

TypeORM 사용시 Entity 파일을 자동으로 생성해주는 tool이 있습니다.
바로 typeorm-model-generator 입니다.

이 tool을 사용하면 테이블을 참조하여 손쉽게 entity 파일을 만들 수 있습니다.

typeorm-model-generator에 대한 자세한 설명은 아래 링크에서 확인하실 수 있습니다.

https://www.npmjs.com/package/typeorm-model-generator

typeorm-model-generator는 아래와 같이 여러 db engine을 지원합니다.

• Microsoft SQL Server
• PostgreSQL
• MySQL
• MariaDB
• Oracle Database
• SQLite

우선 typeorm-model-generator를 설치합니다.

npm i -g typeorm-model-generator

사용법은 다음과 같습니다.

Usage: typeorm-model-generator -h <host> -d <database> -p [port] -u <user> -x
[password] -e [engine]

Options:
  --help                 Show help                                     [boolean]
  --version              Show version number                           [boolean]
  -h, --host             IP address/Hostname for database server
                                                          [default: "127.0.0.1"]
  -d, --database         Database name(or path for sqlite)            [required]
  -u, --user             Username for database server
  -x, --pass             Password for database server              [default: ""]
  -p, --port             Port number for database server
  -e, --engine           Database engine
          [choices: "mssql", "postgres", "mysql", "mariadb", "oracle", "sqlite"]
                                                              [default: "mssql"]
  -o, --output           Where to place generated models
                            [default: "./output"]
  -s, --schema           Schema name to create model from. Only for mssql
                         and postgres. You can pass multiple values
                         separated by comma eg. -s scheme1,scheme2,scheme3
  --ssl                                               [boolean] [default: false]

예를 들면 다음과 같습니다.

typeorm-model-generator -h localhost -d test -p 3306 -u root -x root -e mysql -o ./generated_models

옵션 사용법은 다음과 같습니다.

• -h : 테이터베이스 호스트 IP (localhost)
• -d : 데이터베이스 이름 (test)
• -p : 데이터베이스 포트 (3306)
• -u : 데이터베이스 username (root)
• -x : 데이터베이스 password (root)
• -e : 데이터베이스 engine (mysql)
• 마지막은 파일 생성위치입니다(./generated_models)

실행하면 아래와 같이 entity 파일이 생성 됩니다.

• 폴더 : generated_models/entities/Cat.ts

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

@Entity("cat", { schema: "test" })
export class Cat {
  @PrimaryGeneratedColumn({ type: "int", name: "id" })
  id: number;

  @Column("varchar", { name: "name", comment: "고양이 이름", length: 255 })
  name: string;

  @Column("int", { name: "age", comment: "고양이 나이" })
  age: number;

  @Column("varchar", { name: "breed", comment: "고양이 종류", length: 255 })
  breed: string;
}

typeorm-model-generator를 사용해 좀 더 빠르고 편한 개발 생활 되시길 바랍니다. 

Repository는 Entity에 대한 CRUD를 추상화한 객체입니다.

여기서 추상화라고 하면,
사용이 복잡한 것들을 핵심적인 기능만 간추려서 사용하기 쉽게 만든 것을 의미합니다.

예를 들면,

고양이의 정보를 Database에 저장하기 위해서는 다음과 같은 SQL을 사용합니다.

insert into cat(name, age, breed)
values('꼼지', 5, '스코티시폴드');

이것을 Repository 패턴으로 표현하면 다음과 같습니다.

const cat = new CreateCatDto();
cat.name = '꼼지';
cat.age = 5;
cat.breed = '스코티시폴더';
catRepository.save(cat);

SQL을 잘 아는 사람 입장에서는 쿼리를 사용하는 것이 훨씬 가독성이 좋습니다.

하지만 SQL을 잘 모르는 사람도 코딩 방법만 알면 쉽게 Database 핸들링이 가능해집니다.

Repository 패턴을 보시면 쿼리를 객체로 만들어서 사용하고 있는 것을 알 수 있습니다.

이렇듯 Repository 패턴은 좀 더 프로그래밍에 가깝게 쿼리를 사용할 수 있게 만든 것입니다.

쿼리를 잘 모르거나 간단한 쿼리를 사용하고자 할 경우에는 정말 쉽게 사용을 할 수 있습니다.

Nestjs의 API를 PUT, POST 등으로 호출할 경우에 보통 Json 형식을 사용하게 됩니다.

이때 json의 용량이 커지게 되면 다음과 같은 문제가 발생합니다.

Nestjs의 오류 메시지는 다음과 같습니다.

이 문제를 해결하는 방법은 main.ts에 다음과 같은 내용을 추가하시면 됩니다.
(app.listen 위에 추가하면 됩니다)

import { json } from 'body-parser';

app.use(json({ limit: '50mb' }));
await app.listen(port);

이 문제의 해결법은 kamilmysliwiec 가 github에서 답변한 내용에서 가져왔습니다.

https://github.com/nestjs/nest/issues/529#issuecomment-376576929

이 글은 TypeORM의 기본적인 사용법에 대해 설명합니다.

다음은 이 글을 설명한 유튜브 영상입니다.

https://youtu.be/IfcnR7TtbCw

목차

• table 생성
• 소스 생성
• 사용법

테이블 생성

다음과 같이 cats table을 생성합니다.

create table cat
(
    id    int auto_increment
        primary key,
    name  varchar(255) not null comment '고양이 이름',
    age   int          not null comment '고양이 나이',
    breed varchar(255) not null comment '고양이 종류'
);

소스 생성

• Nestjs의 Generator(소스 자동 생성)를 사용하여 cats module을 생성합니다.

nest g resource cats

• resource 옵션은 module, controller, service, entities, dto를 한 번에 자동으로 생성합니다.

Entity 객체 생성

• domain/cats.entity.ts

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

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

    @Column()
    name: string;

    @Column()
    age: number;

    @Column()
    breed: string;
}

DTO 수정

• cats/dto/create-cat.dto.ts 를 다음과 같이 만듭니다.

export class CreateCatDto {
    name: string;
    age: number;
    breed: string;
}

모듈에 Entity 임포트

• cats/cats.module.ts에 cats.entity를 임포트 해주어야 사용할 수 있습니다.

import { Module } from '@nestjs/common';
import { CatsService } from './cats.service';
import { CatsController } from './cats.controller';
import { TypeOrmModule } from '@nestjs/typeorm';
import { Cat } from 'src/domain/cat.entity';

@Module({
  imports: [TypeOrmModule.forFeature([Cat])],
  controllers: [CatsController],
  providers: [CatsService]
})
export class CatsModule {}

서비스에서 Repository 사용하기

cats service에서 constructor에 repository를 주입합니다.

• cats/cats.service.ts

constructor(
  @InjectRepository(Cat)
  private catRepository: Repository<Cat>
){}

• cats/cats.service.ts를 다음과 같이 수정합니다.

async create(createCatDto: CreateCatDto) {
  return await this.catRepository.save(createCatDto);
}

async findOne(id: number) {
  return await this.catRepository.findOne({where: {id}});
}

async update(id: number, updateCatDto: UpdateCatDto) {
  const cat = await this.findOne(id);
  if(!cat){
    throw new Error('cat not found');
  }
  Object.assign(cat, updateCatDto);
  return await this.catRepository.save(cat);
}

async remove(id: number) {
  const cat = await this.findOne(id);
  if(!cat){
    throw new Error('cat not found');
  }
  return await this.catRepository.remove(cat);
}

테스트

포스트맨을 사용하여 테스트를 합니다.

• 생성
  • POST http://localhost:3000/cats
  • Data는 다음과 같습니다.

{
    "name": "엄지",
    "age": 7,
    "breed": "스코티시폴드"
}

• 전체 목록 조회
  • GET http://localhost:3000/cats

• 아이디로 조회
  • GET http://localhost:3000/cats/1

• 업데이트
  • PATCH http://localhost:3000/cats/1
  • Data

{
    "name": "엄지양이",
    "age": 5,
    "breed": "스코티시폴드"
}

•  삭제
  • DELETE http://localhost:3000/cats/2

이상으로 TypeORM에서 CRUD를 사용하는 방법에 대해서 알아보았습니다.

이 글은 TypeORM의 기본적인 개념에 대해 설명하고, 샘플 소스를 통해 TypeORM의 기본적인 사용법에 대해 설명합니다.

이 글의 동영상 강의를 보고 싶으시면 아래를 클릭하세요.

https://youtu.be/yzsN620ZYpw

목차

• ORM(TypeORM) 개념
• ORM(TypeORM)의 장단점
• TypeORM 셋팅하기

ORM(TypeORM) 개념

• TypeORM = "Typescript + ORM"을 의미합니다. 즉, typescript에서 orm을 사용할 수 있도록 만든 프레임워크입니다.
• ORM은 Object-Relational Mapping의 약자입니다. 
• Object = 객체지향언어에서 말하는 객체(Object)를 의미합니다.
• Relational =  관계형 데이터베이스(Relational Database)를 의미합니다.
• 즉, 객체와 관계형 데이터베이스를 자동으로 맵핑 시켜주는 기술을 ORM이라고 합니다.
• ORM을 사용하면 DB의 종류에 상관없이 코딩을 할 수 있습니다. 즉, MySQL, PostgreSQL, Oracle등 어떤 Database를 사용하더라도 동일 코드로 작성하여 사용할 수 있도록 만들어진 프레임워크입니다.
• 결론 : TypeORM은 Typescript에서 사용하는 ORM 프레임워크입니다.

ORM(TypeORM)의 장단점

• Database의 쿼리문을 사용하는 대신, 기존과 유사한 방식으로 코드를 작성하므로 사용이 편리하다.
• 독립적인 코드를 사용하므로 재사용성이 증가한다.
• DBMS에 종속적인 쿼리를 사용하지 않으므로, DB 변경이 용이하다.
• 테이블간의 관계가 복잡해지고 쿼리가 복잡해질 수록 구현이 어렵다.
• 쿼리를 많이 사용해본 사람일 경우, 쿼리를 사용했을때 보다 직관성이 떨어진다.

TypeORM 셋팅하기

• Nestjs 프로젝트를 만듭니다.

nest new typeorm2023

• TypeORM 관련 패키지를 설치합니다.

npm install --save @nestjs/typeorm typeorm mysql2

• root 폴더에 orm.config.ts를 만들고 다음과 같이 추가합니다.

import { TypeOrmModuleOptions } from "@nestjs/typeorm";

function ormConfig(): TypeOrmModuleOptions {
    const commonConf = {
        SYNCRONIZE: false,
        ENTITIES: [__dirname + '/domain/*{.ts,.js}'],
        MIGRATIONS: [__dirname + '/migrations/**/*{.ts,.js}'],
        MIGRATIONS_RUN: false,
    };

    return {
        name: 'default',
        type: 'mysql',
        database: 'test',
        host: 'localhost',
        port: Number(3306),
        username: 'root',
        password: 'root',
        logging: true,
        synchronize: commonConf.SYNCRONIZE,
        entities: commonConf.ENTITIES,
        migrations: commonConf.MIGRATIONS,
        migrationsRun: commonConf.MIGRATIONS_RUN,
    };
}

export { ormConfig };

• 세부사항들을 설명하면 다음과 같습니다.
  • SYNCRONIZE는 객체와 테이블을 동기화 할때 사용합니다. 즉, 객체가 변경되면 테이블에 자동 반영이 되고, 테이블이 변경되면 객체가 자동 변경되는 기능입니다. 이 기능을 운영서버에서 사용할 때는 주의가 필요합니다. 운영중인 데이터는 용량이 크고, 이런 변화가 있을 경우 문제가 생길 수 있으므로, 만약의 사고를 예방하기 위해서는 이 기능을 "false"로 설정하는 것이 좋습니다.
  • ENTITIES는 객체가 위치하는 폴더를 의미합니다. 즉, 테이블의 schema를 객체로 만들어 저장하는 파일들이 위치하는 곳입니다.

셋팅이 완료되면 다음과 같이 최상위 모듈에 ormConfig를 추가해 줌으로써 사용이 가능하게 됩니다.

• app.module.ts에 ormConfig를 추가합니다.

import { ormConfig } from './orm.config';
@Module({
  imports: [
    TypeOrmModule.forRootAsync({ useFactory: ormConfig }),
    ...
  ],
  ...
})

다음은 TypeORM 기초 사용법에 대해 알아보도록 하겠습니다.

이 글은 NestJS 프로젝트에서 OpenAI의 API를 이용하는 방법에 대해 설명합니다.

다음은 이 글의 유튜브 강의 입니다.

https://youtu.be/2DRxtCwjFtE

순서

- OpenAI API Key 생성

- Nestjs 프로젝트 생성

- OpenAI 패키지 설치

- 프로그램 개발

- 테스트

OpenAI API 키 생성하기

- OpenAI 사이트에서 회원 가입을 합니다.

https://platform.openai.com/

- 우측 상단의 계정 아이콘을 클릭하고, 메뉴에서 View API Key를 선택합니다.

- "+ Create new Secret key"를 클릭하여 새로운 키를 생성합니다.

- API 사용법은 사이트 상단의 "API Reference" 메뉴에 자세히 나와 있으니 참고하시기 바랍니다.

https://platform.openai.com/docs/api-reference/introduction

NestJS 프로젝트 생성

- 아래와 같이 프로젝트를 생성합니다.

nest new 프로젝트명

- Editor에서 프로젝트 열기를 하고 프로젝트를 선택합니다.

OpenAI 패키지 설치

Nestjs에서 OpenAI API를 사용하기 위해서는 "openai" 패키지를 설치해야합니다.

- 아래와 같이 패키지를 설치합니다.

npm install openai

프로그램 개발

app.service.ts를 다음과 같이 작성합니다.

- 아래와 같이 패키지를 import 하고 openai를 선언합니다.

import { Configuration, OpenAIApi } from "openai";
const configuration = new Configuration({
    organization: "org-xxxxxxxxxxxxxxxxxxxxxxxxxxx",
    apiKey: "sk-xxxxxxxxxxxxxxxxxxxxxxxxxxx",
});
const openai = new OpenAIApi(configuration);

- getHello()를 아래와 같이 작성합니다.

async getHello() {
    const response = await openai.createCompletion({
      model: "text-davinci-003",
      prompt: ""나는 인공지능 AI Chatbot이야. 질문을 하면 내가 답변을 해줄께. 만약 모른다면 \"모름\"이라고 할께.\n\nQ: 한국인의 기대 수명은 얼마야?\nA:",
      temperature: 0,
      max_tokens: 100,
      top_p: 1,
      frequency_penalty: 0.0,
      presence_penalty: 0.0,
      stop: ["\n"],
    });
    return { result: response.data.choices[0].text };
  }

- 여기선 model로 text-davinci-003을 사용하였습니다.

- 모델의 종류를 보시려면 다음과 같이 api를 호출하면 됩니다.

const response = await openai.listModels();
return { result: response.data };

- 주로 많이 사용하는 모델은 gpt-3.5-turbo, text-davinch-003 입니다.

테스트

- 브라우저에서 다음 주소를 입력합니다.

http://localhost:3000/

아래와 같이 결과가 나옵니다.

다음은 이 글의 동영상 강좌입니다.

https://youtu.be/Dr4OXDLGsmI

Nestjs 프로젝트를 Docker화 하면 Application을 손쉽게 배포할 수 있습니다.

Docker가 설치된 서버에 docker로 빌드된 이미지만 업로드 하고 실행하면 됩니다.

github actions, aws pipeline등을 사용하면 모든 배포 단계를 자동화 할 수 있습니다.

이런 자동화를 통해 프로젝트의 생산성을 획기적으로 높일 수 있고,
개발자를 배포의 늪에서 해방 시켜 업무의 만족도를 높일 수 있습니다.

사전 설치 프로그램

우선 다음 프로그램을 설치합니다.

• Nodejs
• Docker
• Nestjs를 사용하기 위해 nest cli를 설치합니다.

npm i -g @nestjs/cli

프로젝트 생성 및 실행

Nestjs 프로젝트를 생성합니다.

nest new nest-docker

프로젝트를 실행합니다.

npm start

Dockerfile / .dockerignore 파일 작성

프로젝트 root 폴더에 "Dockerfile" 파일을 생성합니다.

• docker image 빌드시 사용하는 설계도입니다.

FROM node:18
RUN mkdir -p /var/app
WORKDIR /var/app
COPY . .
RUN npm install
RUN npm run build
EXPOSE 3000
CMD [ "node", "dist/main.js" ]

프로젝트 root 폴더에 ".dockerignore" 파일을 생성합니다.

• container에 불필요한 파일들이 복제되는 것을 막기 위한 용도입니다.

.git
*Dockerfile*
node_modules

Docker 이미지 생성

다음 명령으로 docker 이미지를 생성합니다.

docker build . -t nest-docker

Docker 실행

다음 명령으로 docker를 실행합니다.

docker container run -d -p 3000:3000 nest-docker

브라우저에서 확인해보기

브라우저에서 다음 url을 입력하여 확인합니다.

http://localhost:3000

다음과 같이 결과를 확인할 수 있습니다.

다음은 이 글의 동영상 강좌입니다.

https://youtu.be/yjhIxpR_-gE

연재 마지막 순서로 첫화면에 이미지 슬라이드를 같이 개발합니다.

우선 관리자에서 이미지를 5개 정도 업로드합니다.

이미지 슬라이드는 Bootstrap-vue의 Carousel 컴퍼넌트를 사용합니다. 

https://bootstrap-vue.org/docs/components/carousel

Carousel 소스를 복사하여 다음과 같이 수정합니다.

pages/index.vue

<template>
  <div>
    <b-carousel
      id="carousel-1"
      v-model="slide"
      :interval="4000"
      controls
      indicators
      background="#ababab"
      img-width="1024"
      img-height="480"
      style="text-shadow: 1px 1px 2px #333;"
      @sliding-start="onSlideStart"
      @sliding-end="onSlideEnd"
    >
      <!-- Text slides with image -->
      <div v-for="slider in sliders" v-bind:key="slider.id">
        <b-carousel-slide
          caption="First slide"
          text="Nulla vitae elit libero, a pharetra augue mollis interdum."
          :img-src="slider.imageUrl"
        ></b-carousel-slide>
      </div>
      
    </b-carousel>

    <p class="mt-4">
      Slide #: {{ slide }}<br>
      Sliding: {{ sliding }}
    </p>
  </div>
</template>
<script>
export default {
  name: 'IndexPage',
  data() {
    return {
      sliders: '',
      slide: 0,
      sliding: null
    }
  },
  computed: {
    accessToken() {
      return this.$store.state.accessToken;
    }
  },
  mounted() {
    this.getSliders();
  },
  methods: {
    async getSliders(){
      const options = {
          headers: {
              Authorization: `Bearer ${this.accessToken}`
          }
      }
      const path = '/slider';
      await this.$axios.get(
        path,
        options
      ).then(response=> {
        this.sliders = response.data;
        console.log(this.sliders);
      }).catch(error => {
        console.log(error);
      })
    },
    onSlideStart(slide) {
      this.sliding = true
    },
    onSlideEnd(slide) {
      this.sliding = false
    }
  }
}
</script>

서버를 실행하면 다음과 같이 화면이 스크롤 됩니다.

이렇게 해서 이미지 슬라이드가 완성되었습니다.

Vue와 Nestjs를 공부하시는 분들에게 도움이 되었으면 좋겠습니다.

수고하셨습니다^^