풀소유

[TS] Omit

Omit 타입은 주어진 타입 T에서 특정 속성 K를 제거한 새로운 타입을 생성합니다.즉, 기존 타입의 일부 속성을 제외한 타입이 필요할 때 Omit을 사용하면 매우 간결하게 원하는 타입을 만들 수 있습니다. 사용법예를 들어, 다음과 같이 Course 인터페이스가 있다고 가정해 봅니다.export interface Course { title: string; subtitle: string; courseSlug: string; content: string; thumbnail: string; video: string; rating: number; reviewsCount: number; studentCount: number; reviewsUrl: string; inflearnUrl: strin..

[Nuxt3] 컨테이너 배포 환경에서 메뉴 동적으로 관리하기

SI 솔루션의 특성상 잦은 변경이 발생하기 때문에, 코드 수정 없이 외부 설정을 주입해 동적으로 구성을 변경할 수 있는 방법이 필요합니다. Kubernetes 환경에서는 ConfigMap을, 도커 환경에서는 JSON 파일을 활용해 요구사항에 맞게 메뉴를 변경하도록 설정할 수 있습니다. 다만, 사용자가 URL을 통해 해당 설정 파일에 접근할 수 있다는 단점이 있습니다. 1. ConfigMap으로 메뉴 데이터 관리먼저, 메뉴 구성 정보를 JSON 파일로 작성합니다. 예를 들어, 아래와 같이 menu.json 파일을 생성합니다:[ { "label": "Home", "icon": "home", "to": "/home", "use": true }, { "label": "Inbox", "icon": "inbox..

[Nuxt3] TypeScript 설정

Nuxt 3를 사용하면서 TypeScript 환경을 보다 엄격하게 관리하고 싶다면, nuxt.config.ts 파일에서 아래와 같이 여러 옵션을 설정할 수 있습니다.pnpm install -D vue-tsc typescript// nuxt.config.tstypescript: { shim: false, // Nuxt가 자동으로 생성하는 Vue 파일의 타입 선언(shim)을 사용하지 않음 typeCheck: { // 빌드 시 타입 검사를 활성화하여 오류를 사전에 발견합니다. eslint: true, // 타입 검사와 함께 ESLint 검사도 실행 (true 또는 상세 옵션 객체 사용 가능) tsconfigPath: './tsconfig.json', // 사용할 tsconfig 파일의 경..

[Nuxt 3] Vuetify 3 SSR 오류 해결하기

“[Vuetify] Could not find defaults instance”오류 원인: SSR 환경에서 Vuetify 기본 설정이 초기화되지 않음해결책: 별도의 Vuetify 플러그인을 만들어 Nuxt 애플리케이션에 등록등록 방법: plugins/vuetify.ts 파일을 만들고, nuxt.config.ts에 플러그인을 추가 해결 방법1. Vuetify 플러그인 파일 만들기먼저, Nuxt 3에서 Vuetify를 서버와 클라이언트 모두에서 사용할 수 있도록 플러그인을 만듭니다.// plugins/vuetify.tsimport { createVuetify } from 'vuetify'import * as components from 'vuetify/components'import * as directiv..

다음은 NestJS에서 제공하는 예외 클래스와 그에 해당하는 HTTP 상태 코드 및 기본 메시지를 정리한 표이다. NestJS는 HTTP 상태 코드와 관련된 예외 처리를 기본적으로 제공하며, 이들은 모두 HttpException을 상속받아 구현되어 있다.기본 메시지는 NestJS가 기본적으로 제공하는 HTTP 상태 코드에 맞는 예외에 대한 설명이다.예외 클래스는 필요에 따라 커스텀 메시지를 추가로 제공할 수 있다.이 예외 클래스들은 HttpException을 상속받아 사용되며, 필요한 경우 예외 메시지나 상태 코드를 직접 지정할 수 있다.GlobalExceptionHandler를 매번 구현할 필요 없이 그대로 사용하면 생산성을 높일 수 있을 것 같다.예외 클래스HTTP 상태 코드기본 메시지BadReque..

프로젝트에서 tsconfig.json과 ESLint 설정 파일(.eslintrc.js 또는 index.js)을 설정하다 보면, ES 버전이 서로 다르게 설정된 것을 발견할 수 있다. 예를 들어, TypeScript의 tsconfig.json에서 target을 ES2020으로 설정했지만, ESLint에서는 env 옵션이 es6로 설정되어 있을 수 있다.TypeScript와 ESLint는 각각 다른 목적을 위해 ES 버전을 설정하지만, 프로젝트의 일관성을 위해 이 둘을 맞춰주는 것이 좋다. TypeScript의 target과 ESLint의 parserOptions.ecmaVersion을 동일한 ECMAScript 버전으로 설정하면, 최신 자바스크립트 기능을 사용하면서도 일관된 코드 스타일을 유지할 수 있다...

Turborepo를 활용하면 모노레포 환경에서 공통 라이브러리와 설정을 효과적으로 관리할 수 있다. 병렬 빌드, 캐싱, 전역 스크립트 등의 기능을 통해 개발 프로세스를 최적화하고, 공통 패키지를 통해 코드의 일관성과 품질을 유지할 수 있다.병렬 빌드: 여러 작업을 동시에 실행하여 빌드 속도를 향상시킨다.캐싱: 이전 작업의 결과를 재사용하여 빌드 및 테스트 시간을 단축시킨다.워크스페이스 관리: 여러 패키지를 효율적으로 관리하며, 종속성을 명확히 한다.전역 스크립트: 모노레포 내 모든 프로젝트에 대해 통합된 스크립트를 실행할 수 있다.구조Turborepo의 일반적인 디렉토리 구조는 다음과 같다:my-turborepo/ │ ├── apps/ │ ├── web/ │ └── mobile/ │ ├── package..

ssr (Server-Side Rendering)Nuxt.js 애플리케이션이 페이지를 렌더링 하는 방식을 제어한다. 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR) 중에서 선택할 수 있다. ssr: true: 서버 사이드 렌더링을 활성화하여 페이지를 서버에서 렌더링 한다. 이 경우, 사용자가 페이지를 요청할 때 서버가 HTML을 생성하여 클라이언트에 전송한다. 이 방식은 초기 로딩 속도가 빠르고 SEO(검색 엔진 최적화)와 페이지 로딩 성능이 향상될 수 있다. Nuxt.js의 기본값이다. ssr: false: 클라이언트 사이드 렌더링만 수행하여 서버에서 렌더링하지 않는다. 이 경우, 페이지는 클라이언트 브라우저에서 JavaScript를 통해 렌더링 된다. 초기 페이지 로딩 시 HTML이 ..

플러그인은 Nuxt.js 애플리케이션의 전역적으로 사용할 수 있는 기능을 확장하는 JavaScript 파일이다. 플러그인은 애플리케이션 초기화 시 실행되며, Vue 컴포넌트, Vue 인스턴스, Vuex 스토어 등에서 공통적으로 사용할 수 있는 메서드나 서비스를 정의한다. 플러그인 정의플러그인은 plugins 디렉토리 또는 nuxt.config.js에서 설정된 다른 경로에 저장된다. 플러그인의 정의는 기본적으로 다음과 같은 형식으로 이루어진다:// plugins/my-plugin.jsexport default (context, inject) => { // context는 Nuxt.js의 컨텍스트 객체이다. // inject 함수는 전역으로 사용할 수 있는 메서드를 등록한다. inject('myMeth..

$nuxtNuxt 애플리케이션의 루트 인스턴스에 대한 참조로, 애플리케이션의 전역 상태나 기능에 접근할 때 사용된다. Vue 컴포넌트 내에서 this.$nuxt를 통해 접근할 수 있다.refresh(): 현재 페이지를 강제로 리프레시하고 데이터를 다시 가져온다.navigateTo(path): 특정 경로로 프로그래밍적으로 이동한다. (Nuxt 3에서 도입된 기능)isOffline: 애플리케이션의 네트워크 연결 여부를 확인할 수 있다. $routerthis.$router는 Vue Router 인스턴스를 나타낸다. Vue 애플리케이션 내에서 라우팅 관련 작업을 관리하는 객체로, 라우트를 변경하거나 라우트 관련 정보를 처리할 때 사용된다. 이 객체를 통해 애플리케이션의 내비게이션을 조작할 수 있다.push(pa..