본문 바로가기

Programming

(135)
모바일 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..
zxing-android 라이브러리를 이용한 QR 코드 생성 android 에서 QR코드를 생성하는 하는 법을 알아 보도록 하겠습니다. compile 'com.journeyapps:zxing-android-embedded:3.5.0' build.gradle의 dependencies에 zxing라이브러리를 추가 합니다. QR코드는 숫자 최대 7089 자, 영문자와 숫자[코드표가 따로 존재] 최대 4296 자, 8비트 바이트 최대 2953 바이트, 한자 1817 자를 담을 수 있습니다. 문자열을 받아와 QR코드를 생성 해보겠습니다. public static Bitmap generateQRCode(String contents) { Bitmap bitmap = null; try { QRCodeWriter qrCodeWriter = new QRCodeWriter(); bi..
[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 라는 꽤 괜찮은 가로 스크롤 플러..
[ios 강좌] ios 푸시 알림 3부 - APN 테스트 이번 강좌에서는 ios 의 푸시 알림 3부의 APN 테스트를 해보겠습니다, ios 푸시 알림 1부 - 개발자 계정 세팅ios 푸시 알림 2부 - 클라이언트 개발ios 푸시 알림 3부 - APN 테스트 ======================================================================================== 클라이언트는 세팅이 완료됐으므로, 이제 서버에서 푸시를 보내보겠습니다. 1. 아래의 페이지로 APNS-Tool를 다운받습니다,https://itunes.apple.com/kr/app/apns-tool/id963558865?mt=12 ===================================================================..
[ios 강좌] ios 푸시 알림 2부 - 클라이언트 개발 이번 강좌에서는 ios 의 푸시 알림 2부의 클라이언트 개발을 알아보도록 하겠습니다. ios 푸시 알림 1부 - 개발자 계정 세팅ios 푸시 알림 2부 - 클라이언트 개발ios 푸시 알림 3부 - APN 테스트 ======================================================================================== 1. Xcode를 열고 푸시 세팅을 해줍니다. ======================================================================================== 2. AppDelegate.m 파일을 열고, 푸시 코드를 등록합니다. - (BOOL)application:(UIApplication *)..
[ios 강좌] ios 푸시 알림 1부 - 개발자 계정 세팅 이번 강좌에서는 ios 의 푸시 알림을 알아보도록 하겠습니다. 총 3부로 구성해보았습니다. ios 푸시 알림 1부 - 개발자 계정 세팅ios 푸시 알림 2부 - 클라이언트 개발ios 푸시 알림 3부 - APN 테스트 -----------------------------------------------------------------------------------------------------------우선 ios에서 푸시를 하려면, 개발자 계정을 먼저 세팅 해야합니다. 1. 인증서 요청 생성 키체인을 이용해 CertificateSigningRequest라는 인증서를 만들어야 합니다. 2. 파일을 만들고 나서, https://developer.apple.com 접속합니다. 진행중인 프로젝트의 APP I..
android Soket를 활용한 통신 - Client Socket에서 Server에 이어 Client를 진행 하겠습니다. android에서 개발을 진행 하면 Server를 만들일은 특수한 경우 아니면 없다고 생가 할수 있습니다. Client의 경우 필요에 따라 만들어 써야 하는 경우가 있습니다. 그렇기 때문에 직접 구현 하지 않더라도 Socket.io처럼 잘되어 있는 라이브러리도 존재 하기는 합니다. 하지만 여기서는 Server와 Client에 대한 구현 부분을 알아보는데 의미를 두어 Client도 직접 구현 하겠습니다. android 네트워크 통신에서 가장 기본이면서 중요한 부분은 무엇일까요? 당연히 비동기 통신을 통한 UI쓰레드에서 UI 갱신 일 것입니다. Socket 통신도 당연히 이부분은 해당 되며 통신 모든 부분에서 비동기 처리 및 UI 갱신은 U..