본문 바로가기

Programming

 (135)
Angular2+ 에서 넘치는 글자 말줄임표(...) 처리하기 Angular2+ 에서 말줄임(...) 처리는 크게 세 가지로 할 수 있습니다. 1. Pipe 로 템플릿 단에서 처리 2. 스크립트 처리 3. CSS 로 처리 1줄일 경우, 2줄 이상일 경우 다른 방법이 쓰입니다. 이 세 가지에 대해 간단한 핵심 소스를 공유 드립니다. 1. Pipe *.ts str:string = '일이삼사오육칠팔구십' *.html {{ (str.length>6)? (str | slice:0:6)+'...':(str) }} 결과화면 일이삼사오육... 2. 스크립트 사용 *.ts var limitLen = 6; if (str.length > length) { str = str.substr(0, limitLen) + '...'; } *.html {{ str }} 결과화면 일이삼사오육... ..
Android에서 JS를 통해 WebView와 통신하기 안녕하세요. 첫 포스팅을 게재하는 명동콜링입니다. 첫 포스팅인 만큼 간단하게 하이브리드 앱 개발 할 때 필수적인 요소인 Javascript를 통해 Web에서 App으로 데이터를 보내는 방법을 알려드리고자 합니다. 하이브리드 앱도 앱이기 때문에 웹 페이지로 구성이 되어있지만 앱의 기능을 어느 정도는 사용하게 됩니다. 그렇기 때문에 앱에서는 웹에서 어떠한 신호를 받기 위한 로직이 필요했으며, 그에 따라 생겨난 것이 Javascript를 통해 데이터를 주고받을 수 있도록 한, Android Bridge Interface 입니다. 과거에 JS를 통해 교류할 수 없었을 때에는 앱 내에서만 사용할 Scheme을 가지고 URL형식으로 호출을 하게 되었다면, 지금은 완벽하게 Javascript문법을 통해 앱의 API를..
파이썬을 이용하여 웹 크롤러 만들기 #1 - Python 설치 및 환경 설정 안녕하세요. 남산돈가스 입니다. 얼마 전 한국정보기술연구원 재직자교육을 통해 "파이썬으로 웹 크롤러 만들기" 교육을 수강했습니다. 내용이 어렵지 않아 누구든지 쉽게 따라할 수 있어서 저는 내용들을 상기 시킬 겸, 내용을 소개드릴 겸 해서 이 포스팅을 시작하게 되었습니다. 이번 포스팅은 2회에 걸쳐서 진행될 예정이며, 회차 별 내용은 다음과 같습니다. #1 - Python 설치 및 환경 설정#2 - BeautifulSoup4을 활용하여 크롤링하기 그렇다면 1회차인 Python 설치 및 환경 설정 부터 시작하도록 하겠습니다. 현재 저는 맥북을 사용 중이므로, mac OS 기준으로 설명 드리겠습니다. 먼저 Python을 설치하기 전 mac os 에서 패키지 관리를 할 수 있는 프로그램으로 "homebrew"라..
Spring Boot로 REST API 만들기 스프링 부트는 원래 자바로 만드는 마이크로서비스를 만들기 위한 프레임워크입니다. 여기서는 스프링부트를 사용하여 간단한 REST API를 만드는 방법을 소개하고자 합니다. 여기서는 다음의 내용을 다루고자 합니다.spring 개발환경 구축spring framework5 와 spring boot를 활용한 RESTful 서비스 개발 개발환경스프링 개발을 위해 일반적으로 아래 개발도구를 사용합니다.JDK 1.8 –> http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.htmlSpring Tool Suite(STS) 3.8.2 –> http://spring.io/tools/sts/allMaven 3.3.1 –> https://..
ionic 하이브리드 앱 개발 - #6 ionic native Ionic Native는 Cordova 플러그인 TypeScript 개발도구로써 Ionic 모바일 어플리케이션에 필요한 기본 기능을 손쉽게 추가 할 수 있습니다. Promises 와 ObservablesIonic Native는 Promise 또는 Observable에서 플러그인 콜백을 통하여 모든 플러그인에 공통 인터페이스를 제공하고 네이티브 이벤트가 Angular로 변경 감지하도록 보장합니다.import { Geolocation } from '@ionic-native/geolocation'; import { Platform } from 'ionic-angular'; class MyComponentOrService { constructor(private platform: Platform, private ..
angular4에서 외부 js파일 import 하기 안녕하세요. 남산돈가스입니다. angular 기반의 웹을 구축하면서, 외부의 js 소스를 import하여 사용해야하는 경우가 생기는데요. 기존의 웹 개발 방식은 각각의 페이지 별로 태그가 만들어졌다고 이해하시면 됩니다.그리고 script태그의 src에 접근하여 (1)의 url를 할당하고, type에 접근하여 'text/javascript' 타입을 지정한 뒤, async를 통해 비동기 처리 여부를 설정합니다. 여기까지 설정한 내용은 html의 와 동일한 내용입니다.마지막으로 요소에 접근할 수 있는 ElementRef의 el객체의 자식노드로 해당 script를 append 해줌으로서 컴포넌트 내 html에서 외부 js소스가 import되게 됩니다. (6) - 마지막으로, (5)에서 생성한 loadDaumAp..
[iOS] WKWebView 시작하기 ios9 부터 기존 UIWebView 보다 향상된 성능을 제공하는 WKWebView를 지원합니다. UIWebView로는 하이브리드 앱과 연동하는데 있어서, 많은 제약사항이 있어, WKWebView를 진행 중인 프로젝트에 적용해 보았습니다. 아래는 WKWebView에 장점과 문제점입니다. 참고해주세요. *참고 링크 http://docs.kioskproapp.com/article/840-wkwebview-supported-features-known-issues * 장점 - 앱의 기본 프로세스 외부에서 실행됩니다. - 더 빠른 자바 스크립트 엔진 인 Nitro 사용합니다. - JavaScript를 비동기 적으로 처리합니다. - 특정 터치 지연을 제거합니다. - 서버 측 인증 과제 지원합니다. - 오류가있는 자..
javascript 유용한 배열 메서드 안녕하세요. 남산돈가스 입니다. 오늘은 엄청 자주 쓰이면서 쓸 때마다 헷갈리는 javascript 배열 메서드에 대해서 몇가지 알아보도록 하겠습니다. 1. push & pop 배열을 사용하는데 가장 기본적인 개념으로 데이터를 + 하고 - 하는 메서드입니다. 바로 다음에 다루겠지만, push - pop, unshift - shift 를 짝지어 설명하는 이유는, 두 쌍 모두 데이터를 +, - 하는 메서드지만 해당 데이터를 배열의 어느 곳에다 + 하냐, 어디에서 - 하냐 다르기 때문입니다. 이 push & pop 은 데이터를 배열의 가장 끝 부분에서 핸들링하는 메서드입니다. var arr1 = [ 1,2,3,4,5 ]; arr1.push(6); arr1.push(7); console.log(arr1); // ..

티스토리툴바