라벨이 프론트엔드인 게시물 표시

[Angular] HTTPInterceptor 를 이용하여 파일 업로드 중지하기

안녕하세요. 명동섞어찌개입니다.
오늘은 Angular 에서 파일 업로드 기능 개발 시, 원하는 시점에 파일 업로드를 중지하는 기능에 대해 알아보도록 하겠습니다.

요점은 페이지 이동이나 파일 업로드 취소 버튼을 누르는 순간, HTTPIntercepter 를 이용하여 서버에 보내는 요청을 취소하여 파일 업로드를 중지하는 기능을 만드는 겁니다!


1. HttpCancelService 를 만듭니다실질적으로 http 요청을 취소하는 부분입니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19import{Injectable}from'@angular/core';import{Subject}from'rxjs';@Injectable()exportclassHttpCancelService{privatependingHTTPRequests=newSubject<void>();constructor(){}publiccancelPendingRequests(){this.pendingHTTPRequests.next();}publiconCancelPendingRequests(){returnthis.pendingHTTPRequests.asObservable();}}


2. 공통으로 어느 페이지에서나 호출하기 위해서 이벤트를 설정해 줍니다. 이거는 만드는 방식의 차이인데요
저는 어느 페이지에서나 접근 가능한 공통 commonCode 에 페이지 공통으로 쓸 이벤트를 하나 정의해 두었습니다. (이벤트를 쓰는 건 간편하긴 하지만 남발할 경우 ...... 권장하지는 않습니다. 프로젝트 상황에 맞게 쓰세요!)

1exportconstCOMMON_EVENT=newEventEmitter();


3. HTTPIntercepter 를 만듭니다 위에서 만든 공통 이벤트를 통해 'stop_file_upload' 라는 요청을 보내면 이 Interceptor 가 듣고, httpCancelService 의 함수를 호출해서 htt…

[Angular] 저장되지 않은 파일이 있는데 뒤로 가기를 누른 경우 경고 알럿 띄우기

이미지
안녕하세요. 명동섞어찌개 입니다.

오늘은 Angular 페이지에서 문서 (form) 작성 중 또는 무언가를 등록하다가, 저장하지 않고 브라우저 뒤로가기 버튼을 눌렀을 때 '저장하지 않은 파일이 있습니다. 페이지를 나가시겠습니까?'라고 묻는 알럿 띄우는 기능을 만들려고 합니다.



일반적으로 이런 기능은 javascript 에서는 popstate 이벤트 리스너를 사용해서 구현합니다. (모바일에서도 사용한 기억이 있습니다.)

1 2 3window.addEventListener('popstate',(event)=>{console.log("location: "+document.location+", state: "+JSON.stringify(event.state));});
하지만 Angular 에서 window:popstate 로 아무리 구현해 봐도 원하는 기능이 작동하지를 않더군요.

아마도 popstate 는 페이지가 이동할 때 호출되는 이벤트인데, Angular 는 SPA(Single Page Application) 다 보니 하나의 페이지 안에서 component 끼리 routing 될 뿐이라서 저 이벤트가 호출되지 않는 듯 했습니다. (자세히 아시는 분은 댓글로 제보 부탁드립니다!!)

검색해보니 Angular 자체적으로 페이지를 나갈 때 처리해줄 수 있는 솔루션이 있더라구요.
router 의 canDeactivate !!!

canActivate 는 로그인하지 않은 사용자가 해당 페이지에 접근하지 못하게 막는 용도로 사용되는 경우를 많이 봤는데요, 페이지를 나갈 때 체크하는 용도로 canDeactivate 를 사용해 본 건 처음이었습니다.


시나리오를 말씀드리자면

1. CdnRegisterComponent 라는 페이지 컴포넌트에서 파일을 등록하다가 저장 버튼을 안 누르고
2. 브라우저 뒤로가기 버튼을 눌렀다!

이 경우에 알럿이 뜨게 하는 처리입니다.


1. CdnRegisterComponent 페이지에 저…

[Angular] File Upload > Drag and Drop 만들기

이미지
안녕하세요. 명동섞어찌개입니다.
오늘은 Angular 를 이용한 파일 업로드 기능 개발 시 편리한 사용성을 위해 Drag and Drop 드래그 앤 드랍 기능을 추가하는 방법을 알아볼건데요,

vanila javascript(순수 자바스크립트) 로 개발하면 익스플로러와 크롬 브라우저 등 브라우저 별 예외처리가 필요해서 시간이 꽤 걸리는 일이지만(개인적으로 0 부터 시작해서 개발했을 때 다른 업무 처리하면서 일주일 정도 걸렸습니다..)Angular 는 directive 를 사용해서 간편하게 개발할 수 있더라구요.

Angular Version: 8

결과화면 1. 먼저 drag-and-drop directive 를 만듭니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52import {Directive, EventEmitter, Host, HostBinding, HostListener, Input, Output} from '@angular/core';@Directive({selector: '[appDragDrop]'}) export classDragDropDirective{@Output() onFileDropped =new EventEmitter<any>();@Input('draggable')public draggable =true;@HostBinding('hintLine')public deco =false;@HostBinding('style.background-color')public background = '#fff';@HostBinding('style.opacity')public opacity ='1';//Drago…

[실전] Vue 로 실제 프로젝트 구성하기

Vue 로 실제 프로젝트를 시작하기 위한 기본 환경 구성 세팅을 알아보려고 합니다. 간단하게요~ 자세한 내용은 링크들을 참조해주세요 ^^

Vue 
로 웹 프로젝트를 시작하기 전에 한가지 알아둘 점은 웹팩 설치시, 인터넷 익스플로러 9 이상 브라우저에서만 동작한다는 점 입니다. 순수 vue 로는 인터넷 익스플로러 11 부터 정상 동작합니다. (그 외 크롬 등에서는 잘 돌아가요)

약 5~10% 의 유저들이 아직도 윈도우 XP 에서 돌아가는 인터넷 익스플로러 8을 사용한다고 합니다. 그 고객들을 위해서는 '브라우저를 업그레이드 해주세요' 같은 문구와 설치 URL 이 포함된 브릿지 페이지를 하나 제작해서 띄워주면 좋을 것 같아요.

#1. 개발 환경 구성


CLI 세팅 (3.0)
npm install -g @vue/cli
Router 세팅 (자세히 보기)
npm install vue-router --save
웹팩세팅
vue init webpack 프로젝트이름
그 뒤

npm i
npm run dev

하시면 실행화면을 볼 수 있습니다


#2. 화면 퍼블리싱을 위한 세팅

SCSS 사용 (scss 로더 설치)
npm install sass-loader node-sass webpack --save-dev + 자세한 내용은 여기를 참고하세요
+ SCSS 문법 참조

Bootstrap 사용하기 https://bootstrap-vue.js.org/
npm i bootstrap-vue 만약 Vuetify 나 Google Material 같은 라이브러리를 사용한다면, 굳이 Bootstrap 을 사용할 필요는 없습니다. 비슷한 Grid System이 라이브러리들에 내장되어 있어서 중복됩니다

+ Vuetify Grid System https://vuetifyjs.com/ko/layout/grid


#3 라이브러리 세팅

여기여기를 참고해보세요

Vuetify 초기 세팅하기 (공식 홈페이지: https://vuetifyjs.com/ko/getting-started/quick-start)

vue add vuet…

Vue.js 라이브러리

플랫폼 사업팀에서 할 새로운 사업에 Vue.js 를 사용해서 만들어 보기로 했습니다.
그래서 알아본 상용 또는 무료 라이브러리들입니다


먼저 공식 홈페이지 https://vuejs.org/ 에서는 간단한 템플릿과 예제들을 볼 수 있구요,

https://github.com/vuejs/awesome-vue
이곳은 vue 에서 필요한 기능들을 다운받을 수 있는 웬만한 모든 링크가 모여있는 곳입니다.



1. Vuetifyjs

https://vuetifyjs.com/ko/

ionic 을 생각나게 하는 라이브러리, 웬만한 UI 컴포넌트는 다 있습니다


2. Vue Material

https://vuematerial.io/

angular 버전에서도 굉장히 잘 만들어져 있던 material UI 라이브러리가 vue 에도 있네요
한 가지 걱정되는 건, 예쁘지만 무거울 수도 있다는 점..?
퍼포먼스 때문에 angular 프로젝트에서는 제대로 사용을 못해봤습니다
vue 는 다른지 좀 더 테스트 해봐야겠네요~


3. Keen UI

https://josephuspaye.github.io/Keen-UI/#/ui-alert

앞서 소개한 라이브러리들 보다는 크지 않은 규모의, 작고 심플한 컴포넌트들이 많이 있습니다. 부분적으로 필요할 때 쓰면 좋을 것 같네요!



2018년도 꼭 알아야 할 vue 라이브러리들
https://blog.bitsrc.io/11-vue-js-component-libraries-you-should-know-in-2018-3d35ad0ae37f

+ 하나 이상의 라이브러리를 쓰는 것은 추천하지 않습니다. 무거워지기 때문에


그밖에 wrapbootstrap 에서 보았던 CMS 용 UI 라이브러리 중 하나인 GENESISUI 의 vue.js 버전 모음도 있네요. 그래프 등이 많아서 하나 사두면 CMS 만드는 시간을 절약할 수 있을 듯 합니다.
https://genesisui.com/admin-templates/vuejs/



모든 UI 에 가장 자주, 많이 쓰이는 갤러리 컴포넌트 vue  버전
http…