반응형 개발34 Nuxt 3 에서 더이상 Moment.js 말고 Day.js 사용하자 지금까지 Nuxt 2를 사용하면서 날짜시간을 처리하기 위해 Moment.js를 사용하였다. 하지만 Nuxt 3로 프로젝트를 시작하면서 Nuxt3에서 Moment를 통합가능한 모듈을 찾을 수가 없었고, 대안으로 Day.js를 찾게 되었다. 이에 관련해서 자세한 내용을 정리하였다. Moment.js 개발 종료 충격적이게도 Moment.js가 legacy project 상태로 바뀌었다. 아니 이미 3년전 버전인 2.29.0부터 legacy project 였었다. 그동안 이 사실을 모르고 @nuxtjs/moment 라는 Nuxt 2에서 간단하게 moment를 통합할 수 있는 모듈이 있어서 당연한 듯이 사용했었다. Nuxt 3로 프로젝트를 만들고 Moment.js 모듈을 Nuxt에 통합하기 위해 nuxt-mome.. 2023. 6. 13. Vue.js 강좌 3. 반응성 - 어떻게 자동으로 DOM이 변경될까? Vue의 핵심 기능 중에 하나가 바로 반응성(Reactivity)이다. 반응성이란 상태(State) 변경을 추적하여 DOM을 자동으로 업데이트시켜주는 기능이다. 반응성을 어떻게 활용하는지를 설명하고, 어떤 원리로 이게 가능한지를 설명하겠다. 반응성(Reactivity) 반응성이란 컴포넌트의 상태(State)가 바뀌었을때 자동으로 컴포넌트의 DOM을 변경해주는 것이다. 상태(State)란 쉽게 말해 컴포넌트를 그리는데 연관된 데이터이다. 이 상태 데이터가 변경되면 우리는 컴포넌트의 모습도 바꾸어 줘야 한다. Vue에서는 상태가 바뀔때마다 컴포넌트의 DOM을 우리가 일일이 바꾸어주는 코드를 짤 필요가 없다. Vue가 알아서 자동으로 업데이트를 해주기 때문이다. 이것들 반응성(Reactivity)이라고 하는 .. 2023. 6. 12. Vue Multiple Layout (다중 레이아웃) 적용하기 Nuxt를 사용하면 자동으로 다중 레이아웃이 가능하게 세팅된다. 하지만 Nuxt를 사용안하고 Vue만 사용한다면 이걸 자체적으로 구현해야 한다. 가장 간단하면서도 효율적으로 다중 Layout 구성을 해보는 방법을 Vue 3를 기반으로 설명한다. 우리의 목표는 페이지마다 다른 레이아웃을 선택해서 사용할 수 있도록 하는 것이다. Vue3 기본 프로젝트를 기반으로 여러 개의 레이아웃을 만들고 페이지마다 다른 레이아웃을 어떻게 적용시킬 수 있는지를 코드를 보면서 설명하도록 하겠다. 이해하기 쉽게 최소한의 코드만으로 샘플소스를 만들었다. 프로젝트 구조 기본적으로 Vue 3를 기반으로 프로젝트를 만들었고, 아래와 같이 폴더 구조를 구성하였다. 기본 구조에 layouts, pages 폴더를 추가하였다. 그외에는 Vu.. 2023. 6. 7. [Vue + Vite] 근데 Vite는 뭔가요? Vue 3로 오면서 Vue 프로젝트를 만들면 Vite 기반으로 빌드설정이 이루어지게 된다. Vite는 기존의 Vue CLI를 대체하기 위한 툴이다. Vite를 이용하여 Vue 프로젝트의 스캐폴딩을 만든다라고 보면 된다. 따라서 Vue3를 사용하면 Vite가 뭔지를 먼저 알고 넘어가야 한다. Vite Vite는 프론트엔드 개발을 위한 툴이다. 한글로는 비트라는 발음에 가깝다. Vue에 종속되어 있는 툴이 아니라 React, Vanilla, Svelte 등 프론트엔드 개발 어디서든 사용될 수 있다. Vite는 크게 2가지 역할을 한다. Dev Server : 개발 환경에서 HMR과 같은 기능을 제공하는 개발용 서버 기능 Build : Production 배포를 위한 소스코드 번들링 기능 기존의 Vue CLI.. 2023. 6. 6. 이전 1 2 3 4 5 6 ··· 9 다음 반응형
