Study/Vue23 Vue 2 ) 무한스크롤 페이징 구현하기 vue-infinite-loading 웹sns서비스를 구현하면서 타임라인과 팔로워,팔로잉 목록을 표시할 때 무한스크롤페이징을 구현하려 했습니다. 아래는 팔로잉 리스트를 불러오는 코드 소스코드 template code 더 이상 목록이 없습니다. script code data:{ page:0 // 페이지 초기값 지정 } methods:{ infiniteHandler($state) { axios({ method: 'get', url: `${SERVER_URL}/profile/${userpk}/memfollowings`+"?page=" + (this.page), headers: this.getToken, }).then(res => { setTimeout(() => { // 로딩스피너를 위해 1초의 지연시간을 설정했다. if(res.data.leng.. 2022. 1. 18. Vue 3 ) 반응형 api 를 이용해보자 반응형 기초 아래 글을 읽고 오시면 이해가 더욱 편합니다. 반응성과 관련된 APIs ref, refs 란?? 반응형 상태 선언하기 JavaScript 객체에서 반응형 상태를 생성하기 위해, reactive method 를 사용할 수 있습니다. import { reactive } from 'vue' // 반응형 상태 const state = reactive({ count: 0 })reactive 는 Vue 2 버전에서의 Vue.observable() API 와 동일한 것으로, RxJS 의 observables 과 혼동을 피하기 위해 이름을 바꿨습니다. 여기서 반환된 상태는 반응형 객체입니다. 반응형 변환은 "deep" - 전달된 객체의 모든 중첩된 속성 (property) 에 영향을 미친다는.. 2022. 1. 14. Vue 3 ) TodoApp 제작 Vue 3 버전을 학습하기 위해서 가장 간단하면서도, 몇 번 만들어 보았던 TodoApp 을 다시 한 번 만들어 보기로 했습니다. 목차 1 - 결과물 미리보기 2 - 학습 내용 2-1. 프로젝트 생성 및 확인 2-2. 필터와 localStorage 저장기능 구현 2-3. 컴포넌트 구현 글을 마치며 TodoApp 결과물 구현 기술 Vue 3 Vite 2 [Vue) Vite?, 왜 사용할까? Vite란? Vue3버전으로 개발을 함에 있어 별다른 번들 생성 없이 ES 모듈을 바로 웹 브라우저에 렌더링 할 수 있도록 만든 개발 툴입니다. 왜 Vite 를 사용하나요? Vite 의 등장배경 👓 현재 Webpack, Rollup jongik.tistory.com](https://jongik.tistory.com/11.. 2022. 1. 12. Vue 3 ) Vite 2로 생성한 프로젝트에 TailwindCSS 적용하기 Vite로 생성한 Vue3 프로젝트에 TailwindCSS 적용하기 1. 프로젝트를 생성 npm init @vitejs/app vue3-blog cd vue3-blog 저는 vite 2 버전으로 프로젝트를 생성했습니다. 2. TailwindCSS 설치 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p npm 을 통해 tailwindCSS 와 해당 종속성을 설치한 다음 init 명령을 실행해 tailwind.config.js 와 postcss.config.js 파일을 생성합니다. 3. 경로 설정 // tailwind.config.js module.exports = { content: ["./index.html", "./src/*.. 2022. 1. 11. Vue ) <script setup> 은 또 뭐 Vue3 공식문서를 참고했습니다. 제 영어 실력 부족으로 인해 번역이 매끄럽지 않은 부분이 있을 수 있습니다.. 내부 코드는 구성 요소 setup() 기능의 내용으로 컴파일됩니다. 다시말해, {{ msg }} import 도 같은 방식으로 노출됩니다. methods 옵션을 통해 노출하지 않고도 템플릿 표현식에서 가져온 Helper 함수를 직접 사용할 수 있습니다. {{ capitalize('hi') }} 반응성 (Reactivity) 반응성 API 를 사용하여 반응성 상태를 명시적으로 생성해야 합니다. setup() 함수에서 반환된 값과 유사하게 ref 는 템플릿에서 참조될 때 자동으로 unwrapping 됩니다. {{ count }} 컴포넌트 사용 케밥케이스도 정상적으로 작동하지만 일관성.. 2022. 1. 10. Vue 3 ) Ref, Refs ?? Refs Vue 2 까지 쓰이던 this.$refs 를 Vue 3 의 Composition API 에서는 각각 함수로 제공됩니다. setup() 함수 내에서 각 Refs 를 import 하여 사용할 수 있습니다. ref 전달받은 기본 자료형 변수를 반응형 객체로 변경합니다. 이 객체의 value 속성을 통해서 자유롭게 변경할 수 있습니다. 일반적으로 이렇게 나온 반응형 객체를 ref 라 칭합니다. unref ref 를 다시 일반 변수로 바꿉니다. 내부적으로 프록시 객체에서 분리하는 과정을 진행합니다. toRef reactive API 로 생성돈 객체의 속성을 ref 를 이용해 반응형 객체로 생성합니다. toRefs toRef 를 해당 객체의 모든 속성에 적용합니다. isRef ref 객체인지 확인합니다... 2022. 1. 9. Vue 3 ) Vue3 에서 제공하는 반응성과 관련된 APIs 반응성 관련 API Vue 3 는 프록시를 이용해 반응성을 관리합니다. 어떤 변수가 반응성을 가지게 하기 위해서는 프록시로의 변환이 필요하고, 반응성을 해제하기 위해서는 프록시에서 일반 변수로의 변환이 필요합니다. reactive 객체의 속성들이 반응성을 갖게 만들어줍니다. 일반적으로 기본 자료형 변수가 반응성을 갖도록 할 때 ref 함수를 이용하는데, 객체의 속성으로 변수들을 모아 reactive 를 사용하면 변수의 개수가 많을 때 매우 유리하게 사용할 수 있습니다. readonly 일반 객체나 프록시 객체를 읽기전용 프록시로 변경합니다. 기본적으로 객체 내 모든 속성을 읽기전용으로 변경합니다. isProxy 인자로 들어온 변수가 reactive 나 readonly 등으로 만들어진 프록시 객체인지 확인.. 2022. 1. 9. Vue 3 ) Provide ? Provide 란? 일반적으로 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때는 props 를 이용합니다. 하지만 부모와 자식 관계가 깊어질수록 props 로 데이터를 전달하는 데는 한계가 있습니다. Vue2 까지는 이 문제를 해결하기 위해 Event Bus 를 생성하거나 Vuex 에 데이터를 담았었습니다. 하지만 Vue3 에서는 Event Bus 와 같이 비정형적 데이터 전송이 프로젝트의 관리를 어렵게 하기 때문에, $on, $off, $once 와 같은 이벤트 method 를 모두 삭제했습니다. Vue3 에서는 Provide/Inject 를 활용해 이러한 문제를 해결할 수 있습니다. 부모 컴포넌트에서 어떤 데이터를 provide 해주면 자식 컴포넌트에서 해당 데이터를 inject 해서 사용할 수.. 2022. 1. 9. Vue 3 ) Props Props props 는 컴포넌트에 데이터를 넘겨줄 수 있는 사용자 지정 속성입니다. 컴포넌트를 생성할 때 props 옵션을 이용해 어느 이름의 props 데이터를 받을지 결정하게 됩니다. 일반적으로 props 라는 옵션에 Props로 넘어오는 속성의 키 값들을 배열로 지정하면 사용에 큰 문제가 없습니다. props: ["name", "age"] 하지만 어떤 컴포넌트는 특정한 Props 를 필요로 할 수도 있고, 정해진 데이터 타입에 맞게 들어왔는지 확인이 필요할 수도 있습니다. 이럴 때는 props 옵션의 값을 배열 대신 객체로 변경하고 각 Props 데이터의 상세 내용을 지정해주면 됩니다. type 데이터 타입을 정의합니다. default 해당 Props 가 들어오지 않을 경우 사용할 기본값을 가지게.. 2022. 1. 8. 이전 1 2 3 다음 반응형
