구성 Front End(React.js) Back End(Spring Boot) Image Server(API) 시나리오 Front에서 파일을 선택하여 Form Data를 Back End에 전송 Back End에서 파일을 받아서 RestTemplate을 이용하여 binary 데이터 형태로 Image Server에 전송 ...
이미지 데이터(base64)를 파일로 컨버팅
/** * 이미지 데이터를 파일로 컨버팅 * @param {String} data 이미지데이터 * @param {String} imageUrl 이미지 전체 주소 * @returns File객체 */ const dataURLtoFile = (data, imageUrl) => { const filename = imageUrl.substr...
Bootstrap Modal창 바깥영역 클릭시 닫히지 않게 하기
환경 Vue.js npm: bootstrap-vue Bootstrap의 컴포넌트인 모달은 기본적으로 모달하게 창을 띄워주지 않는다. 그래서 모달창의 바깥쪽을 클릭하면 모달창이 닫혀버리는데 이를 방지하게 위해 다음과 같은 속성(no-close-on-backdrop)을 준다. <b-modal id="modal" :no-close-on...
vuex 설명
잘되어있음…이것만 봐도 되겠음… https://webruden.tistory.com/340
vue-router3 사용
설치 npm install vue-router@3 vue-router 4가 나와서 이전 3와 설정방법이 다르다. 해당글은 vue-router 3를 사용한다. 게시판 화면 생성 <!-- ./components/board/List.vue --> <template> <div>게시판목록</div>...
Prettier 옵션
.prettierrc.js module.exports = { arrowParens: "avoid", // 화살표 함수에서 인자가 하나일 경우 괄호를 쓸지여부 endOfLine: "auto", // 파일 마지막 라인에 줄바꿈 처리 방법 printWidth: 80, // 포맷팅시 줄바꿈할 길이 지정 singleQuote: true, // ...
vscode 오프라인에서 플러그인 설치
인터넷이 되는 PC에서 플러그인 파일을 다운로드 하여 설치하는 방법 플러그인 파일은 vsix라는 확장자로 다음 사이트의 Visual Studio Code 카테고리에서 검색하여 다운로드 가능함. https://marketplace.visualstudio.com/ VS Code 실행 후 Ctrl + Shift + P install from ...
Vue.js - util 파일 모듈화
util.js export default { install(Vue) { Vue.prototype.$empty = val => { if (val === null || val === undefined) return true; if (typeof === 'string' && val.trim() === '...
PDF Viewer Sample
환경 backend: Spring Boot frontend: Vue.js library: vue-pdf-app Spring Boot 설정 로컬환경에서 돌리면 문제될게 없겠지만, 실제로 운영은 보통 frontend와 backend는 각기 다른 서버로 구성이 되므로 CORS(Cross-Origin Resource Sharing)설정을 ...
공통 Modal 만들기(with bootstrap)
방법 $on을 사용하여 전역으로 이벤트를 등록 모든 화면에서 $emit으로 이벤트 trigger Modal 생성 ModalAlert.vue <template> <b-modal :id="id" :title="title" @shown="init()" @hide="clear()"> <p></...