개발 (50) 썸네일형 리스트형 [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는 리액트와 달리 양방향 데이터 .. [map/filter] 자주 사용하는 배열 메소드 배열 메소드를 잘 알아두면 실무에 큰 도움이 된다고 한다. 간단히 정리해두고자 한다. map 함수와 filter는 형태가 비슷하다. 결론, 용도에 따라 적절한 함수를 사용하면 된다. map은 조건에 맞는 요소의 value값만을 배열에 넣어 반환한다. filter는 조건과 요소가 부합할 때(true) 해당 요소의 key:value 값을 배열에 넣어 반환한다. [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.. [토막글] Fake REST API JSONPlaceholder - Free Fake REST API (typicode.com) [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);.. [vite] Vue3 + Typescript 프로젝트 생성 vue-cli만 사용해 오다가 vite가 그렇게 빠르대서 사용해보기로 했다. 우선 npm 버전과 vue 버전을 확인해 본다. npm -version 8.11.0 vue --version @vue/cli 5.0.1 프로젝트 생성 npm init vue@latest Need to install the following packages: create-vite-app Ok to proceed? (y) create-vite-app 설치가 필요하다고 하면 Ctrl + C를 눌러 create-vite-app을 설치한다. npm create vite@latest 커스터마이즈로 typescript + vue-router를 설치해준다. Select a variant: » Customize with create-vue 다음.. CSS transform CSS transform - 엘리먼트를 마음대로 변형하는 속성이다. 위치를 옮길 때 회전시킬때 크기 확대 축소 박스 비틀기 등 이전 1 2 3 4 5 6 7 다음
