프로젝트 진행 중, 마크다운 에디터로 toast-ui/vue-editor를 사용하고 있는데, 해당 에디터에서 사진 파일 업로드 시 Base64 형태로 반환된다. Base64 이라 길이가 엄청 길기 때문에, s3에 업로드하고 해당 url을 content에 저장하는 방법으로 변경하였다. 이렇게 엄청 길게 들어가게 돼서, 조금만 용량 큰 사진을 업로드하면 아래와 같이 413 오류가 떴다. 그래서 변경한 방법 Vue.js와 Toast UI Editor를 사용하는 경우엔 바로 hooks 옵션을 주니 인식이 되지 않아서 이런식으로 options 에서 hooks 메소드를 추가했다. ( Toast UI Editor는 Vue.js와 함께 사용될 때, 옵션을 정의하기 위해 `options` 객체를 사용한다고 함) 해당 위..
현재 vue.js 와 springboot 를 통신 중인데, 이미지 업로드를 시도하고 있다. form으로 전체를 감싸는 것 말고, 폼 데이터로 보내는 법을 기록해보겠다! vue.js 사진: @change 를 활용해 input을 했을 때 setPhoto라는 함수를 실행하게 했다. accept 로 파일은 image만 가능하게 한다. methods: { setPhoto(){ let frm = new FormData(); let photoFile = document.getElementById("photo"); frm.append("photo", photoFile.files[0]); axios.post("/api/photo", frm, { headers: { 'Content-Type': 'multipart/form..
📌Axois? 뷰에서 권고하는 HTTP 통신 라이브러리(Promise 기반) Vue.js에 종속되는 것은 아니고, 다른 js에서도 많이 사용됨 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양함 📌설치 NPM 방식 npm install axios 📌 사용방법 get data new Vue({ el: '#app', methods: { fetchData: function() { axios.get('/todos/save') .then(function(response) { console.log(response); }) .catch(function(error) { console.log(error); }); } } }) .then 비동기 통신 성공했을 때 콜백을 인자로 받아 결과..
📌 Vuex 프로젝트가 커질수록 props를 이용해 보내는 방식은 코드가 복잡해지고 유지 보수가 어려워 Vuex를 사용한다. Vuex는 React의 Flux 패턴에서 기인했다. 자세히 기록된 블로그 Vue.js 애플리케이션을 위한 상태 관리 패턴 + 라이브러리 모든 컴포넌트가 공유할 수 있는 싱글톤 방식의 데이터 저장소 npm install vuex State // store.js import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); export const store = new Vuex.Store({ // counter라는 state 속성을 추가 state: { counter: 0 } }); state : 컴포넌트 간에 공유할 data 속성 뷰에..
📌 Slot slot은 부모 컴포넌트에서 자식 컴포넌트의 엘리먼트를 지정할때 사용 부모에 따라서 자식의 컴포넌트에 영향을 받을 테니, 컴포넌트 재사용성면에서 좋은 장점을 가짐 태그 사용 {{header}} {{header}} {{header}} 📌 Named Slot 지정 슬롯 {{header}} {{header}} 👉 주의 {{header}} {{titl}} {{author}} component가 끝나기 전에 authorLabel, titleLabel이 출력되어야 하므로 ⇒ template 태그 쓰면 사용 가능 ⭐ (밑 목록 Slot에 기록) ⇒ 아무 값도 출력 되지 않음 component의 props에는 title, author만 존재 {{header}} {{titleLabel}} {{authorLa..
📌 Props 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할때 사용되어지는 단방향 데이터 전달 방식 하위 컴포넌트에서는 props 옵션을 사용해 수신할 props를 명시적으로 선언해야 함 # 하위 컴포넌트 js Vue.component('child', { // props 정의 props: ['message'], // 데이터와 마찬가지로 prop은 템플릿 내부에서 사용할 수 있으며 // vm의 this.message로 사용할 수 있습니다. template: '{{ message }}' }) # 상위 컴포넌트 html template
📌 Components 기본 HTML 엘리먼트를 확장하여 재사용가능한 코드를 캡슐화하는 데 도움이 됨 각각의 컴포넌트 간 데이터 이동은 단방향만 가능 가져올 때는 부모 컴포넌트에 props로 변수에 값을 넣어주면 자식이 읽어올 수 있음 📌 전역 컴포넌트 뷰로 접근 가능한 모든 범위에서 사용 가능 뷰 라이브러리 로딩하고 나면 접근 가능한 Vue 변수를 이용하여 등록함 vue가 만들어지기 전에 미리 만들어 둬야함 Vue.component('컴포넌트 이름', '옵션') 📌 지역 컴포넌트 특정 인스턴스에서만 유효 범위를 가짐 my-componet 와 myComponent 는 똑같은 걸로 인식 Vue3 에서는 component 부를 때 단일 태그로 가능했는데 Vue2 는 단일 태그로 하니까 오류났음 const c..
