남산 아래 개발자들

Angular2+ 에서 말줄임(...) 처리는 크게 세 가지로 할 수 있습니다.

1. Pipe 로 템플릿 단에서 처리

2. 스크립트 처리

3. CSS 로 처리
1줄일 경우, 2줄 이상일 경우 다른 방법이 쓰입니다.

이 세 가지에 대해 간단한 핵심 소스를 공유 드립니다.


1. Pipe

*.ts
str:string = '일이삼사오육칠팔구십'

*.html
<div> {{ (str.length>6)? (str | slice:0:6)+'...':(str) }} </div>

결과화면
일이삼사오육...



2. 스크립트 사용

*.ts
var limitLen = 6;

if (str.length > length) {
     str = str.substr(0, limitLen) + '...';
}

*.html
<div> {{ str }} </div>

결과화면
일이삼사오육...



*jquery ellipsis 사용

See the Pen jQuery ellipsis by jaeheekim (@jaehee) on CodePen.


2. CSS 사용

1줄일 경우

div {
   white-space:nowarp; /* 줄바꿈 막음*/
   text-overflow:ellipsis; /* ... 로 보이게 */
   overflow:hidden;
}


2줄 이상일 경우

div {
     font-size:1em;
     overflow:hidden;
     text-overflow:ellipsis;
     line-height:1.5;
     height:3em;  /* line-height의 두 배 */
     display:-webkit-box;
     -webkit-line-clamp:2; /* 나타낼 글자 라인 수 */
     -webkit-box-orient:vertical
}



2줄인데 영문 + 한글이 섞여 있어서 높이값을 정해주면 아래쪽이 잘려보이는 등 약간 까다로운 경우

가 이번에 생겨서 다른 쇼핑…

이번에 플랫폼사업팀에서는 애자일 방법론에서 쓰이는 플래닝 포커 앱을 만들기로 했는데요
플래닝 포커란? 이 링크 설명을 참고해보세요 :) 
기왕 앱을 만드는 김에 새로운 기술에도 도전해볼 겸 AR 하이브리드 앱으로 만들어보는게 어떻냐는 제안을 하게 되었습니다. 
일주일간의 기술검토 후, 한 달 정도의 기간으로 앱을 만들기로 했는데요 (하루에 한시간씩. 다른 업무를 하면서 만들어야 하기 때문입니다.) 아직 성공하지는 못했지만 지금까지의 기술 검토 과정을 공유합니다.


플래닝 포커 앱을 AR로 만들면 어떨까 하는 생각은 조지아텍 학생들이 연구과제로 만든 듯한 이 앱, argon.js 를 보고 떠올렸습니다. (앱스토어에서 argon 으로 검색하시면 나옵니다)

argon.js 는 간단히 말해 증강현실 브라우저로 이 브라우저 앱에서 argon.js 를 쓴 웹페이지를 띄우면 증강현실 같은 효과를 내는 웹페이지들을 만들 수 있습니다.
샘플 예제 중에 three.js 로 만들어진 원소기호 카드들이 둥둥 떠다니는 걸 보고 우리 플래닝 포커에도 도입하면 좋겠다고 생각해서 이번 기술검토를 시작하게 되었습니다.
일정과 공수에 무리가 올 수 있는, 네이티브로 구현하는 기법보다는, 간단하고 빠르게 만들 수 있는 웹앱 또는 하이브리드 기반으로 알아보았습니다. 
최근에 플랫폼 사업팀에서 많은 프로젝트를 Angular 기반으로 하고 있고, Angular 로 만들면 팀원 모두가 협업해서 빠르게 앱을 만들 수 있기에 Angular 와 Angular 기반 가장 유명한 프레임워크인 Ionic3 를 가지고 만들 수 있는가를 중점적으로 알아보았습니다.
그리고 물론 증강현실에는 마커 기반 이미지 인식 등 더 다양한 기능이 많지만 이번에는 단순히, 처음 시도하는 기술이기도 해서 다른 기능 없이 UI 효과만 구현할 생각이라서 무리가 없을 거라고 생각하여 접근했습니다.

맨 처음 알게 된 것은 wikitude 라는, Ionic에 플러그인 형태로 써서 AR 앱을 만들 수 있는 기술이 있었는데, 자세히 알아보니 전부…