T3ch

Spring boot에서 Http request 비동기 요청하기

댕댕이발 — Thu, 26 Oct 2023 17:04:38 +0900

Spring boot로 http request 코드를 개발할 때 비동기 처리로 요청 및 처리하기위한 내용입니다.

동기방식으로 호출하게되면 앞에 호출된 request의 응답이 완료될 때까지 다음요청이 실행되지 못하게되므로

여러개의 request를 보내는 상황에서는 더 높은 효율을 보여줍니다.

이 글에선 http 라이브러리는 okhttp3 를 사용합니다.

build.gradle에 의존성 추가

implementation 'com.squareup.okhttp3:okhttp:3.10.0'

코드작성 (비동기 요청)

public class Helloworld {
	private void asyncOkHttp() {
    	// http 요청하려는 URL 리스트가 있다고 가정
        List<String> requestUrls = new ArrayList<>();
        requestUrls.add("https://111...");
        requestUrls.add("https://222...");
        requestUrls.add("https://333...");
        
    	OkHttpClient client = new OkHttpClient().newBuilder().build();
        
        for (String url : requestUrls) {
            Request request = new Request.Builder()
                    .url(url)
                    .method("GET", null)
                    .build();

            client.newCall(request).enqueue(new Callback() {
                @Override
                public void onFailure(Call call, IOException e) {
                	// request 요청 실패 응답에 대한 처리
                }

                @Override
                public void onResponse(Call call, Response response) {
                    if (response.isSuccessful()) {
                        // request 요청 성공 응답에 대한 처리
                    }
                }
            });
        }
    }
}

(참고로 동기 요청은 enqueue 메서드 대신 execute 메서드를 사용합니다.)

추가로 Request_Limit_Exceeded 라고해서 동일한 IP에서 너무 짧은 간격으로 Request를 요청할 시에 요청자체를 거부하는 경우가 있는데 해당 상황을 해결하기 위해 사용했던 부분도 공유합니다.

코드작성 (비동기 요청 + Dispatcher)

public class Helloworld {
	private void asyncOkHttp() {
    	// http 요청하려는 URL 리스트가 있다고 가정
        List<String> requestUrls = new ArrayList<>();
        requestUrls.add("https://111...");
        requestUrls.add("https://222...");
        requestUrls.add("https://333...");
        
        // dispatcher를 생성하여 최대 호출 수를 제어
        Dispatcher dispatcher = new Dispatcher();
        dispatcher.setMaxRequests(50);
        OkHttpClient client = new OkHttpClient().newBuilder().dispatcher(dispatcher).build();

        for (String url : requestUrls) {
            Request request = new Request.Builder()
                    .url(url)
                    .method("GET", null)
                    .build();

            client.newCall(request).enqueue(new Callback() {
                @Override
                public void onFailure(Call call, IOException e) {
                	// request 요청 실패 응답에 대한 처리
                }

                @Override
                public void onResponse(Call call, Response response) {
                    if (response.isSuccessful()) {
                        // request 요청 성공 응답에 대한 처리
                    }
                }
            });
        }
    }
}

사용방법은 크게 다르지 않고 client 객체 build시에 dispatcher를 추가해준 채로 생성해주면 됩니다. 각 디스패처는 ExecutorService를 사용하여 내부적으로 호출을 실행합니다.

Spring MVC의 비동기처리 (ThreadPoolTaskExecutor 사용)

댕댕이발 — Tue, 22 Aug 2023 11:47:24 +0900

Spring MVC에서 프로세스는 기본적으로 동기식 처리로 이루어집니다.

코드 한줄한줄 차례대로 실행이 완료된 후 넘어갈 수 있다는 뜻이죠. 보통 이걸 Blocking 이라고 하고 반대가 되는 말은 Non-Blocking 이라고 합니다. 코드가 차례대로 실행되기 때문에 코드 실행에 따른 결과 값을 보는게 명확한 장점이 있습니다.

Node.js로 개발을 좀 해오다보니 (Node.js는 반대로 비동기처리가 기본 컨셉입니다.) Async에 대한 용어에 더 눈이가서 Spring 어노테이션중 @Async 어노테이션에 먼저 눈이 갔습니다. 어노테이션 하나만 추가하면 내가 원하는게 된다?

@Async

@Async는 Spring 프레임워크에서 비동기적인 메서드 실행을 지원하기 위한 어노테이션입니다. 이 어노테이션을 메서드에 붙이면 해당 메서드는 별도의 쓰레드에서 실행되며, 호출한 쓰레드는 메서드가 완료될 때까지 블로킹되지 않습니다. @Async를 사용하면 동기적인 방식이 아닌 비동기적인 방식으로 메서드를 실행할 수 있습니다.

메소드에 그냥 어노테이션만 붙이면 Async 메소드가 되는 것인가? 했지만 @Async를 사용할 때 주의할 점은 이 어노테이션도 Thread pool을 사용하는 것이기 때문에 무분별하게 사용하면 오버헤드가 발생할 수도 있고, 스프링의 프록시 매커니즘을 통해 비동기 처리가 구현되기 때문에 @Async 메서드는 같은 클래스 내에서 호출되면 비동기적으로 실행되지 않을 수 있습니다. 이 경우 AOP 프록시가 적용되지 않기 때문입니다.

저같은 경우도 Spring MVC 프로젝트에 기본적으로 Filter를 사용하고있는데 위 내용때문에 제대로 작동하지 않는 부분을 확인하고 바로 다른 방법을 찾아보았습니다.

ThreadPoolTaskExecutor

스프링에서 제공해주는 클래스로 쓰레드풀을 이용하여 멀티쓰레드 구현을 쉽게 해주는 클래스입니다.

일단 제가 의도한 부분은 API 호출 시에 내부 처리와 상관없이 빠르게 응답 값을 주는걸 생각했습니다.

그러기위해선 부하가 큰 Service 메소드에 대한 Async 처리가 필요했고, 아래와같이 처리했습니다.

AsyncConfig.class

: 쓰레드풀을 사용하기 위한 custom 설정을 하는 클래스입니다.

@Configuration
public class AsyncConfig {

    @Bean
    public ThreadPoolTaskExecutor taskExecutor() {
        ThreadPoolTaskExecutor executor = new ThreadPoolTaskExecutor();
        executor.setCorePoolSize(10);  // 쓰레드풀의 기본 크기
        executor.setMaxPoolSize(50);   // 쓰레드풀의 최대 크기
        executor.setQueueCapacity(100); // 작업 큐 크기
        executor.setThreadNamePrefix("Custom-Async-"); // 쓰레드 이름 접두사 설정
        executor.initialize();
        return executor;
    }
}

Controller코드

: 서비스 메소드를 백그라운드 로직으로 수정하였고, DeferredResult 객체에 비동기로직에 대한 결과 값을 저장할 수 있습니다.

@RequiredArgsConstructor
public class AlarmController {
    private final AlarmService alarmService;
    @Qualifier("taskExecutor")
    private final ThreadPoolTaskExecutor taskExecutor;

   @PostMapping(value = "/{id}/send")
   public Response<Map<String,Object>> immediatelyPush(
           HttpServletRequest req,
           @PathVariable("id") Long id
   ) {
       try {
           // DeferredResult<Response<Map<String, Object>>> deferredResult = new DeferredResult<>();

           taskExecutor.submit(() -> {
               // 비동기로 실행되는 백그라운드 로직
               alarmService.immediatelyPush(id);
               // deferredResult.setResult(new Response<>(ResultCode.REGISTER_SUCCESS));
               // deferredResult.setResult(new Response<>(ResultCode.REGISTER_FAIL));
           });
           return new Response<>(ResultCode.REGISTER_SUCCESS);
       } catch (Exception e) {
           return new Response<>(ResultCode.REGISTER_FAIL);
       }
   }
}

이렇게되면 서비스 메소드에 대한 부분이 실행완료되지않아도 즉시 response를 넘겨주게 됩니다. 물론 response후에도 Spring Application 에서는 해당 로직이 실행중이게 됩니다.

NestJS로 프로젝트 만들어보기 - 4 (configuration 적용)

댕댕이발 — Wed, 22 Feb 2023 00:03:18 +0900

어느 언어이던간에 환경변수 값, 즉 configuration 이라는 모듈을 사용하게 되는데, Nest.js에서도 configuration 모듈을 제공해주고있으며, 해당 모듈은 dotenv 모듈을 기반해서 작동합니다.

공통으로 사용해야할 변수 값이거나 혹은 개발레벨 (프로덕션, 개발, 테스팅 등등..) 에 따른 다른 환경변수를 가져야하는 경우가 많으므로 프로젝트를 구성할 때 거의 대부분 셋팅하게 되는 모듈입니다. 이전에 포스팅한 데이터베이스 연결정보같은 경우도 config 파일로 따로 관리하는 경우가 많아서 해당 모듈을 먼저 셋팅하고 넘어가고자 합니다.

1. @nestjs/config 모듈 인스톨

$ npm i --save @nestjs/config
or
$ yarn add @nestjs/config

nestjs에서 공식으로 제공해주는 모듈을 인스톨합니다. 해당 패키지는 내부적으로 위에 말씀드렸다시피 dotenv를 사용합니다.

2. 모듈에 적용하기 (Getting Started)

공식 문서에서 가이드하는 방법이 여러가지입니다. 기본제공(Getting Started)에서는 이와같이 가이드합니다.

app.module.ts

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';

@Module({
  imports: [ConfigModule.forRoot()],
})
export class AppModule {}

위의 코드는 기본 위치(프로젝트 루트 디렉터리)에서 .env 파일을 로드 및 구문 분석하고 .env 파일의 키/값 쌍을 process.env에 할당된 환경 변수와 병합하고 결과를 개인 구조에 저장합니다.

@nestjs/config는 dotenv에 의존하기 때문에 환경 변수 이름의 충돌을 해결하기 위해 해당 패키지의 규칙을 사용합니다.

키가 런타임 환경에 환경 변수로 존재하는 경우(예: export DATABASE_USER=test와 같은 OS 셸 내보내기를 통해) 및 .env 파일에 있는 경우 런타임 환경 변수가 우선합니다.

즉, bash_profile 혹은 bashrc 와 같은 파일에 이미 환경변수 설정이 되어있더라도, 프로젝트 루트에 있는 .env 파일의 환경변수 값이 우선순위가 더 높습니다.

가장 기본적인 가이드 방법이 있고, 저는 애초에 어플리케이션 시작시에 DB를 연동시키기 때문에
DB module에서 config를 로드하고, 그 이후에 로드된 config 값을 가지고 DB 연결을 먼저 진행하였습니다.

3. DB 모듈 작성

src/common/db.module.ts

import { Module } from '@nestjs/common';
import {ConfigModule, ConfigService} from '@nestjs/config';
import configuration from '@Common/configuration';
import {TypeOrmModule} from '@nestjs/typeorm';
import * as Joi from 'joi';

@Module({
    imports: [
        ConfigModule.forRoot({
            isGlobal: true,
            load: [configuration],
            envFilePath: process.env.NODE_ENV == 'local' ? '.env' : process.env.NODE_ENV == 'development' ? '.env.development' : '.env.production',
            validationSchema: Joi.object({ // 환경변수 유효성 체크
                NODE_ENV: Joi.string().valid('local','development', 'production', 'testing', 'staging').required(),
                DATABASE_HOST: Joi.string().required(),
                DATABASE_PORT: Joi.string().required(),
                DATABASE_USER: Joi.string().required(),
                DATABASE_PASSWORD: Joi.string().required(),
                DATABASE_NAME: Joi.string().required(),
            })
        }),
        TypeOrmModule.forRootAsync({
            imports: [ConfigModule],
            inject: [ConfigService],
            useFactory: async (configService: ConfigService) => ({
                type: 'mysql',
                host: configService.get('database.host'),
                port: configService.get('database.port'),
                username: configService.get('database.user'),
                password: configService.get('database.password'),
                database: configService.get('database.name'),
                legacySpatialSupport: false,
                logging: true,
                acquireTimeout: 5000,
                charset: 'UTF8MB4_GENERAL_CI',
                entities: ['dist/**/*.entity.{ts,js}'], // Entity 연결
                synchronize: false, //true 값을 설정하면 어플리케이션을 다시 실행할 때 엔티티안에서 수정된 컬럼의 길이 타입 변경값등을 해당 테이블을 Drop한 후 다시 생성
                extra: {
                    connectionLimit: configService.get('CONNECTION_LIMIT')
                }
            }),
        }),
    ],
})
export class DatabaseModule {}

이전에 루트모듈에서 ConfigModule을 이용해 config값을 로드하면 ConfigService를 주입받을 수 있는데, 그 이후에는 ConfigService 객체를 통해 config의 값을 가져올 수 있습니다.

envFilePath를 통해 NODE_ENV값에 따른 참조 환경변수 파일을 다르게 가져올 수 있게끔 하였습니다.

.env

# #MYSQL
DATABASE_HOST = localhost
DATABASE_USER = root
DATABASE_NAME = store
DATABASE_PASSWORD = root
DATABASE_PORT = 3306
DATABASE_LOGGING = true
CONNECTION_LIMIT=15

프로젝트 루트에 이와같이 env 파일을 작성하면 ConfigModule에서 프로젝트 루트에 있는 해당 환경변수 파일을 로드하게됩니다.

4. 루트모듈에 DB모듈 import 및 타 모듈에서 configService 사용

DB 연결은 어플리케이션 시작 시에 필요하기때문에 아래와 같이 import 합니다.

app.module.ts

import { DatabaseModule } from '@Common/db.module';
import { Module } from '@nestjs/common';
import { OrderModule } from '@Order/order.module';
import {TypeOrmModule} from '@nestjs/typeorm';

@Module({
    imports: [
        DatabaseModule,
        TypeOrmModule.forFeature([]),
        OrderModule,
    ]
})
export class AppModule {}

DatabaseModule을 못가져오면 어플리케이션 실행 에러가 떨어질겁니다. 그리고 해당 모듈에서 ConfigModule도 같이 import했기때문에 정상실행됐다면 다른 모듈에서도 ConfigService를 주입하여 사용할 수 있습니다.

src/order/services/order.service.ts

import { Injectable } from '@nestjs/common';
import {ConfigService} from '@nestjs/config';

@Injectable()
export class OrderService {
    constructor(
      private readonly config: ConfigService
    ) {
        console.log(config.get("database.host"))
    }
}

물론 여기서 저 config값이 필요한건 아니지만 위와같이 ConfigService를 바로 주입받아서 config 값을 참조 가능하게됩니다.

NestJS로 프로젝트 만들어보기 - 3 (DB연동)

댕댕이발 — Thu, 16 Feb 2023 23:33:31 +0900

웹어플리케이션을 만들면서 가장 많이 필요로 하는 것중에 하나가 데이터베이스 연동인데, Nest.js에서도 공식적으로 데이터베이스 클라이언트 모듈을 제공해주고, Typescript의 ORM인 TYPE ORM을 사용할 수 있습니다. 이전 프로젝트에 데이터베이스를 연동시켜보겠습니다.

일단 데이터베이스가 필요할텐데, 보통 데이터베이스는 별도의 서버나 혹은 클라우드에서 제공하는 서비스를 원격으로 붙어서 사용하는게 일반적이나, 간단하게 테스트하는 용도이니만큼 DB도 도커를 사용하여 간단하게 띄워보도록 하겠습니다. (도커는 기본적으로 설치되었다는 가정하게 진행하겠습니다.)

1. MYSQL image 다운받기

$ docker pull mysql

버전을 따로기입하지 않고 image를 다운받으면 최신버전을 기준으로 mysql 이미지를 다운받게 됩니다.

2. Container 실행

$ docker run --name mysql-container -e MYSQL_ROOT_PASSWORD=root -d -p 3306:3306 mysql

위에서 다운받은 이미지를 실행하는데, 몇가지 옵션들이 필요합니다.

--name : 컨테이너 이름
-e MYSQL_ROOT_PASSWORD : 패스워드 설정
-d : 백그라운드(데몬)으로 실행
-p : 포트바인딩

도커실행이 제대로 됐다면, docker ps 명령어로 실행이 됐는지 확인할 수 있습니다.

3. Mysql 접속 테스트

컨테이너가 제대로 떳다면 DBMS로 접속이 가능합니다. 저는 DBeaver 라는 DBMS 툴로 사용하였습니다.

참고로 MYSQL8 버전 이후부터 바로 접속하려했을 때 아래의 에러가 하나 발생했습니다.

Public Key Retrieval is not allowed

allowPublicKeyRetrieval=true 옵션값을 설정하여 해결했습니다.

MySql 공식사이트에서 MITM 공격을 방어하기 위해 해당 디폴트 옵션값을 false로 설정했다라는 설명을 합니다.

DBeaver를 사용한다는 가정하에는 아래와 같이 옵션 설정을 할 수 있습니다.

default 값으로 false로 설정되어있는걸 true로 변경합니다.

4. Database 생성

DDL 문으로도 Database를 만들어도되고, 아니면 DBMS의 UI로 간단하게 만들 수도 있습니다.

프로젝트에 사용할 Database 이름을 store라고 짓도록 하겠습니다.

5. Nestjs 프로젝트에서 DB 연결 (출처: https://docs.nestjs.com/techniques/database)

Nest.js 공식 문서에 보면 여러가지 ORM 연결을 공식적으로 지원하고 있습니다. 그중에서 TypeORM을 사용하려합니다.

일단 Mysql을 접속하기위한 모듈들을 설치하도록 하게습니다.

$ npm install --save @nestjs/typeorm typeorm mysql2

패키지 설치 후에 DB 접속을 모듈화한 코드를 작성하고, 해당 모듈을 루트모듈에 import하는 코드입니다.

src/common/db.module.ts

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

@Module({
    imports: [
        TypeOrmModule.forRoot({
            type: 'mysql',
            host: 'localhost',
            port: 3306,
            username: 'root',
            password: 'admin1234',
            database: 'store',
            entities: [],
            synchronize: true,
        }),
    ],
    providers: [],
    exports: [],
})
export class DatabaseModule {}

루트모듈에 위에 작성한 DatabaseModule을 import 합니다.

src/app.module.ts

import { Module } from '@nestjs/common';
import {TypeOrmModule} from '@nestjs/typeorm';
import { DatabaseModule } from '@Common/db.module';

@Module({
    imports: [
        DatabaseModule,
        TypeOrmModule.forFeature([]),
    ]
})
export class AppModule {}

forFeature안에 entity를 넣으라고 되어있지만 Database.module.ts 파일에서 entity 의 경로를 추후에 다시 잡아줄거기 때문에 이번엔 일단 연결만 한다는 생각으로 코드를 작성합니다. 그리고 파일을 import 할 때 절대경로를 사용하기위해 tsconfig.json 파일에 path 설정을 추가해줍니다.

{
  "compilerOptions": {
    ...
    "paths": {
      "@Common/*": ["./src/common/*"]
    }
  }
}

이렇게 작성을 끝낸후 npm run start:dev 혹은 yarn start:dev (저는 yarn으로 프로젝트를 생성했습니다) 으로 프로젝트를 실행시킵니다.

에러없이 실행완료된 모습

제가 소스에서는 지워놓은 몇몇 모듈들이 있어서 OrderModule 같은건 아마 안나올텐데, 중요한건 에러가 안난다는 것과 TypeOrmCoreModule, DatabaseModule 의 dependencies initialized가 정상적으로 되면 성공한겁니다.

DB 모듈의 계정정보를 이렇게 하드코딩으로 쓰게되면 나중에 관리하기가 어려워지고,
개발 환경에 따라 커넥션 정보를 관리해야하기때문에 약간 다듬어야할 필요가 있는데, 그건 이후의 과정에서 포스팅 하도록 하겠습니다.

NestJS로 프로젝트 만들어보기 - 2 (디렉토리구성)

댕댕이발 — Tue, 14 Feb 2023 23:56:43 +0900

nest cli를 통해 기본적으로 만들어지는 프로젝트 구조를 이전에 학습해보았는데, 디렉토리 구조를 조금 더 다듬어보려고 합니다.
공식 문서에 나오는 구조를 최대한 지키되, 코딩하기에 좀 더 알아보기 쉽고 간편한 방법을 찾아보겠습니다.

Nest js에서 기본적으로 필요한 구성은 아래와 같습니다. 간단히 역할을 설명하자면

controller : 라우트를 기술
service : 서비스에 필요한 메서드를 기술
module : Nest 프레임워크를 구동하는데 필요한 메타데이터를 제공 (Nest에선 적어도 하나의 root 모듈이 필요합니다)

보면 아시겠지만, 모든 기능들을 저 세 개의 파일에 다 넣을 순 없겠죠. 그럼 저걸 어떻게 나눌지를 보자면, 가장 기본적으로 저 세 가지의 분류대로 디렉토리를 나누는 방법이 있습니다.

컨트롤러는 컨트롤러끼리, 서비스는 서비스끼리 이런식으로 묶을 수 있겠죠. 그러고선 app.module.ts(루트모듈)에 전부 import를 하면 간단하게 구동시킬 수 있습니다. 근데 Nest.js에서는 Module이라는 구조가 있어서 다른 방법으로 구성이 가능합니다.

최상단에 있는 Application Module은 app.module.ts (루트모듈) 이라고 보시면되고, 이전에 설명했던 컨트롤러, 서비스가 한데 묶인 새로운 모듈을 루트모듈에 주입시킬 수도 있습니다. 이렇게되면 모양새가 마이크로서비스같은 느낌이 되죠. 각각의 기능별로 하나의 세트를 만들어놓았다고 생각할 수 있습니다.

cats 이라는 모듈안에 컨트롤러 서비스 등 하나의 기능으로 작동하게끔 만듭니다. Module이 기본적으로 갖고있어야할 요소들을 한데에 모으는거죠. 이와같은 모양새로 이전에 구성했던 디렉토리 구조를 변경한다면

order라는 모듈을 만들어서 한데에 모으고 order 모듈을 루트모듈에 import시키는 방법으로 프로젝트 구성이 가능합니다!
두 구성방법 중에 저는 주로 전자를 사용해왔었습니다. 제가 겪은 시행착오가 정답은 아니지만 이유를 얘기해보자면,

1. 모듈별로 명확하게 기능을 나누기가 생각보다 쉽지가 않았습니다.
2. 각각의 모듈을 추가로 만들어줘야한다는 점이 일단 불편했고, 애초에 1번 사항이 충족이 되지 않았었기때문에 루트모듈에 다 때려넣는거나 각각의 모듈에 구분해서 때려넣는거나 크게 다르다고 느끼지 못했습니다.
3. 모듈을 여러개 만들었을 때 모듈들 사이에서도 재사용성이 있어야 의미가 있다고 생각했는데 재사용성이 있게 만드는게 어려웠습니다.

위와같은 이유때문에 대부분의 nest 프로젝트는 모듈로 작성하지 않았었는데, 이번기회에 모듈식으로 구성해볼까합니다. 모듈도 하나의 개념만 존재하는 것이 아니라 여러가지 부가적인 개념이 존재하기때문에 공부할겸 겸사겸사 좋을 것 같습니다.

NestJS로 프로젝트 만들어보기 - 1 (nestjs/cli)

댕댕이발 — Fri, 10 Feb 2023 13:17:59 +0900

Node.js를 사용하고, Typescript를 배우던 와중에 접했던 프레임워크인 NestJS라는 물건을 사용하게 되었습니다.
기존엔 Express를 사용했었고, 그 안에 Typescript를 셋팅하여 프로젝트를 구성했던 것과는 다르게 이 프레임워크를 쓰게되면 기본적인 Typescript 셋팅부터 전체적인 구조까지 프레임워크 생성 커맨드를 통해 기본적으로 제공해줍니다. 공식 문서에서는 아래와 같이 소개합니다.

Nest (NestJS) is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with and fully supports TypeScript (yet still enables developers to code in pure JavaScript) and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Reactive Programming).

Under the hood, Nest makes use of robust HTTP Server frameworks like Express (the default) and optionally can be configured to use Fastify as well!

Nest provides a level of abstraction above these common Node.js frameworks (Express/Fastify), but also exposes their APIs directly to the developer. This gives developers the freedom to use the myriad of third-party modules which are available for the underlying platform.

[출처 - https://docs.nestjs.com/]

직접 사용해보면서 느꼈던거지만 약간 Spring 같은 느낌이 있었습니다.
기존에 바닐라 자바스크립트로 구성하던 모양새와는 달리 OOP(객체지향 프로그래밍)의 요소가 강력하게 느껴졌습니다.
공식 문서에서 가이드해주는 시작대로 프로젝트를 생성하면 굉장히 쉽게 웹어플리케이션을 실행할 수 있고, 아주 깔끔하게 프로젝트의 구조가 생성됩니다.

$ npm i -g @nestjs/cli
$ nest new project-name

위와같이 커맨드를 입력하면 package manager로 무엇을 쓸지 물어보는데
그건 취향에 맞게끔 선택하시면 이런 구조의 프로젝트가 생성됩니다.

test모듈과 기타 설정파일들은 제쳐두고 src디렉토리 안에 파일들을 보시면 되는데 기본적으로 세가지의 구성이 있습니다.
물론 일반적인 디렉토리 구조는 아니고 앱을 구동하기 위한 기본 구성만을 생성해줍니다.

Controller : 컨트롤러는 들어오는 요청을 처리하고 클라이언트에 응답을 반환하는 역할을 합니다.
Module : Nest가 애플리케이션 구조를 만들때 사용할 수 있는 메타데이터를 제공해주는 역할을 합니다. 내용이 조금 헷갈리는데 굳이 비유를 하자면 Module에 Controller나 Service등을 추가하여 특정 기능을 가지는 모듈로 만들 수 있습니다. 프로젝트 생성시에 기본적으로 만들어진 모듈은 루트모듈입니다.
Service : 서비스, 말그대로 서비스를 하기위한 로직을 담고있는 역할을 합니다.

NestJS는 Typescript를 기반으로 만들어진 프레임워크기때문에 기본적으로 빌드가 필요합니다.
그래서 nest build 명령어를 쓰면 tsconfig 설정을 이용하여 Typescript 빌드를 하고 빌드된 js 파일을 node 명령어로 실행시킬 수 있습니다.
npm 혹은 yarn start 명령어로 실행을 하면 아주 간단하게 3000 포트로 웹어플리케이션 하나가 뜨게됩니다.
시작은 굉장히 간단하죠? 그럼 굳이 이런 프레임워크를 왜 써야할까 싶었는데 사용하다보니 NestJS의 여러 기능들이 있었습니다.
다양한 어노테이션 지원과 아키텍쳐가 명확하고 그에따른 각종 기능들을 공식적으로 지원해주고있기때문에 큰 무리없이 프로젝트를 구성할 수 있었습니다. 이런 부분들은 다른 글에서 담아볼 수 있도록 하겠습니다.

[javascript] - Promise bulk로 처리하기

댕댕이발 — Fri, 10 Feb 2023 01:36:11 +0900

javascript의 객체 중 Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.

MDN의 설명으로 아래와같이 간단하게 요약할 수 있습니다.

[출처] - https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise는 다음 중 하나의 상태를 가집니다.

대기(pending): 이행하지도, 거부하지도 않은 초기 상태.
이행(fulfilled): 연산이 성공적으로 완료됨.
거부(rejected): 연산이 실패함.

대기 중인 프로미스는 값과 함께 이행할 수도, 어떤 이유(오류)로 인해 거부될 수도 있습니다. 이행이나 거부될 때, 프로미스의 then 메서드에 의해 대기열(큐)에 추가된 처리기들이 호출됩니다. 이미 이행했거나 거부된 프로미스에 처리기를 연결해도 호출되므로, 비동기 연산과 처리기 연결 사이에 경합 조건은 없습니다.

javascript의 언어특징인 비동기성때문에 Promise객체를 많이쓰게되는데 각각 하나의 Promise를 실행하는 경우에는 크게 고민할게 없는데, 작업을 하다보니 여러개의 Promise 객체를 실행해야하는 경우가 생겼습니다! 첨엔 별 생각없이 Promise 여러개를 배열에 넣고 Promise 기본함수에 있는 Promise.all 혹은 Promise.allsettled 함수를 쓰면 해결될거라 생각했습니다.

예를들면 이런식으로 말이죠.

let p1 = new Promise((resolve, reject)=>{
...
})
let p2 = new Promise((resolve, reject)=>{
...
})
Promise.allSettled([p1, p2])

참고로 Promise.all과 Promise.allSettled의 차이는 모든 Promise객체를 성공시켜야 인정할건지 아니면 성공하는 Promise와 실패하는 Promise를 염두에 두고 실행시킬건지의 차이인데, all은 하나라도 실패하면 실패가 되고, allSettled는 10개중에 하나가 실패해도 일단 전부 실행은 한다라는 차이점이 있습니다.

let promises = []
for(const requestUrl of requestUrls) {
  promises.push(await this.util.httpRequest(url, 'GET'))
}
Promise.allSettled(promises)
for (const result of results) {
    if(result.status === 'fulfilled') {
    // ... 성공
    } else {
    // ... 실패
    }
}

아무튼간 저렇게 Promise가 적을때는 상관이 없었습니다. 근데 저는 약 1500개 정도의 Promise를 실행시키려 했는데 에러가 뜨더군요.

http request를 하는 공용함수를 만들어서 여러개의 url에 'GET' 으로 호출하고 응답값을 받아오는 상황이었는데 한번에 너무 많은 양을 호출하고 처리하려고하니 Promise관련된 에러와 request를 받는 OPEN API 쪽에서도 에러를 내더군요.. 참고로 저는 기상청의 OPEN API를 호출하고 있었습니다.

그래서 삽집을 하던중, Promise 의 실행을 제어한다는 limit관련 모듈들이 있는걸로 보아 일단 Promise의 실행개수를 줄여야한다고 생각했고, npm에서 제공하는 모듈들을 사용할까 해봤지만 javascript 내부함수로도 구현이 가능할 것 같아서 아래와 같이 바꿔봤습니다.

while(this.requestUrls.length) {
    const results = await Promise.allSettled(this.requestUrls.splice(0, 100).map((url)=>this.util.httpRequest(url, 'GET')))
    for await(const result of results) {
        if(result.status === 'fulfilled') {
        // ... 성공
        } else {
        // ... 실패
        }
    }
}

개수를 줄인다고해서 모든 Promise가 fulfiled의 상태, 즉 성공한다는 보장은 없었습니다. 위와같은 경우는 requestUrls의 배열에서 100개씩 추출하여 promise를 만들어내고 그다음에 promise.allSettled 함수를 사용하여 실행하는 구조로 바꾸니 일단 Promise의 관련한 에러는 발생하지 않았습니다. 물론 http 통신에 대한 에러는 종종 나기에 예외처리가 필요하긴 했습니다.

Node.js의 Worker를 사용하여 퍼포먼스를 더 높일 수도 있다고 생각이 듭니다만 생각보다 OPEN API 쪽에서도 응답에러가 많이 발생하여 일단 이정도로 구현해보았습니다.

프로그래머스 > 코딩테스트 연습 > 해시 > 완주하지 못한 선수

댕댕이발 — Wed, 22 Sep 2021 14:27:52 +0900

문제 설명

수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다.

마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요.

제한사항

마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다.
completion의 길이는 participant의 길이보다 1 작습니다.
참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다.
참가자 중에는 동명이인이 있을 수 있습니다.

입출력 예

participantcompletionreturn

["leo", "kiki", "eden"]	["eden", "kiki"]	"leo"
["marina", "josipa", "nikola", "vinko", "filipa"]	["josipa", "filipa", "marina", "nikola"]	"vinko"
["mislav", "stanko", "mislav", "ana"]	["stanko", "ana", "mislav"]	"mislav"

입출력 예 설명

예제 #1
"leo"는 참여자 명단에는 있지만, 완주자 명단에는 없기 때문에 완주하지 못했습니다.

예제 #2
"vinko"는 참여자 명단에는 있지만, 완주자 명단에는 없기 때문에 완주하지 못했습니다.

예제 #3
"mislav"는 참여자 명단에는 두 명이 있지만, 완주자 명단에는 한 명밖에 없기 때문에 한명은 완주하지 못했습니다.

[풀이]

public String solution(String[] participant, String[] completion) {

    HashMap<String, Integer> hashMap = new HashMap<String, Integer>();

    for (String s : participant) {
      if(hashMap.containsKey(s)) {
      	hashMap.put(s,hashMap.get(s).intValue()+1);
      } else {
      	hashMap.put(s, 1);
      }
    }

    for (String s : completion) {
      if(hashMap.get(s) > 0) {
        hashMap.put(s, hashMap.get(s).intValue()-1);
      }
    }

    String answer = "";
    for (Map.Entry<String, Integer> stringIntegerEntry : hashMap.entrySet()) {
      if(stringIntegerEntry.getValue().equals(1)) {
        answer = stringIntegerEntry.getKey();
      }
    }
    return answer;
}

Go lang으로 xml parser 구현

댕댕이발 — Sat, 20 Mar 2021 17:30:35 +0900

golang

다른 언어에서도 흔히 할 수 있는 XML 파일 Parser를 Golang 을 가지고 구현해보았습니다.

전 보통 Node.js나 순수 javascript의 코드를 이용해 소량의 XML 파일을 파싱하여 사용했었는데

대랑의 XML 파일 분석을 하기에는 싱글스레드 기반인 Node.js 의 처리방식이 부적합하다고 생각하여

추후에는 Go 의 장점인 고루틴을 활용한 멀티쓰레드 기능을 활용하여 다수의 파일 XML 파일 파싱을 구현해보려 합니다.

아직 Golang 에 대한 사용법이 익숙치않아 이 소스코드는 단건 XML 파일에 대한 파싱을 구현하였습니다.

디렉토리 구조

소스코드 구성은 main파일과 parser 파일로 굉장히 단순합니다. main 코드에서 parser 코드에 있는 함수를 호출하는 구조입니다.

[utils/parser.go]

package utils

import (
	"encoding/xml"
	"fmt"
	"io/ioutil"
	"os"
	"path/filepath"
)

type Gpx struct {
	XMLName xml.Name `xml:"gpx"`
	Trk     Trk      `xml:"trk"`
}

type Trk struct {
	XMLName xml.Name `xml:"trk"`
	Name    Name     `xml:"name"`
	Trkseg  Trkseg   `xml:"trkseg"`
}

type Name struct {
	Name string `xml:"name"`
}

type Trkseg struct {
	XMLName xml.Name `xml:"trkseg"`
	Trkpt   []Trkpt  `xml:"trkpt"`
}

type Trkpt struct {
	XMLName xml.Name `xml:"trkpt"`
	Lat     string   `xml:"lat,attr"`
	Lon     string   `xml:"lon,attr"`
	Ele     string   `xml:"ele"`
	Time    string   `xml:"time"`
}

func Run() {
	// 프로젝트 root 경로 기준
	p := filepath.Join("./files", filepath.Base("20210320143858.gpx"))
	fp, err := os.Open(p)
	if err != nil {
		panic(err)
	}
	defer fp.Close()

	// xml 파일 읽기
	data, err := ioutil.ReadAll(fp)

	// xml 디코딩
	var Gpx Gpx
	xmlerr := xml.Unmarshal(data, &Gpx)
	if xmlerr != nil {
		panic(xmlerr)
	}

	for index, coord := range Gpx.Trk.Trkseg.Trkpt {
		fmt.Printf("[index : %d] lat : %s, lon: %s", index, coord.Lat, coord.Lon)
	}
}

샘플 XML 파일의 태그구조가 쪼금 복잡하여 Type 정의가 좀 복잡해보일 수 있습니다.

최상단의 Tag부터 최하위 레벨의 태그를 순서대로 Type 정의한다고 생각해주시면 됩니다.

Type 정의 후에 파일을 읽고, 반복문을 통해 특정 태그를 print하는 구조입니다.

[main.go]

package main

import (
	"go_parser/utils"
)

func main() {
	utils.Run()
}

main 파일은 parser.go 파일에서 정의한 Run 함수를 호출하는 것이 다입니다. 물론 Golang의 내용을 공부하시면 아시겠지만

import한 함수를 사용하려면 해당 함수의 맨 앞 문자는 반드시 대문자로 작성하시는 것은 필수입니다.

[소스 전문]

github.com/JooHyeongLee/go_parser

[Node.js + Vue] 브라우저에서 서버에 있는 파일 다운로드하기

댕댕이발 — Thu, 12 Nov 2020 19:53:21 +0900

Node.js와 Vue (물론 기본적인 html도 가능합니다) 를 이용하여 서버단에 있는 파일을 다운로드하는 코드샘플입니다.

기본적인 express 서버를 띄우는 설정이나 실행환경 셋팅은 제외하였습니다.

[router.js]

1
2
3
4
5

const util = require('./util.js')
 
router.get('/download',(req, res, next)=>{
    util.download(req, res)
})
Colored by Color Scripter

cs

일단 기본적인 라우터 셋팅입니다. 단순하게 /download 라는 라우터로 진입했을 때 util.js 파일에 있는 download 함수를 실행시켜주는 코드입니다.

[util.js]

1
2
3
4
5
6
7
8
9
10
11

exports.download = (req, res) => {
    const date = new Date()
    res.setHeader("Content-disposition", "attachment; filename="+ date.yyyymmddhhmmss() +'.csv');
    res.set('Content-Type', 'text/csv');
    fs.createReadStream(`./data.csv`)
    .pipe(res)
    .on('finish', ()=>{
        console.log('download complete')
    })
})
 
Colored by Color Scripter

cs

header를 정의해주는 부분을 먼저 작성합니다. 파일 타입과 파일 저장시에 파일명을 시스템 시간으로 정의하였습니다.

그리고 CreateReadStream을 이용하여 서버에 있는 특정 파일을 다운로드 할 수 있게끔 파일명을 넣어줍니다.

마지막으로 pipe 메서드를 통해서 해당 스트림을 response로 전송합니다.

백엔드쪽 작업은 끝났습니다. 이제 간단하게 프론트단에서 버튼과 해당 API를 호출하는 코드를 작성합니다.

[index.vue]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<template>
    <div>
        <button @click="download">CSV 다운로드</button>
    </div>
</template>
 
<script>
export default {
    name: 'download',
    data() {
        return {
        }
    },
    methods: {
        download() {
            try {
                let element = document.createElement('a');
                element.setAttribute('href','/download');
                element.click();
            } catch(error) {
                console.log(error)
            }
        }
    },
}
</script>
Colored by Color Scripter

cs

Vue.js 코드이긴하지만, HTML의 아주 단순한 코드를 옮긴 코드입니다. 화면에 버튼이 있고, 해당 버튼을 누를 때 발생하는 이벤트 함수를 작성한 코드입니다. download 함수에는 단순하게 download 라우터를 호출하는 코드가 전부입니다.

물론 axios나 form tag 같이 라우터를 호출하는 다른 방식으로 해도 괜찮습니다.

기존 소스에서 해당 기능만 발췌하여 작성하였습니다. 해당 방식으로 구현한 모습은 아래와 같습니다.

파일 다운로드 페이지

서버에 있는 파일을 클라이언트의 PC에서 다운로드 받을 수 있게 되었습니다. 파일명은 위 서버 코드에서 작성했다시피 시스템 시간의 시분초의 파일명으로 기본셋팅되었습니다.