developia.soye.log

개요- vue3 프로젝트를 하면서 vuex를 통해 관리하던 상태변경을 pinia를 이용해야했다.- pinia 와 vuex의 차이점을 알고 사용해보기로 함- 이에 앞서 이전 버전과 다른 vue3의 설계구조를 알아야 함 -  Composition API vs Options API 의 차이  composition API란 무엇일까? -> vue3에서 도입된 새로운 방식의 컴포넌트 설계 방법. 이전에는 options API(옵션 객체 data, methods, computed, etc.를 이용하여 구성) 를 사용해 컴포넌트를 작성.composition API는 좀 더 유연하고 효율적인 코드를 작성할 수 있도록 해준다. 주요 개념은 **반응성(reactivity)**과 컴포넌트의 상태와 기능을 함수 기반으로 구성..

Vue 2025. 3. 12. 17:08

개요- 환경설정node 18.14.0  / vue3 / vite 과제형 프로젝트를 진행하면서 v-bind:class를 객체형태로 사용하고 조건식을 속성값으로 사용하는 방법을 쓰게 되었다.문제제기) input type="email" 에서 실시간 value값이 설정한 조건에 부합하는 경우 원하는 클래스명이 붙도록 하는 로직구현이 필요               input에 실시간으로 입력되는 값을 캐치해야하므로 watch() 속성에 구현 [과정]1. true, false값에 따라 구현되는 요소는 기존에 클래스명이 있다.2. 삼항연산자를 통해서는 한가지 조건만 충족할 수 있다. ( 기존에 가진 클래스명 / 조건에 부합하는 경우 ) -> 조건에 부합하지 않는 경우를 를 구현할 수 없음3. v-bind:class ..

Vue 2025. 3. 8. 15:12

깃허브 페이지 배포를 시도하면서 발생하는 오류를 기록해보자 1. vue 컴포넌트들이 뜨지 않는 이슈 배포를 했음에도 불구하고 vue 컴포넌트들이 build가 되지 않는 이슈가 발생했다. 개발자도구로 보니 assets 파일내에 css, 이미지가 있었지만 vue컴포넌트들과 관련된 js파일이 전혀없었다.구글링해보니 vite.config.js파일내 rollupOptions에 input관련 설정을 따로 해줘야만 한다는 사실을 알게 되었다.  컴포넌트 관련 포인트와 경로를 설정하고rollupOptions내 output을 따로 설정해 이미지와 css, js파일을 구별 설정을 따로 작성하였다.     2. plugin-vue export-helper.D4GAd3iU.js net::ERR_ABORTED 404 (Not ..

Vue 2025. 2. 16. 18:52

Tailwind.css 란?-Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크로 부트스트랩처럼 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내 스타일링이 가능하다. ** Tailwind.css의 특징- 매우 쉽고 빠르게 원하는 디자인을 개발할 수 있다.- 커스텀이 편리하다. 커스텀을 할 경우, 기본 스타일 값을 수정하는 방식이므로 디자인 일관성을 크게 해치지 않는다.- Intelli Sens 플러그인을 통해 세밀하게 원하는 디자인을 구현하기가 편하다. (미리보기, 자동완성, 신택스 하이라이팅, 린팅지원)- 편리하지만 코드가 지저분해보일 수 있다.(css가 분리되어있는 게 아니므로)   1. tailwind.css 설치하기 (with Nuxt.js)-  nu..

Vue 2025. 2. 13. 15:33

- 입사 테스트겸 nuxt.js를 사용해 볼 계기가 생겨 vue2 와 함께 작업을 해보기로 했다.    일단 nuxt.js란 무엇일까 nuxt.js란?nuxt.js는 vue.js를 기반으로 하는 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 그리고 클라이언트 사이드 렌더링(CSR)을 모두 지원하는 강력한 도구다.nuxt.js를 사용하면 vue.js로 개발할 때 복잡한 설정을 간소화하고, SEO(검색 엔진 최적화) 및 퍼포먼스를 개선할 수 있다. ** nuxt.js의 주요 특징 서버 사이드 렌더링 (SSR):기본적으로 서버 사이드 렌더링을 지원하여, 초기 페이지 로딩 시 서버에서 HTML을 미리 렌더링하고 클라이언트에 전송. 이는 SEO(검색 엔진 최적화)와 첫 페이지 로딩 속도..

Vue 2025. 2. 11. 17:36

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