코드 기어 Code Gear - 개발 강좌

Frontend 개발시에 Device 종류를 알아야 하는 경우가 있습니다.
예를들면, Device 종류가 Mobile 인지 PC 인지에 따라 CSS를 다르게 처리하는 등의 일입니다.

이때 device를 알기 위해서는 @nuxtjs/device 라는 패키지를 사용합니다.

Nuxt3에서 @nuxtjs/device의 셋팅 방법과 사용방법에 대해 알아봅니다.

@nuxtjs/device 패키지 설치

npm 또는 yarn으로 @nuxtjs/device 패키지를 설치합니다.

# npm 사용시
npm install @nuxtjs/device

# yarn 사용시
yarn add @nuxtjs/device

nuxt.config.ts 설정

modules에 @nuxtjs/device를 추가하고, device 설정을 추가합니다.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/device'],
  
  // 기본 device 설정
  device: {
    refreshOnResize: true,  // 창 크기 변경시 디바이스 감지 새로고침
    defaultUserAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36',  // 기본 User Agent
    detectOnInitialize: true  // 초기화시 디바이스 감지
  }
})

플러그인 생성

plugins 폴더에 device.ts 파일을 생성합니다.

export default defineNuxtPlugin((nuxtApp) => {
  const device = useDevice()

  // 디바이스 정보를 전역 상태로 관리하고 싶을 때
  const deviceStore = useState('device', () => ({
    isMobile: device.isMobile,
    isTablet: device.isTablet,
    isDesktop: device.isDesktop,
    userAgent: device.userAgent
  }))

  return {
    provide: {
      deviceInfo: deviceStore
    }
  }
})

사용 방법

device 정보를 가져올 Vue 소스에서 deviceInfo를 선언합니다.

const { $deviceInfo } = useNuxtApp();

$deviceInfo.isMobile 을 사용하여 mobile 여부를 체크할 수 있습니다.

<div class="mobile-css" v-if="$deviceInfo.isMobile"/>

Amazon linux version 2 와 Amazon linux 2023 에서 docker 설치 방법에 살짝 차이가 있습니다.

이 글은 Amazon linux 2023에 docker를 설치하는 방법에 대해 알아보겠습니다.

1. 패키지를 업데이트 합니다.

sudo yum update -y

2. Docker community edition을 설치합니다.

sudo yum install -y docker

3. Docker service 를 시작합니다.

sudo service docker start

4. ec2-user를 사용하지 않고도 docker를 실행할 수 있도록 docker 그룹에 sudo를 추가합니다.

sudo usermod -a -G docker ec2-user

5. ssh 창을 닫고 다시 접속합니다.(권한 적용)

6. ec2-user 없이 sudo가 docker 명령을 수행할 수 있는지 확인합니다.

docker ps

7. 아래와 같은 결과가 나오면 셋팅이 정상적으로 완료된 것입니다.

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

드라마나 영화를 보면 주인공은항상 위기를 겪는다.

하지만 이런 상황에서도 주인공은 절대 좌절하거나 포기하지 않는다.

설령 포기하더라도 어떤 계기가 찾아오게 되고,

이 어려운 과정을 극복하기 위해 온갖 역경을 이겨나간다.

이것이 결국 이 스토리의 중심이 되고, 그 과정을 통해 주인공의 캐릭터가 명확하게 그려진다.

해리포터가 평범한 마법사로 살았다면 지금 같은 스토리는 절대 만들어지지 않았을 것이다.

때로는 다치기도 하고, 엄청난 시련을 겪기도 하지만 그것을 이겨냈을때 비로소 해피엔딩에 다다르게 된다.

이건 비단 드라마와 영화에만 국한되지 않는다.

스포츠에서도 무난하게 이기는 경기보단 대 역전극을 이뤘을때 더 많은 감동을 받게된다.

우리의 삶도 마찬가지가 아닐까?

억지로 드라마 같은 스토리를 만들라는 얘기는 아니다.

하지만 우리의 인생은 충분히 힘들고, 어렵다.

지금 우리의 삶이 위기를 겪고 있다면,

그 어떤 때보다도 고통스럽고 견디기 힘들다면,

이것은 우리의 스토리를 멋지게 만들어가는 과정이라고 생각해 보자.

먼 훗날 내 인생 이야기의 완성을 위한 커다란 밑거름이라고....

Dart로 첫 번째 프로그램을 만들고 실행하는 법에 대해 알아보겠습니다.
에디터는 Visual Studio Code(VSCode)를 사용합니다.
 

Flutter Extention 설치

VSCode에 Flutter extention을 설치합니다. Flutter extention을 설치하면 Dart도 같이 설치가 됩니다.
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

Dart Project 생성

VSCode에서 Command Pallete를 실행합니다.
VSCode의 메뉴에서 "보기-명령 팔레트"를 선택하거나, 단축키 Command+Shift+P를 누릅니다.

Command Pallete에 "Dart"를 입력합니다.

다음 화면에서 "Cosole Application"을 선택합니다.

다음 화면에서 프로젝트 폴더명을 입력 합니다.
저는 "dart_first_app"라는 폴더명을 사용했습니다.

입력 후 "Select a folder to create the projec in"을 클릭합니다.

폴더 생성 후 프로젝트 명을 입력합니다.
저는 "dart_first_app"이라고 입력하였습니다.

이제 첫번째 프로젝트가 완성되고 아래와 같은 화면이 나옵니다.

Dart 프로젝트 실행

프로젝트 우측 상단의 실행 버튼을 클릭합니다.

프로젝트가 정상적으로 실행되면 아래와 같이 "Hello World" 로그가 나옵니다.

 
이렇게 Dart 첫번째 프로젝트가 완료되었습니다.

Flutter의 개발 언어로 잘 알려진 Dart에 대해 알아보겠습니다.

이 글은 dart 의 공식 홈페이지를 참조하여 작성 하였습니다.

https://dart.dev/

Dart 의 장점

아래는 Dart 공식 홈페이지에 가면 가장 먼저 보이는 배너입니다.

"Instant hot reload" 라는 것을 강조하고 있습니다.

이것은 프로그램을 개발 할 때 코드가 변경되는 즉시 반영이 된다는 뜻입니다.

컴파일과 빌드를 요구하는 다른 언어들은 전체 코드를 빌드하는데 일정 시간이 소요됩니다.

개발시 UI 관련 코드를 변경하고 바로 확인할 수 있다는 것은 큰 장점입니다.

• 개발 효율의 증가 - 시간 단축
• 빠른 피드백 - 테스트나 디버깅에 유리

다른 장점들에 대해서도 설명하고 있습니다.

• Approachable
  • 친숙한 언어이다 - 다른 언어에서 사용한 문법과 유사한 형태를 가지고 있어 언어에 쉽게 접근할 수 있습니다.
  • 강력한 Type 언어이다 - 명확한 type 정의를 사용하여 사전에 오류를 막을 수 있습니다.
  • NULL Safe 언어이다 - 변수에 null을 할당할 수 없습니다. 따라서 실행 중 null point exception과 같은 오류에서 자유로워질 수 있습니다.
• Productive development
  • Dart는 개발 생산성을 높여주는 언어입니다.
  • Hot reload를 제공하여 개발 속도를 높이고, 빠르게 실험해 볼 수 있습니다.
  • 여러 Editor와 통합 환경을 제공함으로 개발 편의성을 높였습니다.
• Portable and fast on all platforms
  • 여러 platform에서 동일한 코드로 실행되는 언어입니다.
  • iOS, Android 같은 모바일 환경 뿐만 아니라, desktop, web, server등의 다양한 환경에서 작동 가능합니다.

Dart의 단점

• Native App과 똑같지는 않습니다. 즉 iOS, Android 등 Native 가 가지고 있는 고유한 형태의 app 보다는 범용적인 형태의 app 개발에 유리합니다.
• 개발 생태계가 크지 않습니다. 다른 성숙한 언어들에 비해 커뮤니티, 오픈소스, 플러그인 등이 많지 않습니다.
• 브라우저에서 개발시 transpile 해야 하므로 성능이나 디버깅에 제한이 있을 수 있습니다.

결론

• Flutter와의 통합으로 크로스플랫폼 개발을 할 수 있습니다. 복잡한 기능이 아니라면 적은 비용으로 iOS, Android용 앱을 모두 개발 할 수 있습니다.
• 간결한 문법으로 쉽게 접근이 가능하고, 다양한 Editor를 사용할 수 있습니다. 복잡하지 않은 기능의 앱을 빠르게 개발 하고자 한다면 Dart를 사용해 보는 것도 좋은 선택지가 될 것 같습니다.

Flutter 개발 환경 설정에 대해 알아봅니다.

이 글은 Flutter 공식 홈페이지의 Get Started 문서를 참조하였습니다.

https://docs.flutter.dev/get-started/install

플랫폼 선택

환경에 맞게 선택하시면 됩니다.
저는 맥을 선택하였습니다.

Type of app

다음으로는 어떤 종류의 앱을 만들 것인지를 선택해야 합니다.

저는 iOS를 선택하였습니다.

Software 설치

• Apple Sillicon을 사용하는 Mac일 경우 Rosetta 2 translation process를 설치해야 합니다.
  • Mac에서 intel 기반의 app을 실행할 때 필요한 유틸리티입니다.

sudo softwareupdate --install-rosetta --agree-to-license

• XCode 설치
  •  Swift 와 ObjectC code를 컴파일하고 디버깅 하기 위해 XCode를 설치합니다.
  • https://developer.apple.com/xcode/

• CocoaPods 설치
  • Native앱에 Flutter plugin 컴파일이 가능하도록 CocoaPods을 설치합니다. 
  • https://cocoapods.org/

• 아래 명령어를 사용하여 cocoapods를 설치합니다

sudo gem install cocoapods

• cocoapods 설치시 다음과 같은 오류가 발생할 수 있습니다.

ERROR:  Error installing cocoapods:
	ERROR: Failed to build gem native extension.

• 이때는 xcode-select를 인스톨 하면 됩니다.
  • xcode-select는 XCode의 명령줄 관리 도구입니다.

xcode-select --install

• 간혹 xcode-select도 아래와 같이 설치가 안될 경우가 있습니다.

xcode-select: note: Command line tools are already installed. 
Use "Software Update" in System Settings or the softwareupdate 
command line interface to install updates

• 이때는 software update를 download 하여 설치하면 해결 할 수 있습니다.
  • software update는 운영 체제와 관련된 모든 소프트웨어 업데이트를 자동으로 설치하는 기능을 수행합니다.
  • 따라서 다운로드 및 설치 시간이 좀 많이 소요됩니다.

softwareupdate --install -a

• 다운로드가 완료되면 "시스템 설정"에 업데이트가 표시되고, 업데이트를 클릭 하시면됩니다.
  • 업데이트가 완료되면 다시 CocoaPods를 설치합니다.

sudo gem install cocoapods

• 설치가 완료되면 다음과 같이 메시지가 표시됩니다.

Text Editor Settings

• Text editor는 Visual Studio Code, Android Studio, IntelliJ IDEA등을 사용할 수 있습니다.
• 저는 Visual Studio Code를 선택하였습니다.
• Visual Studio Code를 설치하고, 실행합니다.
• 아래 링크에 있는 Dart Extention을 추가합니다.
• https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
• Command Palette를 실행합니다. 단축키는 Command+Shift+P 입니다.
• Command Palette에서 "flutter"를 입력합니다.

• "Flutter:New Project"를 선택합니다.
• 이때 Flutter SDK가 설치 되어 있지 않으면 다운로드하여 설치하시면됩니다.
• 설치가 되어 있다면 위치를 지정해주면 됩니다.
• SDK 설치 후에 Command Palette에서 "Flutter:New Project"를 선택하고 "flutter-first" 라는 프로젝트를 생성합니다.

iOS 개발환경 설정

• XCode를 설치합니다.
• XCode의 버전에 맞는 command line tool을 설치합니다.

sudo sh -c 'xcode-select -s /Applications/Xcode.app/Contents/Developer && xcodebuild -runFirstLaunch'

• XCode license에 동의 서명을 합니다.

sudo xcodebuild -license

iOS Simulator 설치

• iOS Simulator를 설치합니다.

xcodebuild -downloadPlatform iOS

• Simulator를 실행합니다

open -a Simulator

• XCode를 실행합니다.
• 메뉴에서 Windows - Devices and Simulators를 선택합니다.
• simulator 탭을 클릭하면 사용 가능한 리스트가 나옵니다.

• XCode에서 flutter_first 프로젝트를 엽니다.

• 탐색 창에서 flutter_first 프로젝트 아래 있는 ios를 선택하면 됩니다.

• XCode 상단의 파란색 실행 버튼을 클릭합니다.

• 아래와 같이 simulator가 실행됩니다.

이전 post 에서 Multiple database connection 설정 방법에 대해서 알아보았습니다.

@InjectRepository에서 아래와 같이 connection을 명시적으로 작성을 해주었습니다.

@InjectRepository(Slider, 'sliderConnection')
private sliderRepository: Repository<Slider>

그런데 @InjectDataSource()를 사용시에는 database schema를 찾지 못하는 문제가 발생합니다.

@InjectDataSource()
private dataSource: DataSource

이럴 경우에는 @Entity에 스키마 정보를 명시적으로 작성해주면 됩니다.

@Entity({ name: 'slider', database: 'slider' })

database 에 작성된 slider는 shema name입니다.

AWS Code Pipeline을 사용해서 Build시 다음과 같은 오류가 발생하는 경우가 있습니다.

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed 
- JavaScript heap out of memory

문제 해결을 위해 검색을 해보면 대부분 아래와 같이 heap memory 옵션을 추가하라고 나옵니다.

export NODE_OPTIONS="--max-old-space-size=8192"

하지만 이 옵션의 경우 AWS 빌드 컨테이너의 메모리 사이즈가 이것보다 클 경우만 사용 가능한 옵션입니다.

즉, 기본적으로 빌드 컨테이너의 메모리가 부족하면 이것을 늘려도 소용이 없다는 뜻입니다.

이 경우 빌드 컨테이너의 메모리를 늘려서 문제를 해결할 수 있습니다.

AWS 콘솔에서 Code Build - Build Project 메뉴에 들어가서 프로젝트를 선택하면 설정된 메모리를 보실 수 있습니다.

편집 버튼을 클릭하면 메모리 사이즈를 변경할 수 있습니다.

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를 사용하는 방법에 대해 알아보았습니다.