코드 기어 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 첫번째 프로젝트가 완료되었습니다.