Thinker

[NestJS] create excel download by exceljs

생각하는로뎅 — Fri, 6 Dec 2024 23:00:38 +0900

1. exceljs 를 받는다.

npm install exceljs

2. controller 에 작성한다.

this is controller.ts

import { Res, Req, Get } from '@nestjs/common';
import * as ExcelJS from 'exceljs';

...

// 엑셀 다운로드
@Get('downloadExcel')
async downloadExcel(
  @Req() req : Request
, @Res() res : Response ) {

    const workbook = new ExcelJS.Workbook();
    const worksheet = workbook.addWorksheet('TestExportXLS');

    worksheet.columns = [
        { header: 'name', key: 'name' },
        { header: 'age', key: 'age' }
    ];

    worksheet.addRow({
        name: 'test Row',
        age: 37
    });

    const buffer = await workbook.xlsx.writeBuffer();
    res.header('Content-Disposition', 'attachment; filename=data.xlsx');
    res.type('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
    res.send(buffer);

}

3. html

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    .....

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    .....
    
</head>

<body>
...

	<button type="button" id="download_excel">엑셀다운로드</button>
...
</body>

<script>

// 엑셀 다운로드 버튼 클릭
$("#download_excel").click(function () {

    axios({
        method: "get",
        url: "/downloadExcel",
        responseType: "blob", 
    })
    .then((response) => {
        const url = window.URL.createObjectURL(
        new Blob([response.data])
        );
        const link = document.createElement("a");
        link.href = url;
        link.setAttribute("download", "data.xlsx"); 
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);
    })
    .catch((error) => {
    });

});
            
</script>

Nestjs export Excel file

The full stack explains export excel so easy, using nestjs, exceljs, axios

medium.com

[NestJS] read excel file With exceljs (DiskStorage)

생각하는로뎅 — Fri, 6 Dec 2024 03:17:43 +0900

NestJS 에서는 파일 업로드시 메모리에서 읽는 방식(MemoryStorage)
과 디스크에서 읽는 방식(DiskStorage) 으로 구성되어 있다.

아래 방법은 DiskStorage 를 사용했을때, 해당 경로에 있는 Excel 파일을 읽어서 출력해주는 방법이다.

1. npm 설치

npm install exceljs

2. 많은 예제를 참고하여 DiskStorage 으로 구성되어 있을 경우 file.path 를 이용하여 파일 경로를 읽어서 엑셀 파일 내용을 읽어 온다.

import { Cell, Row, Workbook } from 'exceljs';

...

  // 엑셀 업로드
  @Post('uploadExcel')
  @UseInterceptors(FileInterceptor('file'))
  async uploadExcel(
      @UploadedFile() file : Multer.file) {
    
    ...
    
      var workbook = new Workbook();
      await workbook.xlsx.readFile(file.path);
      var sheet = workbook.worksheets[0];

      // 1 ~ N ROW
      var rows : Row[] = sheet.getRows(1, sheet.rowCount);
      var cell : Cell;

      rows.forEach(row => {

        // 1 ~ N Cell
        row.eachCell((cell: Cell, colNumber: number)=>{

          Logger.debug("colNumber, cell value ", cell.value, colNumber);

        })

      });
  
  ....
 }

[NestJS] Image file download with Url

생각하는로뎅 — Fri, 6 Dec 2024 03:08:46 +0900

1. npn install

npm i --save @nestjs/axios axios

2.Model 에 HttpModule 추가

  import { HttpModule } from '@nestjs/axios';
  
  @Module({
 
  imports: [
    HttpModule
  ]

3. 다운로드를 구현할 Service 에서 아래 코드를 추가하여 다운로드

import { HttpService } from '@nestjs/axios';

@Injectable()
export class ApiService {
  constructor(
    , private readonly httpService : HttpService

...
..
async downLoadImage() {

    const writer = fs.createWriteStream('저장할 파일 경로');

    const response = await this.httpService.axiosRef({
        url: 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png',
        method: 'GET',
        responseType: 'stream',
    });

    response.data.pipe(writer);

    return new Promise((resolve, reject) => {
        writer.on('finish', resolve);
        writer.on('error', reject);
    });
    
    }

[NestJS] Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

생각하는로뎅 — Mon, 2 Dec 2024 21:00:32 +0900

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

1. 여러 원인이 있었지만, 공통적인 원인은 서버에서 같은 클라이언트에게 2번 이상 연속으로 응답을 전송하면 발생했다.

2. 필자 같은 경우는 아래와 같이 코딩 되어 있었다.

  @Get('/index')
  @Render('index')
  getAddminIndex(@Req() req : Request, @Res() res: Response) {

   	return res.redirect("/admin/login");

  }

3. 처음 위 코드만 봤을때 return 한번만 수행하므로 이상이 없어보였다.

4. 자세히 살펴보니 @Render('index') 부분에 한번 더 호출한다는 것을 알아냈다.

5. 그래서 아래처럼, @Render 을 쓰지 않고, 직접 호출하는 방식으로 작성하여 해결 되었다.

  @Get('/index')
  getAddminIndex(@Req() req : Request, @Res() res: Response) {

    if (해당 조건이면) {
       // 리다이렉트
       return res.redirect("/login");
    } else {
      // index 페이지 Render
      res.render('index');
    }
    
  }

[NestJS] Handlebars template in hbs(Handlebars)

생각하는로뎅 — Tue, 26 Nov 2024 02:11:54 +0900

Nest.js 에서 화면 그려주는 부분을 hbs(handlebars) 을 사용하였다.

동적으로 화면을 그려주기 위해서, template 를 찾다가, Handlebars.js 를 이용하면 Handlebars template 을 사용할 수 있다는 것을 알게 되었다.

1. 내 폴더 구조는 아래와 같았다.

  views
    ㄴindex.hbs

2. 서버에서 데이터를 받아서 hbs 의 문법을 사용하여 화면을 그렸다.

<html>
<head>
</head>
<body>
  	{{#each list}}
 		<span>{{this.comment}}</span>
	{{/each}}
</body>
</html>

3. 이제 동적으로 그려주기 위해서 Handlebars template 을 사용하기로 한다.

script 부분에 handlers.min.js 도 추가하고, jquery도 추가한다.

template 구분은 제일 아래에 위치해서 ajax 결과 반환 후 사용하도록 한다.

<html>
<head>
..
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.8/handlebars.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  	{{#each list}}
 		<span>{{this.comment}}</span>
	{{/each}}
    
    <ul class="ul_list">
    </ul>
</body>

...

      $(".classname").click(function () {
      
          $.ajax({
            type: 'POST',
            dataType: 'json',
            data: {
              "key": value
            },
            url: '/api/url',
            success: function (result) {
              var source   = $("#list-template").html();
              var template = Handlebars.compile(source);
              var html = template(result);
              $(".ul_list").html(html);
            }
          });
        
      });

...

<!-- hbs tamplate -->
<script id="list-template" type="text/x-handlebars-template">
	{{#each list}}
          <span>{{this.comment}}</span>
	{{/each}}
</script>
</html>

4. 음.. 여기까지 아주 좋았다. hbs 문법도 익숙해져서 template 작성하는 부분에 대해서는 막힘이 없었다.

그런데 왠 걸..

에러가 빵빵 터진다.

나는 분명 list 데이터를 넘겼지만

              var source   = $("#list-template").html();
              var template = Handlebars.compile(source);
              var html = template(result);
              $(".ul_list").html(html);

template 에서는 아무런 데이터도 노출하지 않았다.

<!-- hbs tamplate -->
<script id="list-template" type="text/x-handlebars-template">
	{{#each list}}
          <span>{{this.comment}}</span>
	{{/each}}
</script>

위치도 바꿔보고, id 도 틀렸는지 확인도 하고, 삽질을 하고 나서야 답을 찾을 수 있었다.

<script id="list-template" type="text/x-handlebars-template">
\{{#each list}}
<span>\{{this.comment}}</span>
\{{/each}}
</script>

문법 앞에 역슬러쉬(\) 를 붙여 줘야 했던 것이었다.

[AWS/Linux] pm2: command not found (ec2)

생각하는로뎅 — Mon, 25 Nov 2024 07:18:15 +0900

에러

sudo ln -s "$(which pm2)" /usr/bin/pm2

정상

[NestJS] Table leftJoin with Mysql2

생각하는로뎅 — Sun, 24 Nov 2024 14:44:39 +0900

nest.js + mysql2

조합으로 테이블 join 을 하려고 했다가.. 시간을 너무 많이 허비해서 글로 작성해두기로 했다.

1. 테이블 관계는 아래와 같다.

2. 각 파일 내용과 중요 내용

여기서 중요한 것은

class_list(class_cd) : class_item_list(class_cd) 의 관계는 1:N 이다.

때문에

class_list.entity.ts 파일의 class_cd는 반드시 OneToMany 를 주입 시켜 주어야하며,

class_item_list.entity.ts 의 class_cd 에는ManyToOne 을 주입 시켜줘야하고, 추가적으로 JoinColumn 도 주입 시켜 줘야한다.

2-1) class_list.entity.ts

import { Entity, Column, OneToMany, JoinColumn, PrimaryColumn } from 'typeorm';
import { ClassItemList } from '../class_item_list/class_item_list.entity'

@Entity({ schema: 'dkdoctor_pet_exam', name: 'class_list' })
export class ClassList {

  @PrimaryColumn({ name: 'class_cd'})
  classCd: string;

  @Column({ name: 'value'})
  value: string;

  @OneToMany(()=>ClassItemList, classItemList => classItemList.classCd)
  classItemList: ClassItemList[];

}

2-2) class_item_list.entity.ts

import { Entity, Column, PrimaryGeneratedColumn, JoinColumn, OneToMany, ManyToOne, PrimaryColumn } from 'typeorm';
import { ClassList } from '../class_list/class_list.entity';

@Entity({ schema: 'dkdoctor_pet_exam', name: 'class_item_list' })
export class ClassItemList {

  @PrimaryGeneratedColumn({ name: 'class_item_id' })
  classItemId: bigint;

  @ManyToOne(()=>ClassList, classList => classList.classCd)
  @JoinColumn({ name: 'class_cd'})
  @Column({ name: 'class_cd'})
  classCd: string;

  @Column({ name: 'value'})
  value: string;

  @Column({ name: 'comment'})
  comment: string;

}

2-3) class_list.module.ts

// class_list.module.ts
import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { ClassList } from './class_list.entity';
import { ClassListService } from './class_list.service';

@Module({
  imports: [TypeOrmModule.forFeature([ClassList])],
  exports: [TypeOrmModule],
  providers: [ClassListService]
})
export class ClassListModule {}

2-4) class_list.service.ts

@Injectable()
export class ClassListService {
  constructor(
    @InjectRepository(ClassList)
    private classListRepository: Repository<ClassList>, // UserRepository 주입
  ) {}

  findClassInfo(classCd : String): Promise<ClassList> {

    return this.classListRepository.createQueryBuilder('m')
    .leftJoinAndSelect('m.classItemList', 't')
    .where('m.classCd = :classCd', {classCd: classCd})
    .getOne();

  }

  async remove(id: number): Promise<void> {
    await this.classListRepository.delete(id);
  }
}

2-5) app.module.ts

@Module({
  imports: [
    ..., ClassListModule
  ],
  controllers: [AppController],
  providers: [
    AppService, ClassListService
  ],
})
export class AppModule {}

2-6) app.controller.ts

@Controller()
export class AppController {
  
  ...

  @Get('url')
  @Render('file name')
  async getRegisterStepOne() {
    const result = await this.classListService.findClassInfo('param');
    return { key: result };
  }
  ...
}

[NestJS] AWS DB Tunneling With Mysql Setting (터널링 및 Mysql 설정)

생각하는로뎅 — Sun, 24 Nov 2024 14:13:02 +0900

Nest.js 에서 터널링 하는 방법을 아무리 찾아봐도 안되어서, 테스트를 위해 꼼수를 쓰기로 했다.

어차피 로컬에서 접속할때만 필요하고, 서버에 소스 올라가면 터널링이 불필요하므로, 이 방법으로 쓰기로 했다.

내가 터널링 해보려고 별짓을 다 했다.

내 PC -> 베스천 서버 -> 비공개 서버(Mysql 설치 서버)

(키페어 상태, 모두 3306 방화벽 오픈 상태)

우선 Nest.js 에 mysql을 사용하도록 npm으로 다운로드 한다.

1. 설정 파일을 셋팅하기 위해서 dotenv 를 설치한다.

npm install dotenv

2. mysql을 사용하기 위해서 mysql2를 설치한다.

npm install --save @nestjs/typeorm typeorm mysql2

3. Root 디렉토리에 [ .env ] 파일 생성

4. .env 파일에 아래 정보 삽입

# 운영 디비 접속 정보
# DB_HOST=DB 서버 IP
# DB_PORT=3306
# DB_USERNAME=DB ID
# DB_PASSWORD=DB PASSWORD
# DB_DATABASE=DB 스키마명

# 로컬 개발 접속 정보
DB_HOST=127.0.0.1
DB_PORT=5003
DB_USERNAME=DB ID
DB_PASSWORD=DB PASSWORD
DB_DATABASE=DB 스키마명

5..database.module.ts 파일을 생성한다.

config(); 를 수행해줘야지, .env 설정 파일을 불러 올 수 있다.

import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { config } from 'dotenv';

config();

@Module({
  imports: [
    TypeOrmModule.forRootAsync({
        useFactory: () => ({
        type: 'mysql',
        host: process.env.DB_HOST,
        port: Number(process.env.DB_PORT),
        username: process.env.DB_USERNAME,
        password: process.env.DB_PASSWORD,
        database: process.env.DB_DATABASE,
        synchronize: false,
        logging: true,
        dropSchema: false,
        // entities: [ entities 추가 ],
      }),
    }),
  ],
})


export class DatabaseModule {}

6. app.module.ts

위에서 생성한 imports에 DatabaseModule 을 추가해준다.

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { DatabaseModule } from './database/database.module';

@Module({
  imports: [
    DatabaseModule
  ],
  controllers: [AppController],
  providers: [
    AppService
  ],
})
export class AppModule {}

7. 이제 프로젝트 경로에 가서

npm run start:dev

실행하면, 아래와 같이 당연히 연결이 안된다고 나온다.

이제 AWS DB 서버로 접속하기 위해서 터널링을 할 차례다. (꼼수)

8. MobaXterm 을 설치한다.

https://mobaxterm.mobatek.net/download.html

MobaXterm free Xserver and tabbed SSH client for Windows

The ultimate toolbox for remote computing - includes X server, enhanced SSH client and much more!

mobaxterm.mobatek.net

9. 상단 메뉴에 Turnneling 버튼을 누른다.

10. 하단에 New SSH tunnel 버튼을 누른다.

11.

11-1) Forwarded port : 5003

내 PC에서 접속할 접속 Port 이다.

11-2) SSH server : AWS 베스천 서버 ip

SSH login : 베스천 서버 ID

SSH port : 22

11-3) Remote server : db가 설치된 서버 ip (비공개 서버)

Remote port : 3306 (mysql 서버 port)

설정 후 하단 Save

**12. 추가된 항목에 열쇠 모양을 눌러서 pem 파일을 선택해서 등록한다.**

13. 이제 시작 버튼을 누른 후, 정지 버튼이 계속 활성화 되어 있으면 성공.

이제 내 PC에서 5003 Port 를 경유하여, 디비 서버에 있는 Mysql 3306 Port로 접속이 가능하게 되었다.

14. 이제 서버를 다시 시작하면 접속이 될 것이다.

npm run start:dev

[Flutter/Window] 사운드 재생(Sound Play)

생각하는로뎅 — Thu, 30 May 2024 21:11:57 +0900

Flutter Window 용 사운드 재생을 위해서는 아래 라이브러리를 사용한다.

window 용 라이브러리 사용 방법이 없어서, 정리하기로 했다.

(라이브러리 소스 뒤적뒤적... )

[ Window 용 Flutter 라이브러리 Url ]

https://pub.dev/packages/audioplayers_windows/install

audioplayers_windows install | Flutter package

Windows implementation of audioplayers, a Flutter plugin to play multiple audio files simultaneously

pub.dev

1. pubspec.yaml

dependencies:
  ....
  audioplayers_windows: ^4.0.0

2. 라이브러리 Get 후, 아래 패키지를 사용이 가능하다.

import 'package:audioplayers_platform_interface/audioplayers_platform_interface.dart';

3. static 으로 구성된 instace 으로 객체를 가져 올 수 있다.

import 'package:audioplayers_platform_interface/audioplayers_platform_interface.dart';

class ... {

  // 경고 사운드
  AudioplayersPlatformInterface soundWarringPlayer = AudioplayersPlatformInterface.instance;

}

4. 사운드 파일 경로는 assets 폴더 아래에 위치(SOUND_WARRING_PATH)하였으며, 사운드 ID(SOUND_WARRING_ID) 로 여러 사운드를 구분 할 수 있다.

create 메소드를 호출시, stream 객체가 만들어 지는데, Future 비동기 방식이므로, then 메소드를 이용하여, 추후 stream 객체가 만들어지면, 상태 값을 받을 수 있도록 getEventStream 을 한다.

import 'package:audioplayers_platform_interface/audioplayers_platform_interface.dart';

class ... {

  // 경고 사운드
  final String SOUND_WARRING_ID = "SOUND_WARRING";
  final String SOUND_WARRING_PATH = "assets/sound_waring.wav";
  
  // 경고 사운드
  AudioplayersPlatformInterface soundWarringPlayer = AudioplayersPlatformInterface.instance;

  @override
  void initState() {
  
    // 경고 사운드 설정
    Future<void> soundWarringFuture = soundWarringPlayer.create(SOUND_WARRING_ID);  // 생성
    
    soundWarringFuture.then((value) {
      // 상태 값
      Stream<AudioEvent> soundWarringEvent = soundWarringPlayer.getEventStream(SOUND_WARRING_ID);
      soundWarringEvent.listen((event) {
        debugPrint(event.eventType.name);
      });

    });
    
    // 재생 url 설정
    soundWarringPlayer.setSourceUrl(SOUND_WARRING_ID, SOUND_WARRING_PATH); 
    
    // 반복 설정
    soundWarringPlayer.setReleaseMode(SOUND_WARRING_ID, ReleaseMode.loop);
    
  }
}

5. 아래 소스를 주석하면, 1번만 재생이 가능하고, 종료시 상태값 AudioEventType.complete (complete) 값을 받을 수 있다.

ReleseMode.loop 는 stop 시, complete 값은 들어오지 않고, seekComplete(AudioEventType.seekComplete) 값만 들어온다.

soundWarringPlayer.setReleaseMode(SOUND_WARRING_ID, ReleaseMode.loop);  // 반복 설정

6. 사운드 플레이가 가능하다.

soundWarringPlayer.resume(SOUND_WARRING_ID);

7. 사운드 중지가 가능하다.

soundWarringPlayer.stop(SOUND_WARRING_ID);

8. 사운드 중지 후, relese 와 dispose 후에는 resume 을 수행하여도 사운드는 재생되지 않는다.

soundWarringPlayer.stop(SOUND_WARRING_ID);
soundWarringPlayer.release(SOUND_WARRING_ID);
soundWarringPlayer.dispose(SOUND_WARRING_ID);

[Kotlin/Android] MongoDB 날짜, 한국 시간(Korea) 변환

생각하는로뎅 — Sat, 6 Apr 2024 15:48:57 +0900

MongoDB 에서 보내오는 Date Format 형식은 아래와 같다.

yyyy-MM-dd'T'HH:mm:ss.SSS'Z'

2024-04-06T07:27:00.000Z

해당 날짜는 한국 시간과 일치하지 않아, 변환이 필요하다.

변환 도중 실패한 사례는 아래와 같다.

import java.text.SimpleDateFormat
import java.util.Date

var dateFormat = SimpleDateFormat("yyyy.MM.dd HH:mm", Locale.KOREAN)
val sdf = SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSS'Z'", Locale.US)
dateFormat.timeZone = TimeZone.getTimeZone("Asia/Seoul")

val date : Date? = sdf.parse("2024-04-06T07:27:00.000Z")

date?.let {
    Log.d("test_date", dateFormat.format(it))
}

위 코드는 에뮬레이터에서는 정상 동작하였으나, 실제 디바이스에서는 변환이 되지 않는 현상이 있었다.

그래서, 아래 코드로 적용 후에는 실제 디바이스에서도 변환이 정상적으로 가능하게 되었다.

import java.time.OffsetDateTime
import java.time.ZoneId
import java.time.format.DateTimeFormatter

val zone = ZoneId.of("Asia/Seoul")
val fmt = DateTimeFormatter.ofPattern("yyyy.MM.dd HH:mm", Locale.getDefault())

val dateTime = OffsetDateTime.parse("2024-04-06T07:27:00.000Z").atZoneSameInstant(zone)

dateTime?.let {
    Log.d("test_date", fmt.format(it))
}