개발/Vue.js (9) 썸네일형 리스트형 [Routing] Vue-Router 없이 라우팅하기 화면이 좌/우로 트랜지션(?)되는 라우터를 만들어보자. App.vue 각 컴포넌트의 표시 여부를 관리하는 showComponent2, showComponent3, showComponent4 변수를 선언했다. 전환 효과를 위한 transitionName 변수를 선언했다. 초기 화면에는 Component1만 보이게 하고 Component1에서 이벤트를 발생시키면, Component2가 나타나고, Component1은 사라진다. Component2에서 이벤트를 발생시키면, Component3 또는 Component4가 나타나고, Component2는 사라진다. Component3에서 이벤트를 발생시키면, Component2가 다시 나타나고, Component3은 사라진다. Component4에서 이벤트를 발생.. [Vue3] img 경로 설정, 엑스박스, 사진이 안 나올 때 이런 식으로 나오시는 분들(미래의 저를 포함)을 위해 이번에 블로그에 정리해둡니다. 저렇게 나오는 분들 대부분 이렇게 지정하셨을 거예요. 요렇게 src 폴더를 기준으로 하는 @ 상대경로로 바꿔주세여. [Vue3] Life-Cycle(라이프사이클) composition api를 사용하는 경우에는 setup hook에서 beforeCreate, created에 해당하는 과정이 한꺼번에 처리됩니다.. 이제까지 코드를 작성하면서 써온 setup() 메서드가 바로 setup hook입니다. 생명 주기 훅 등록하기 예를 들어 onMounted 훅은 컴포넌트가 초기 렌더링 및 DOM 노드 생성이 완료된 후 코드를 실행하는 데 사용할 수 있습니다: 인스턴스 생명 주기의 여러 단계에서 호출되는 다른 훅도 있으며, 가장 일반적으로 사용되는 것은 onMounted, onUpdated, onUnmounted가 있습니다. onMounted를 호출하면, Vue는 등록된 콜백 함수를 현재 활성 컴포넌트 인스턴스와 자동으로 연결합니다. 이를 위해서는 컴포넌트 설정 중에 이러.. [Vue3] Computed와 Methods 차이 methods나 computed나 그게 그거 아니야? 라는 생각이 들어 좀 더 공부를 하게 되었다. computed - template내부에 선언된 computed중에서 해당 함수와 연결된 값이 바뀔 때만 해당 함수만을 실행한다. methods -그런거 모르겠고 template내부에 선언된 methods중에서 update라이프사이클이 동작한(=아무 변수나 바뀐)다면 함수를 모두 실행한다. 고로, 딱 변화된 부분만을 감지해서 연산을 해주는 것이 computed이다. ChatGPT에게 둘의 차이를 예시를 들어 설명해달라고 부탁했다. Vue 3에서 methods와 computed 모두 컴포넌트 안에서 함수를 정의할 수 있는 방법입니다. 하지만 두 가지 기능은 차이가 있습니다. methods는 일반적인 함수이며.. [Vue3] Computed에 대해 ChatGPT에게 물어보기 Vue3의 Computed에 대해 ChatGPT에게 물어봤습니다. vue3의 computed는 어떤 용도야? 예시를 들어 쉽게 설명해줘 Vue 3의 computed는 Vue 인스턴스의 상태를 기반으로 계산된 값을 반환하는 함수입니다. computed는 Vue의 반응성 시스템을 활용하여, 의존하는 상태가 변경될 때마다 다시 계산되며, 계산된 값을 캐시하여 중복 계산을 피합니다. 예를 들어, 다음과 같은 Vue 컴포넌트가 있다고 가정해봅시다. 원의 반지름: {{ radius }} 원의 넓이: {{ area }} 이 컴포넌트는 radius라는 상태를 가지고 있고, 이를 기반으로 area라는 계산된 값을 가집니다. area는 computed 속성에 정의된 함수를 통해 계산됩니다. 이 때, computed 내부에.. ChatGPT에게 물어본 Composition API와 React Hooks의 차이 Vue.js 3의 Composition API와 React의 Hooks는 매우 유사한 목적과 기능을 가지고 있습니다. 둘 다 상태와 라이프사이클 로직을 컴포넌트 로직에서 분리하고, 함수형 프로그래밍을 촉진하여 코드의 재사용성과 가독성을 높이기 위해 만들어졌습니다. 그러나 두 API 간에는 몇 가지 차이점이 있습니다. Vue.js 3의 Composition API는 Options API와 함께 사용될 수 있으며, 기존의 Options API를 보완하기 위해 만들어졌습니다. 이에 비해 React의 Hooks는 기존의 라이프사이클 메서드를 대체하기 위해 만들어졌습니다. 또한 Vue.js 3의 Composition API는 반응형 시스템과 밀접하게 연결되어 있습니다. Vue.js는 리액트와 달리 양방향 데이터 .. [axios/json] REST Api를 통해 받아온 정보 파싱하기 통신을 위해 fake rest api를 이용하기로 했다. 내장 라이브러리인 fetch부터 공부하는 것이 순서에 맞으나 이전에 axios를 학습했던 경험이 있어 오늘은 axios로 테스트해본다. //rest api에서 받아온 값을 담기위한 변수 let dataSringify: any = []; let stringifyToParse: any = []; let directData: any = []; const runAxios2 = () => { axios.get('https://jsonplaceholder.typicode.com/todos/') .then((response) => { dataSringify.push(JSON.stringify(response.data)); console.log(dataSring.. [Vue3] script setup에 대한 고찰 vue3 script setup이 간편하다는 정보를 많이 접하게 되었다. | Vue.js (vuejs-korea.org) | Vue.js v3-docs.vuejs-korea.org (54) Vue 3 Script Setup Tutorial - This Changes Everything! - YouTube 대충 요약하자면 script setup을 사용하면 composition api를 활용해서 react hooks처럼 활용할 수 있게 만들어준다는 것이다. (아직 깊게 파고들지 않아서 정확하지 않을 수 있음) ref를 import해서 useState처럼 사용할 수 있다. 버튼을 누르면 count가 증가하는 프로그램을 만들어봤다. ref의 타입을 명시하지 않아도 되지만 기왕 타입스크립트 쓰는김에 ref(0);.. 이전 1 2 다음
