Nuxt의 핵심 기능 중 하나는 파일 시스템 라우터이다. pages/ 디렉토리 내의 모든 Vue 파일은 파일 내용을 표시하는 해당 URL(또는 경로)을 생성한다. Nuxt는 각 페이지에 대한 동적 가져오기를 사용하여 코드 분할을 활용하여 요청된 경로에 대해 최소한의 JavaScript를 제공한다. Pages Nuxt 라우팅은 vue-router를 기반으로 하며, 파일 이름을 기반으로 pages/ 디렉터리에 생성된 모든 구성 요소에서 경로를 생성한다. 이 파일 시스템 라우팅은 명명 규칙을 사용하여 동적 및 중첩된(nested) 경로를 생성다. | pages/ ---| about.vue ---| index.vue ---| posts/ -----| [id].vue 아래는 생성된 라우터 파일 { "routes"..

Nuxt는 스타일링에 있어서 매우 유연하다. 자신만의 스타일을 작성하거나 로컬 및 외부 스타일시트를 참조하기 위해서 CSS 전처리기, CSS 프레임워크, UI 라이브러리 및 Nuxt 모듈을 사용하여 애플리케이션 스타일을 지정할 수 있다. 로컬 스타일시트 로컬 스타일시트를 작성하는 경우 이를 배치하는 자연스러운 장소는 assets/ 디렉토리다. 페이지, 레이아웃 및 구성 요소의 스타일시트를 직접 가져올 수 있다. javascript 또는 CSS 문을 임포트 하기위해 @import 문을 사용할 수 있다. 힌트) 위의 경우 스타일시트는 Nuxt가 렌더링한 HTML에 인라인된다. CSS 속성 Nuxt 구성에서 css 속성을 사용할 수도 있다. 스타일시트의 자연스러운 위치는 assets/ 디렉토리다. 이 경우 해..

// scss 인 경우 export default defineNuxtConfig({ vite: { css: { preprocessorOptions: { scss: { additionalData: '@use "~/assets/_colors.scss" as *;' } } } } }) Nuxt는 두 개의 디렉토리를 사용하여 스타일시트, 글꼴 또는 이미지와 같은 애셋을 처리한다. .public/ 디렉터리 콘텐츠는 서버 루트에서 그냥 그대로 제공된다 .assets/ 디렉터리 에는 일반적으로 빌드 도구(Vite 또는 webpack)에서 처리할 모든 애셋이 포함된다 public 디렉토리 public/ 디렉토리는 애플리케이션의 정의된 URL에서 공개적으로 사용 가능한 정적 자산이다. 애플리케이션의 코드나 브라우저의 루..

Nuxt는 애플리케이션의 사용자 인터페이스를 구현하기 위한 여러 구성 요소 레이어를 제공한다. 기본적으로 Nuxt는 이 파일을 진입점 으로 처리 하고 애플리케이션의 모든 경로에 대한 콘텐츠를 렌더링한다. Welcome to the homepage Vue에 익숙하다면 일반적으로 Vue 앱을 생성하는 main.js 파일이 어디에 있는지 궁금할 것이다. Nuxt는 이 작업을 백그라운드에서 수행한다. 컴포넌트 대부분의 컴포넌트, 버튼이나 메뉴와 같이 재사용 가능한 사용자 인터페이스다. Nuxt에서는 이러한 컴포넌트를 components/ 디렉터리에 생성할 수 있으며 명시적으로 임포트할 필요 없이 애플리케이션 전체에서 자동으로 사용할 수 있다. Welcome to the homepage This is an aut..

설치 각 패키지 관리자별로 설치 방법 정리한다. 터미널을 열고, 아래 명령 중 하나를 수행한다. // npx npx nuxi@latest init // pnpm pnpm dlx nuxi@latest init // bun bunx nuxi@latest init VSCode 를 통해 프로젝트를 연다. code 다시 터미널에서 프로젝트의 패키지 의존성을 해결한다. - VSCode, Intellij 에 내장된 터미널을 이용해도 된다. // yarn yarn install // npm npm install // pnpm pnpm install // bun bun install 기본 구성된 어플리케이션 서버 띄우기 - Development Server // yarn yarn dev --open // npm npm ..

미션 크리티컬한 소프트웨어 개발에서 자동화된 테스트는 필수적이다. 테스트를 자동화하면 개별테스트 및 테스트 모음을 빠르고 쉽게 반복할 수 있다. 이는 릴리스 품질 및 성능 목표를 충족하는지 확인 가능하게 한다. 자동화 테스트는 적용 범위를 늘리고 개발자에게 더 빠른 피드백 루프르 제공한다. 자동화 테스트는 개별 개발자의 생산성을 높이고 소스코드 제어 체크인, 기능 통합 및 버전 릴리즈와 같은 중요한 소프트웨어 개발 수명 주기 시점에 꼭 필요한 단계이다. 이러한 테스트는 단위 테스트, 엔드투엔드(e2e) 테스트, 통합 테스트 등 다양한 유형에 걸쳐있다, Nest는 효과적인 테스트를 포함한 개발 모범 사례를 제공하기 위해 다음과 같은 기능이 포함되어 있다. 구성요소에 대한 기본 단위 테스트와 애플리케이션에 ..