본문 바로가기

Programming/Angular

 (26)
Angular scroll-down animation effect directive 안녕하세요. 명동섞어찌개입니다. 스크롤되면서 애니메이션을 주는 parallax-scrollling (시차 스크롤링)같은 효과는 이제 너무나 흔한게 되어버렸습니다. (유행한지 10년은 더 됐을듯..?) 그래서인지 구현하게 편하게 되어있는 javscript plugin 들이 꽤 많은 편이구요. 스크롤 위치에 따라 div 에 애니메이션을 주는 가장 유명한 jQuery plugin은 wayPoints (http://imakewebthings.com/waypoints/) 라는게 있죠. 제가 파견나간 프로젝트에서 Angular 로 이 스크롤에 맞춰 나타나는 애니메이션 효과를 주려고 Angular 용 소스를 찾아봤는데 jQuery Waypoint 처럼 마땅한게 없더라구요. 그래서 직접 구현한 게 있어서 공유하려고 합..
모바일 화면에서 세로 사이즈 정확하게 계산하기 안녕하세요. 명동섞어찌개입니다! CSS 에서 height 를 잡는 일은 좀 까다로운 영역 같죠. absolute 이면 height 절대값을 잡아줘야 하고, height : 100% 는 안 잡히거나 애매하게 잡히고- 그 와중에 웹에서는 브라우저 버전을 타서 잘 쓸 수 없지만, 모바일에서는 자유자재로 쓸 수 있는 100vh 라는 것이 나왔죠. 비율이면서 동시에 height 절대값(사이즈)을 잡을 수 있기 때문에 100vw (가로), 100vh (세로) 는 정말 신세계였습니다. 예를들어 정사각형 이미지 사이즈를 모바일에 딱 맞게 주기 위해서 width: 100vw; height: 100vw 라고 주면 완벽하게 사이즈를 컨트롤 할 수가 있습니다. 실제 화면 100vh 를 써보기 전까지는 정말 완벽하다고 생각했는..
모바일 Safari 브라우저에서 스크롤 튕김 (bounce effect) 문제 해결하기 안녕하세요. 명동섞어찌개입니다. 모바일 웹서비스를 Angular 로 개발할때 position: fixed 요소가 상단에 있으면, 아이폰 사파리 브라우저에서 스크롤했을 때 윗 부분이 하얗게 사라지거나 하는 등의 다양한 문제가 생깁니다. (애초에 fixed 자체가 사파리 브라우저랑은 잘 안 맞는듯요.. 몇 년 전에 비하면 많이 개선된 듯하지만요) 이런 문제로 Angular 로 개발할 때뿐 아니라 모바일 웹에서는 종종 스크롤 튕김(?) 을 스크립트로 막기도 합니다. 보통 jquery 나 javascript 로 할 때는 이런 코드를 많이 썼지요 document.addEventListener('touchstart', function(e) {e.preventDefault()}, false); document.add..
숫자, 용량 관련 유용한 Pipe 공유 안녕하세요, 명동섞어찌개입니다. 이번에 모바일 화면을 개발하다가, 숫자를 표기할 때 1,000 -> 1k 1,000 MB -> 1GB 이런식으로 줄여서 표현해야 할 일이 있어서 해당 파이프 만든 것을 공유하려고 합니다. 1. 단위 표현 Pipe @Pipe({ name: 'thousandSuff' }) export class ThousandSuffixesPipe implements PipeTransform { transform(input: any, args?: any): any { var exp, rounded, suffixes = ['k', 'M', 'G', 'T', 'P', 'E']; if (Number.isNaN(input)) { return null; } if (input < 1000) { retu..
[Angular 2+ / 퍼블리싱] 일반적인 모바일 UI 를 코딩할때 유용한 링크 모음 *이 문서는 지속적으로 업데이트 될 예정입니다 *가로스크롤 UI 모바일에서 터치 + 스크롤 되는 기본적인 CSS 문법이 가장 잘 설명된 예 입니다. 자세한 설명은 여기서 보실 수 있습니다. See the Pen Flickity horizontal scrolling navigation by Steve (@stevemckinney) on CodePen. Angular2+ 에서 Bootstrap 과 함께 horizontal scroll 을 구현할 때 한가지 팁이라면 가로 width 를 고정값을 주면 화면 리사이징 할 때 Bootstrap Layout 이 깨집니다. height 만 주거나, 이게 불편하면 Slider 플러그인 같은 다른 대책을 구해보심이 좋을듯합니다. + Sly 라는 꽤 괜찮은 가로 스크롤 플러..
[Angular] 모델, 값이 바뀌었는데 화면 template 이 업데이트 되지 않을 때 조치 팁 안녕하세요. 명동섞어찌개입니다. Angular 로 화면을 만들다 보면 종종 서버에서 값을 읽어와서 비동기로 화면이 업데이트 되는 상황에서, 화면에 바뀐 값이 반영되지 않는 경우가 생깁니다. 분명 ts (typescript) 의 값은 바뀌었고, 서버에도 문제가 없는데 html template 화면만 값이 제대로 표시되지 않는 경우가 있습니다. 이럴 때 사용할 수 있는 간단한 방법을 공유하려고 합니다. 1. ngIf = "flag == true" 를 씁니다.data.html 1 2 3 4 5 {{item}} data.ts 1 2 3 4 5 6 7 8 9 10 11 12 13 14data = null; . . . getData() { this.dataService.getDatas().subscribe( dat..
[Angular] history back 기능 구현 : 상세 화면 뒤로가기하여 목록 화면으로 이동 시 검색조건 그대로 보여주기 안녕하세요, 명동섞어찌개입니다. 오늘은 관리자 화면에서 검색 조건을 선택해서 검색 후, 필터링 된 결과물 상세보기를 한 다음 뒤로 돌아갔을 때 기존 검색조건이 그대로 남아있도록 하는 방법에 대해 알아보겠습니다. 말로 하니까 어려운데요;; 아래 화면을 보시면 !! 저 빨간 박스 부분에서 검색 조건을 선택하고, 아래에 필터링 된 결과물 목록 중 하나를 클릭해서 상세 페이지로 갔다가, 다시 목록 페이지로 돌아오면 기존에 선택한 검색 결과가 저장되지 않고 사라지는데요. 그걸 보존하는(?!) 방법을 알아보겠습니다. 구현 방법은.. 저같은 초짜는 localStorage 를 쓸까 cookie 를 쓸까 (.....;;;;) 별 생각을 다 하지만 가장 간단하고 흔하고 안전한 방법은 route 를 이용하는 겁니다 주소창에..
[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() export class HttpCan..

티스토리툴바