본문 바로가기

Vue

Vue/vue 활용하기 2022. 6. 17. vue Toast UI Editor 적용기 사내 프로젝트를 하던 도중 기존에 사용하던 에디터가 너무 오래되어 교체를 할 필요성이 생겨 에디터를 새로 적용하기로 하였고 고민하던 도중 nhn에서 운영하는 오픈소스인 Toast Ui를 활용하기로 하였다. 처음에 사용한 Toast Editor는 Toast Ui에서 자체 vue로 래핑된 라이브러리를 제공해서 사용했었다. https://github.com/nhn/tui.editor/tree/master/apps/vue-editor GitHub - nhn/tui.editor: 🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible. 🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible..
Vue/vue 활용하기 2020. 4. 12. Spring-boot(mysql-mybatis-aws s3(cloudFront) + Vue.js 를 활용한 파일 업로드 하기 - 프론트 구성 https://loy124.tistory.com/204 (s3 서버 구축하기) https://loy124.tistory.com/205?category=768865 (s3 CloudFront와 연동하기) 기초 셋팅 https://loy124.tistory.com/206 백엔드 구성편 https://loy124.tistory.com/207 프론트 구성편 https://loy124.tistory.com/208 vue.js script 방식을 활용해서 간단하게 file upload를 테스트해보았다. File Submit 이미지 리스트 받아오기 {{galleryData.title}} 파일 업로드 버튼 클릭 선택이 된것을 확인할수 있다. submit 버튼 제출시 console.log창에 success가 잘 나오고 ..
Vue/vue 활용하기 2020. 4. 12. vue image preview(vue 이미지 미리보기) 컴포넌트 만들기 https://codepen.io/loy124/pen/ZEbGQaW vue image preview ... codepen.io codepen에도 업로드 해두었다.(테스트 가능) 프로젝트를 진행중에 파일을 업로드하기전 파일 업로드시 이미지 미리보기 를 나타내주는 컴포넌트가 필요해서 제작하게 되었다. 사진 등록 사진은 가로로 찍은 사진을 권장합니다. (가로 사이즈 최소 800px) 사진 용량은 사진 한 장당 10MB 까지 등록이 가능합니다. 이미지 실사진 최소 3장 이상 등록하셔야 하며, 가로사진을 권장합니다. 로고를 제외한 불필요한 정보(워터마크,상호,전화번호 등)가 있는 매물은 비공개처리됩니다 일반 사진 등록 x 추가 사진 등록 js 파일 files.file 에는 실제 file의 데이터가 담겨있고 fil..
Vue/vue 기초 공부하기 2020. 3. 21. vue-router API 이해해보기 Vue router 라이브러리를 사용하기 전에 Vue router가 어떤것인지에 대한 개념에 대한 공부가되었다. import Vue from "vue"; import App from "./App.vue"; const Login = { template: "Login Page" }; const routes = { "/": App, "/login": Login }; new Vue({ el: "#app", computed: { VueComponent() { return ( routes[window.location.pathname] || { //url 경로를 반환 template: "Page not found " } ); //path경로에 해당하는것을 routes에서 찾고 반환 } }, render(h) { re..
Vue/vue 기초 공부하기 2020. 3. 8. MVVM 모델의 ViewModel에 다해 알아보기 Model - View - ViewModel (MVVM) Object.defineProperty(viewModel, 'model', { get() { return model;}, set(value){ model = value; h1.innerHTML = model; } }); 해당 함수를 활용하면 model의 값이 바뀔때마다 바로 view도 변하게 된다
Vue/vue 기초 공부하기 2020. 2. 22. Vue로 틱택토만들기(Vuex) https://github.com/loy124/Vue/tree/master/틱택토Vuex loy124/Vue Vue 공부. Contribute to loy124/Vue development by creating an account on GitHub. github.com store을 활용해서 데이터를 모두 vuex store에 저장하고 root파트인 TicTacToe.vue에서 해당 데이터를 불러오는 방식이다 store.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); //Vue.use 를 사용할때마다 $axios등 기능들이 추가되는 방식 //mutation의 이름들을 변수로 빼고 export 한다 //오타확률을 줄이기위해 이렇게 변수로 ..
Vue/vue 기초 공부하기 2020. 2. 22. Vue로 틱택토 만들기(EventBus 활용) https://loy124.tistory.com/185 Vue로 틱택토 만들기( $root.data를 활용) https://github.com/loy124/Vue/tree/master/틱택토 loy124/Vue Vue 공부. Contribute to loy124/Vue development by creating an account on GitHub. github.com 일일히 props에 데이터를 넘겨주는 방식에 굉장.. loy124.tistory.com 위 코드와 거의 유사하나 EventBus를 활용하여 중앙 통제 함수를 만들어서 활용한다 EventBus는 함수를 중앙통제 관리하고 Vuex는 데이터를 중앙통제 관리하는점이 차이라고 한다 빈 껍데기인 EventBus.js를 만들어준다 import Vue ..
Vue/vue 기초 공부하기 2020. 2. 22. Vue로 틱택토 만들기( $root.data를 활용) https://github.com/loy124/Vue/tree/master/틱택토 loy124/Vue Vue 공부. Contribute to loy124/Vue development by creating an account on GitHub. github.com 일일히 props에 데이터를 넘겨주는 방식에 굉장한 불편함이 따르기때문에 props로 값을 넘겨주는 방식 + Vue 자체에서 $root 를 활용하여 최상단의 데이터값을 가져올수 있는 방식이 활용되었다 root쪽 Tictactoe.vue :table-data (v-bind:table-data) 를 활용하여 tableData의 값을 자식 컴퍼넌트 table-component에 넘겨준다 {{ turn }}님의 턴입니다. {{ winner }}님의 승리..

티스토리툴바