developia.soye.log

1. vue 시작하기 - 개인프로젝트 관련해서 이전엔 Vue2를 사용했다면, 요즘 많이 사용하는 Vue3를 사용해보기로 했다.- Vue3에서는 모듈 번들러로 Webpack 보다는 Vite가 많이 권장되고 있는데다 추후 프로젝트를 지속적으로 수월하게 관리하기 위해 Vite를 사용하기로 했다.   2. vite를 이용해 vue 프로젝트 만들기 Vite란 무엇일까? vite는 빠르고, 최신 웹 개발 워크플로우를 위한 빌드 도구로 주로 React, Vue, Svelte 등 다양한 프론트엔드 프레임워크와 함께 사용된다. 빠른 개발 서버와 최신 브라우저 기능을 활용하여 개발자 경험을 개선하는 데 초점을 맞추고 있다. Vite와 Webpack의 비교:webpack은 번들링과 트랜스파일링을 모두 처리해야 하므로 초기 ..

Vue 2025. 1. 17. 10:33

뷰 디렉티브(directive) 란?html 태그안에 v- 접두사를 가지는 모든 속성을 일컫는다.디렉티브는 화면의 요소를 더 쉽게 조작하기 위해 사용하는 기능으로 뷰의 데이터 값이 변경되었을 때 화면의 요소들이 리액티브하게 반응하여 변경된 데이터값에 따라 갱신하게 된다.이런식으로 화면 요소를 직접 제어할 필요없이 뷰의 디렉티브를 활용하여 화면 요소를 조작할 수 있다.=> 개발자가 돔 요소를 직접 제어하지않고 프레임워크에 돔 요소 제어 권한을 위임함을 의미.  ** 자주 사용하는 주요 디렉티브디렉티브명역할v-if지정한 뷰 데이터 값의 참, 거짓 여부에 따라 해당 html 태그를 화면에 표시하거나 표시하지 않음v-for지정한 뷰 데이터의 개수만큼 해당 html 태그를 반복 출력v-showv-if와 유사하게 ..

Vue 2025. 1. 14. 15:48

vue 프로젝트를 실행하기에 앞서 vue 인스턴스의 생성주기(라이프사이클)를 알아보자.라이프 사이클을 크게 나누면 1.인스턴스의 생성(created), 생성된 인스턴스를 2.화면에 부착(mounted), 화면에 부착된 3.인스턴스의 내용을 갱신(updated), 4.인스턴스가 제거(destroyed)되는 소멸의 4단계로 이루어진다.    vue 프로젝트를 이행할때 우리는 데이터가 화면에 언제 반영되는지, 데이터 갱신이 언제 이루어지는지 등 적절한 데이터 반영과 그에 맞춘 화면 갱신을 알아야 할 필요성이 있다. 그렇다면, 라이프 사이클 속성을 조금 더 자세히 알아보자.   1. beforeCreate - 인스턴스가 생성되고 난 이 후 가장 처음으로 실행되는 라이프 사이클 단계.이 단계에서 data 속성, ..

Vue 2025. 1. 13. 18:53