The Focus (556) 썸네일형 리스트형 Vue 비동기 통신, fetch vs axios 기본은 Promise then 방식. async await 방식은 하단에 기술.fetchnative javascriptaxiosvue.js 패키지와 별도로 설치, npm install axios// import 문 불필요fetch(url[, options]) // 프라미스 1차 return .then(response => { // 다음에 있는 then 이 사용할 값을 return return response.json(); // text(). 프라미스 2차 return }) .then(data => { // response.json() 을 data 에 담아서 처리 }) .catch(error => { // .then(null, error => { ..... } 에 해당 });o.. Vue 상태관리 Pinia, Options API VS Composition API Options APIComposition API// /src/stores/파일Opt1.js // Options Storeimport { defineStore } from 'pinia';// Options 나 Composition API 인 .vue 모두 에서 사용 가능export const use파일Opt1Store = defineStore('파일Opt1', { state() { // 데이터 정의. 반응형. Setup Store 에서 ref() 와 reactive() 사용해야 함 return { bar1: 값, }; }, getters: { // 반응형. Setup Store 에서 computed() 사용해야 함 foo11(state) { // 필요시 state 인자로 사용.. Vue, Options API VS Composition API Options API~ Vue3Composition API, setup() hookVue3Composition API, Sugar syntaxVue3.2 ~ foo1()" /> lit-html 에서 readonly, checked, disabled, selected 설정 원문 : https://velog.io/@jerrynim_/lit-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-4n-%EB%B0%94%EC%9D%B8%EB%94%A9 다음과 같이 lit-html 을 사용한다고 해 보자..import { html } from 'lit-html';const sValue = "값1"; if (조건1) { return html`readonly value="${ sValue }">`} else { return html``} 위와 같은 코드를, 아래와 같이 (if 문을 없애고 변수에 담아서) 바꾸면 작동할까..?const sReadonly = 조건1 ? 'readonly' : ''; (아래.. Vue3 + Typescript + script setup ... ... ...OuterComponent> Composable 제공 함수는 작업 대상을 파라미터로 주입하는 방식 추천. ... 인 경우,Options API 에서는 this.$refs.ref1 또는 this.$refs['ref1'] 과 같이 사용하지만,Composition API 에서는 const ref1 = ref(); 으로 정의하고, ref1.value 로 사용.Options API 보다 코딩량이 늘어나는 이유가 되기도 해서,.value 를 많이 사용하는 개체라면..script 상단에서 .value 를 담을 변수를 let 으로 정의하고,onMounted() 에서 해당 변수에 .value 를 담아서 활용하는 것도 나쁘지 않음....const refDiv1 = ref(); // 변수명은 re.. 'Vue + Vite' 에서의 이미지 사용 요령 0.1 Vite 는 dev 또는 build 시.. /src/ 에서 먼저 이미지를 찾고 /src/ 에 없으면 /public/ 에서 찾으며 /src/ 와 /public/ 에 없으면 에러(또는 이미지 표시X) 0.2 Vite 는 build 시.. /src/ 에 이미지가 있으면, 이미지 파일 사이즈에 따라 base64 인코딩, 또는 /dist/img/ 경로에 신규 생성 /public/ 에 파일이 있으면, /dist/ 에 무조건 그대로 복사 (파일명과 생성일자 변경 없음). vite.config.ts 파일의 build.rollupOptions.output 항목 참조. /src/assets/ 아래에 존재하는 이미지 중 .vue 에서 기술된 파일만 적용하는게 아니라면.. .. Vue 개발 구성 조합 Vue + Vite + Typesript + Mixin + Pinia + Axios + Vue-Router + Lit-Html - Vue 3 : Option API 또는 Composition API. React 나 다른 F/W 도 좋긴 함- Vite 5 : Dev 또는 Bundler. Webpack 도 쓰이긴 하지만, Vite 퍼포먼스 보면 끝- Typescript 5 : 귀찮긴 해도 안정적- Mixin 0 : methods 만 사용 추천. Composable 은 Composition API 인 경우 사용- Pinia 2 : 캐시 또는 전역 데이타. 브라우저 Storage 연계 플러그인 존재. Vuex 는 deprecated- Axios 1 : 서버 비동기 연계- Vue-Router 4 : SSR - J.. Vue 2024, Webpack VS Vite, Composition API VS Option API 원문: https://velog.io/@sehyunny/insights-and-trends-in-vuejs-2024 - Webpack 과 Option API 등을 계속 지원할 거라고 합니다. ^^; 이전 1 2 3 4 5 ··· 70 다음