Vue.js
-
[Axios] Multipart/form-data 핸들링JavaScript/Vue.js 2019. 7. 5. 15:00
Node.js + Express + Vue.js로 토이 프로젝트를 만들고 있는데, Axios를 이용해 이미지 업로드 기능을 만들어보려고 한다. 시나리오 버거 메뉴 등록 폼에서 이미지를 비롯해 각종 데이터를 작성하고 해당 데이터를 multipart/form-data 컨텐츠 형식으로 서버에 전달하고 서버가 캐치해서 핸들링하는 것이 목적이다. 방법 data에 담고 관리하기 위해 데이터 속성을 선언하자. 데이터 속성을 선언했으면 이제 file 태그에서 파일을 선택하면 선택한 파일을 데이터 속성에 추가하자. methods 속성에 함수를 하나 만들고, data의 이미지 속성에 접근하여 데이터를 담아주자. file 태그에 Vue 인스턴스로 접근하기 위해 $refs 인스턴스 속성을 사용해야한다. 해당 인스턴스는 자식 ..
-
Cross Origin 허용하기JavaScript/Node.js 2019. 7. 5. 12:19
Node.js + Express + Vue.js + Webpack을 이용해 토이 프로젝트를 만들고 있다가 axios를 통해 HTTP 프로토콜로 비동기 통신 기능을 만들던 중 Cross Origin 차단 문제를 접했다. Spring Boot로 현업을 뛰고 있는 상황이라 @CrossOrigin 어노테이션 하나만 붙이면 한방에 해결이 되는데 Node.js로는 CrossOrigin 설정을 해본적이 없어서 자료를 찾아봐 공부해봤다. 문제 우선 상황은 다음과 같다. Node 서버는 3000번 포트를 사용, Vue 개발 서버는 3001 포트를 사용하는 환경이다. 각각의 서버에서 통신을 주고받아야하니 Cross Origin에 위배되는 상황이 발생했다. 버거 메뉴를 등록하는 폼에서 내용을 입력하고 등록버튼을 클릭하면 N..