window.pipedriveLeadboosterConfig = { base: 'leadbooster-chat.pipedrive.com', companyId: 11580370, playbookUuid: '22236db1-6d50-40c4-b48f-8b11262155be', version: 2, } ;(function () { var w = window if (w.LeadBooster) { console.warn('LeadBooster가 이미 존재합니다') } else { w.LeadBooster = { q: [], on: 함수 (n, h) { this.q.push({ t: 'o', n: n, h: h }) }, trigger: 함수 (n) { this.q.push({ t: 't', n: n }) }, } } })() Nuxt 3 - 인기 하이브리드 Vue 프레임워크 - The Codest
The Codest
  • 회사 소개
  • 서비스
    • 소프트웨어 개발
      • 프론트엔드 개발
      • 백엔드 개발
    • Staff Augmentation
      • 프론트엔드 개발자
      • 백엔드 개발자
      • 데이터 엔지니어
      • 클라우드 엔지니어
      • QA 엔지니어
      • 기타
    • IT 자문
      • 감사 및 컨설팅
  • 산업 분야
    • 핀테크 및 뱅킹
    • E-commerce
    • 애드테크
    • 헬스 테크
    • 제조
    • 물류
    • 자동차
    • IOT
  • 가치
    • CEO
    • CTO
    • 배달 관리자
  • 우리 팀
  • Case Studies
  • 방법 알아보기
    • 블로그
    • 모임
    • 웹 세미나
    • 리소스
채용 정보 연락하기
  • 회사 소개
  • 서비스
    • 소프트웨어 개발
      • 프론트엔드 개발
      • 백엔드 개발
    • Staff Augmentation
      • 프론트엔드 개발자
      • 백엔드 개발자
      • 데이터 엔지니어
      • 클라우드 엔지니어
      • QA 엔지니어
      • 기타
    • IT 자문
      • 감사 및 컨설팅
  • 가치
    • CEO
    • CTO
    • 배달 관리자
  • 우리 팀
  • Case Studies
  • 방법 알아보기
    • 블로그
    • 모임
    • 웹 세미나
    • 리소스
채용 정보 연락하기
뒤로 화살표 뒤로 가기
2022-05-25
소프트웨어 개발

Nuxt 3 - 인기 하이브리드 Vue 프레임워크

The Codest

필리프 토비아스

Vue.js 개발자

Nuxt 3는 인기 있는 하이브리드 Vue 프레임워크의 차세대 버전으로, 서버 측 렌더링 애플리케이션을 구축하는 데 Vue를 사용할 수 있습니다. 베타 버전은 2021년 10월 12일에 출시되었으며, 새로운 인트로 엔진, 더 가벼워진 번들 및 애드후크 Vite를 Nuxt Vue 3에 도입했습니다.

Nuxt 3 는 ESM 및 TypeScript를 기본적으로 지원하도록 재설계 및 재작성되었습니다. 현재 불안정하여 아직 프로덕션에 사용할 수 없습니다. 첫 번째 후보([email protected])는 2022년 4월 7일에 출시될 예정입니다.

다음 테이블

출처

새 프로젝트 시작

터미널을 열거나 Visual Studio에서 통합 터미널을 엽니다. 코드 를 클릭하고 다음 명령을 사용하여 새 스타터를 생성합니다. 프로젝트:

NPX NUXI INIT NUXT3-APP

nuxt3-app 폴더를 엽니다:

cd nuxt3-app

종속성을 설치합니다:

원사 설치

개발 서버를 실행합니다:

원사 개발

애플리케이션을 빌드합니다:

원사 빌드

빌드된 애플리케이션을 실행합니다:

원사 시작

새로운 기능은 무엇인가요?

Vue 3 지원

Vue 3 에는 애플리케이션을 훨씬 더 빠르고 쉽게 구축하고 유지 관리할 수 있는 몇 가지 새로운 기능이 추가되었습니다. 가장 중요한 변경 사항은 글로벌 Vue API와 이벤트 API입니다. Vue 3는 제공/인젝트, 컴포지션 API(아래 설명), 조각, 텔레포트와 같은 새로운 기능도 도입합니다.

컴포지션 API

컴포지션 API는 옵션 선언 대신 가져온 함수를 사용할 수 있는 API 세트를 제공하는 Vue 3 기능에 내장된 기능입니다. 따라서 컴포지션 API의 주요 장점은 더 나은 로직 재사용, 더 유연한 코드 구성 및 뛰어난 TypeScript 통합입니다. 새 API의 모든 부분은 다음과 같은 외부에서 사용할 수 있습니다. Vue 컴포넌트입니다.

Nuxt 3 새 디렉터리를 제공합니다. 컴포저블/ - 를 사용하면 Vue 컴포저블 인트로 애플리케이션을 자동으로 가져올 수 있습니다.

컴포저블 예제:

// useFoo()(확장자가 없는 파일 이름의 대소문자)로 사용할 수 있습니다.
 내보내기 기본 함수 () {
   return useState('foo', () => 'bar')// useFoo() (확장자 없는 파일 이름의 대소문자)로 사용할 수 있습니다.
 내보내기 기본 함수 () {
   return useState('foo', () => 'bar')
 }
 }

컴포저블을 사용하는 예시 Vue 컴포넌트입니다:

<div>{{ foo }}</div>
</>

위에서 볼 수 있듯이 컴포저블은 const 이름에 선언된 대로 useFoo로 내보내집니다. 내보내기 이름이 없는 경우 컴포저블은 파일 이름의 대/소문자를 구분하는 파셀케이스로 액세스할 수 있습니다. 또한 자동 가져오기된 컴포저블을 인기 있는 Vue 스토어 컴포저블과 쉽게 통합할 수 있습니다. Pina.

API 구조 예시

출처

니트로 엔진

Nitro는 풀스택 서버로 롤업과 Node.js 코드 및 컨텍스트 격리를 제공하기 위해 개발 중인 워커를 지원합니다. 또한 서버 API와 서버 미들웨어도 포함되어 있습니다. 프로덕션 환경에서 엔진은 애플리케이션과 서버를 하나의 디렉토리인 '.output'에 빌드합니다. 문제는 출력이 경량화되어 있다는 것입니다. 노드 모듈을 사용할 수 있습니다. Nitro를 사용하면 Node.js, 서버리스, 워커, 엣지 사이드 렌더링 또는 순수 정적 렌더링으로 출력을 배포할 수 있습니다. 

Nuxt 3 는 구성이 필요 없는 Azure 또는 Netlify에 배포할 수 있으며, 최소한의 구성으로 Firebase 또는 Cloudflare에 배포할 수도 있습니다.

Vite

Vite는 차세대 프론트엔드 툴링으로, 다음과 같은 기능이 내장되어 있습니다. Nuxt 3. 이 도구는 웹 프로젝트를 위한 더 빠른 개발 환경을 제공합니다. 개발을 위해 Vite 서버는 기본 ES 모듈에 비해 다양한 기능이 향상되었으며 매우 빠른 핫 모듈 교체(HMR)를 제공합니다.

빌드 과정에서 Vite는 사전 구성된 롤업과 코드를 번들로 묶어 프로덕션에 맞게 정적 에셋을 최적화합니다.

새로운 파일 구조

파일 구조 예제

출처

Nuxt 3 는 약간 변경된 파일 구조를 도입합니다. 가장 큰 변경 사항은 `app.vue` - `pages/` 디렉토리는 선택 사항이며, 없으면 로딩 페이지나 라우팅이 필요하지 않은 애플리케이션을 만들 때 유용한 vue-라우터를 애플리케이션에 포함하지 않습니다. 

app.vue 파일 예시:

안녕하세요!

라우팅, 페이지 및 레이아웃을 포함하려면 기본 제공 컴포넌트인 `NuxtPage` 및 `NuxtLayout`을 사용해야 합니다. 예시:

<div>
<p>&nbsp;&nbsp;&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;</p>
</div>

앱의 주요 구성 요소는 `app.vue`입니다. Nuxt 애플리케이션를 사용하므로 여기에 추가된 모든 항목이 전역으로 적용되어 모든 페이지에 포함됩니다. 

의 변경 사항은 Nuxt 디렉토리 구조는 `store/`를 `composables/` 디렉토리로 대체하는 것을 포함합니다. Vue 3상점을 대체하는 컴포저블을 소개합니다.

Nuxt Bridge를 사용하여 Vue 2에서 Vue 3으로 마이그레이션하기

Nuxt 3는 Nuxt 2 애플리케이션을 Nuxt 3 기능으로 업그레이드하는 하위 호환성 계층인 Nuxt Bridge를 도입하여 하나씩 업그레이드할 수 있습니다. 다음과 같은 기능에 액세스할 수 있습니다: 브리지를 설치하고 활성화하기만 하면 Nitro 엔진, 컴포지션 API 및 새로운 CLI와 같은 기능에 액세스할 수 있습니다.

Nuxt Bridge는 이전 버전과 호환되므로 레거시 플러그인 및 모듈은 계속 작동하며, 전체 애플리케이션을 다시 작성하지 않고도 쉽고 간편하게 마이그레이션할 수 있습니다.

Nuxt Bridge를 활성화하려면 개발 서버가 실행되고 있지 않은지 확인한 다음 패키지 잠금 파일을 제거하고 `nuxt-edge`를 설치해야 합니다:

- "nuxt": "^2.15.0"

"nuxt-edge": "최신"

그런 다음 모든 종속성을 다시 설치합니다:

원사 설치

Nuxt Bridge를 사용한 마이그레이션이 완료되었습니다!

또 다른 방법은 다음을 설치하는 것입니다. Nuxt Bridge를 개발 종속성으로 사용합니다:

yarn add --dev @nuxt/bridge@npm:@nuxt/bridge-edge

그런 다음 Nitro 서버가 빌드 프로세스에 가져오는 변경 사항을 고려하기 위해 `package.json`의 스크립트를 업데이트해야 합니다.

협력 배너

관련 문서

소프트웨어 개발

Vue.js 앱 개선. 몇 가지 실용적인 팁

Vue는 사용자 인터페이스 구축을 위해 빠르게 성장하고 있는 진보적인 프레임워크입니다. JavaScript는 GitHub에서 가장 많은 별을 받은 프레임워크이자 2016년 가장 높은 별을 받은 프로젝트가 되었습니다....

The Codest
도미니크 그르제지엘스키 시니어 Software Engineer
E-commerce

사이버 보안 딜레마: 데이터 유출

크리스마스 전 러시가 한창입니다. 사랑하는 사람들을 위한 선물을 찾기 위해 온라인 상점을 '습격'하려는 사람들이 점점 더 많아지고 있습니다.

The Codest
야쿱 야쿠보비치 CTO & 공동 설립자

지식창고를 구독하고 IT 분야의 전문 지식을 최신 상태로 유지하세요.

    회사 소개

    The Codest - 폴란드에 기술 허브를 둔 국제 소프트웨어 개발 회사입니다.

    영국 - 본사

    • 사무실 303B, 182-184 하이 스트리트 노스 E6 2JA
      영국 런던

    폴란드 - 현지 기술 허브

    • 파브리츠나 오피스 파크, 알레야
      포코주 18, 31-564 크라쿠프
    • 뇌 대사관, 콘스트럭터스카
      11, 02-673 바르샤바, 폴란드

      The Codest

    • 홈
    • 회사 소개
    • 서비스
    • Case Studies
    • 방법 알아보기
    • 채용 정보
    • 사전

      서비스

    • IT 자문
    • 소프트웨어 개발
    • 백엔드 개발
    • 프론트엔드 개발
    • Staff Augmentation
    • 백엔드 개발자
    • 클라우드 엔지니어
    • 데이터 엔지니어
    • 기타
    • QA 엔지니어

      리소스

    • 외부 소프트웨어 개발 파트너와의 협력에 대한 사실과 오해
    • 미국에서 유럽으로: 미국 스타트업이 유럽으로 이전을 결정하는 이유
    • 테크 오프쇼어 개발 허브 비교: 테크 오프쇼어 유럽(폴란드), 아세안(필리핀), 유라시아(터키)
    • CTO와 CIO의 주요 과제는 무엇인가요?
    • The Codest
    • The Codest
    • The Codest
    • Privacy policy
    • 웹사이트 이용 약관

    저작권 © 2025 by The Codest. 모든 권리 보유.

    ko_KRKorean
    en_USEnglish de_DEGerman sv_SESwedish da_DKDanish nb_NONorwegian fiFinnish fr_FRFrench pl_PLPolish arArabic it_ITItalian jaJapanese es_ESSpanish nl_NLDutch etEstonian elGreek ko_KRKorean