주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

Astro 프레임워크 체험기 챗 지피티에게 물어본 Astro의 주요 특징1. 멀티 프레임워크 지원: Astro는 React, Vue, Svelte, Solid.js 등 다양한 프론트엔드 프레임워크의 컴포넌트를 한 프로젝트에서 함께 사용할 수 있습니다.2. Partial Hydration (부분 하이드레이션): Astro는 기본적으로 정적 HTML을 생성하며, 필요한 부분만 JavaScript로 하이드레이션(동적으로 활성화)하여 클라이언트에서 실행합니다.이를 통해 JavaScript 로딩을 최소화하고 페이지 로드 속도를 최적화합니다.3. 파일 기반 라우팅: 파일 구조를 기반으로 라우팅을 자동으로 처리합니다.4. 빠른 빌드와 최적화: Vite를 기반으로 하여 빌드 속도가 매우 빠릅니다. 정적 HTML을 우선..

React의 가상 DOM, Vue의 가상 DOM과 비교 가상 DOM이란?DOM (Document Object Model)브라우저가 제공하는 문서 객체 모델HTML 요소를 트리 구조로 표현하며, 브라우저에서 렌더링되는 실제 DOM을 말한다.실제 DOM은 업데이트가 발생할때마다 전체 DOM 구조를 다시 계산하고 렌더링한다. 가상 DOM (Virtual DOM)메모리 상에서 실제 DOM의 경량화된 사본을 만드는 개념으로 DOM 상태를 Javascript 객체로 나타내어 빠르게 연산할수 있다. 실제 DOM 조작 전에 변경 사항을 비교하고 필요한 부분만 실제 DOM에 업데이트 하는 방식으로 성능 최적화를 하기 위하여 생성된다.리액트는 가상 DOM을 업데이트 할때 최소한의 DOM 업데이트를 보장하기 때문에 복잡한 ..

this.$router.push(동일path)일 경우 에러가 나고 새로 고침을 하자니 SPA페이지에서 낭비인 것 같기도 해서 어떤 방식을 써야하나? 고민을 하다가 찾은 방식. (기록을 위한 작성) 검색하다가 알게된 블로그에서 3가지 방식을 알려주고 있었다. v-if 방식, forceUpdate 방식, 그리고 key를 통한 방식. 가장 추천하는 방식으로 (vue가 원하는..?) 진행했다. 레이아웃 단계에서 진행. base-header 컴포넌트에 gnb가 있으며 nuxt 컴포넌트는 페이지이다. // BaseLayout.vue // base-header.vue {{nav.name}} // .... * 출처: 3가지 방식을 안내해줌 https://michaelnthiessen.com/force-re-render/

설치 npm i vuex store 폴더에 관리하기 위해 store폴더, 파일 생성 store/store.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { //... }, getter: { //... }, mutations: { //... }, action: { //... } }) 이런 형태로 작업하면 된다. - state: 여러 컴포넌트에 공유되는 데이터 - getter: 연산된 state값을 접근하는 속성 - mutations: state값을 변경하는 이벤트 로직이나 메서드 - actions: 비동기 처리 로직을 선언하는 메서드 그리고 store 파일을 등록해줘야..