풀소유

[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..

Express 설치 및 초기 설정Express란?Express는 Node.js를 위한 빠르고 간결한 웹 프레임워크이다. 미들웨어와 라우팅 기능을 제공하여 서버와 API를 쉽게 구축할 수 있게 도와준다.프로젝트 초기 설정mkdir express-apicd express-apinpm init -ynpm install express mongoose corsnpm install --save-dev typescript ts-node @types/node @types/express @types/corsnpx tsc --initTypeScript 설정tsconfig.json 파일을 생성하고 다음과 같이 설정한다.{ "compilerOptions": { "target": "ES2020", "module":..

웹 사이트에 회원가입을 해야지만 이용할 수 있는 페이지가 있다. 이처럼 누구나 접속할 수 있는 경로를 공개 라우트, 로그인한 사용자만 접속 가능한 경로를 비공개 라우트라고 한다.예제회원가입을 해야지만 이용할 수 있는 비공개 라우트와 누구나 접근 가능한 공개 라우트를 설정하는 예제이다. 이를 위해 RequireAuth 컴포넌트를 사용해 비공개 라우트를 보호하고, Layout 컴포넌트를 통해 공통 레이아웃을 정의한다.useAuth.tsximport type {FC, PropsWithChildren} from "react";import {createContext, useCallback, useContext, useState} from "react";import * as U from "../utils";// L..

react-router는 React 애플리케이션에서 클라이언트 사이드 라우팅을 처리할 수 있게 도와주는 라이브러리이다.React Router의 주요 기능경로 기반 라우팅: URL 경로에 따라 다른 컴포넌트를 렌더링 한다.네스티드 라우팅: 라우트 안에 라우트를 중첩하여 복잡한 내비게이션을 구현한다.동적 라우팅: URL 매개변수를 사용하여 동적인 콘텐츠를 처리한다.프로그램적 내비게이션: 코드에서 직접 내비게이션을 제어할 수 있다.라우트 보호: 인증 및 권한 관리를 통해 특정 라우트 접근을 제어한다.설치npm i react-router Routes, Route, LinkRoutesRoutes는 React Router v6에서 도입된 새로운 컴포넌트로, 라우트의 집합을 정의하는 역할을 한다. 이전 버전에서는 S..