본문 바로가기

VUE6

Vuex 기초 설정 및 사용 모든 컴포넌트들이 데이터를 공유하는 하나의 파일을 만드는 것입니다. 쓰임새도 생김새도 리덕스와 비슷한 듯 보입니다. npm install vuex@next store.js import { createStore } from "vuex"; const store = createStore({ state() { return { likes: 0, }; }, }); export default store; main.js import { createApp } from "vue"; import App from "./App.vue"; import store from "./store.js"; createApp(App).use(store).mount("#app"); 데이터를 관리할 파일을 만들고 연결합니다... 2023. 4. 21.
slot 과 mitt slot {{ item }} ... 태그 안에 데이터를 바인딩할 땐 slot 태그를 사용할 수 도 있습니다. 단순히 내려주는 태그 사이에 넘겨줄 데이터를 넣고 사용할 곳에 slot 태그를 넣어주면 데이터가 보입니다. 다음과 같이 필터 이름을 넘겨주고 받을 수 있게 됩니다. 데이터 1 데이터 2 {{ SON.message }} ... 여러 데이터를 넘겨주고 싶을 땐 slot 태그의 name 속성과 template의 v-slot 속성을 같이 연결해 주면 가능합니다. 하위 컴포넌트의 데이터를 slot 속성으로 넘겨주고 부모 컴포넌트가 받아 쓸 수 도 있습니다. 뭐 이렇게도 데이터 넘겨줄 수 있다 정도만 알고 그냥 props 쓰는 게 좋습니다. mitt npm install mitt main.js import .. 2023. 4. 20.
Vue를 이용한 여러 기능 구현 AJAX 요청 App.vue 더보기 서버와의 통신은 크게 다르지 않습니다. 약속된 URL의 요청을 보내고 응답의 데이터를 저장하면 됩니다. fetch도 사용할 수 있지만 호환성 때문에 axios를 쓰는 게 더 좋습니다. 탭 구현 PostContainer.vue 다음과 같이 변수를 만들고 그에 맞게 적용될 태그를 나눠 탭을 구현할 수 있습니다. 이미지 업로드 App.vue 더보기 + 파일을 받을 인풋 태그를 만듭니다. 속성에 multiple을 추가하여 여러 파일을 받을 수 있으며 accept="image/*" 속성을 추가하여 이미지 파일만 먼저 보이게 할 수 있습니다.(완벽한 규제가 아니기에 type을 따로 조건을 짜서 검증하는 게 좋습니다.) 업로드한 파일을 event.target.files로 먼저 잡아.. 2023. 4. 19.
Vue 라우팅 Basic npm install vue-router@4 우선 라이브러리를 설치하고 시작합니다. DummyData.js 더보기 export default [ { title: "첫 째 프로젝트 : 허위매물 전문 부동산 앱", content: "Vue를 이용하면 비누같이 매끈한 앱을 만들 수 있습니다", date: "September 24, 2021", number: 0, }, { title: "둘 째 프로젝트 : 오마카세 배달 앱", content: "음식이 아니라 셰프를 직접 배달해드립니다", date: "October 20, 2020", number: 1, }, { title: "셋 째 프로젝트 : 현피 앱", content: "거리를 설정하면 가장 가까운 파이터를 소개해드려요! 서로 싸워보세요", da.. 2023. 4. 17.
Vue 기초 2 input 데이터 받기 ProductModal.vue {{ productLists[productIndex].price * month }} 인풋 태그를 만들고 다음과 같이 사용자의 입력을 month 데이터에 넣어줄 수 있습니다. "@input" 속성은 입력이 변할 때마다 적용되고 "@change"속성은 입력하고 사용자가 인풋 창을 벗어날 때 적용됩니다. 이렇게 "v-model" 속성으로 위와 똑같은 기능을 수행하는 코드를 작성할 수 있습니다. 이 속성은 정보를 받는 모든 태그에 적용이 가능합니다. 또 받아오는 데이터는 모두 문자열이기 때문에 속성 뒤에 타입을 지정해서 받을 수 있습니다. watcher로 데이터 감시 ProductModal.vue {{ productLists[productIndex].titl.. 2023. 4. 14.
Vue 기초 1 채용공고를 찾아보며 힘들게 Vue 안 쓰는 곳만 고르고 고르다 지쳐서 그냥 배워보기로 했습니다... Vue의 장점 일단 SPA 웹 앱 개발 툴 React, Angular, Vue 3대장 중 가장 쉽습니다. 다른 코드와 다르게 개발하는 방식이 다양하지 않아 스타일 통일이 쉽습니다. HTML 렌더링이 빨라 실시간으로 반영하기 좋습니다. 꾸준히 업데이트되기에 장기적으로 지원이 좋습니다. 개발환경 설정 npm install -g @vue/cli vue create first-practice npm run serve Vue 개발을 위한 라이브러리를 설치합니다. Vue 프로젝트를 생성합니다. 프로젝트 실행하여 화면에 출력합니다. 기본 구조 이렇게 파일 하나에 화면을 렌더링 하는 template 부분과 데이터, 함수.. 2023. 4. 13.

티스토리툴바