라벨이 [정보]인 게시물 표시

Angular2+ 에서 넘치는 글자 말줄임표(...) 처리하기

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

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

HTML 템플릿을 인쇄용으로 가공하기

이미지
HTML 으로 코딩된 테이블, 그림, 글자 등 다양한 요소가 섞여 있는 문서를 PDF 또는 A4용지로 출력했을 때 각 요소가 중간에 끊어지지 않고 보기좋게 출력할 수 있는 방법이 있는지 알아보았습니다.

방법은 생각보다 간단한데요, CSS의 @media print 속성을 이용하면 가능했습니다.

@media print 는 인쇄할 때만 적용되는 것으로 다양한 기능이 있지만
바쁜 분들을 위해 핵심 CSS만 보면, 이 두 개만 알아도 충분한 것 같습니다.

@media print {
      .page-divide {
page-break-after: always; 
      }
}

.page-divide 라는 클래스를 준 요소 뒤에는 언제나 페이지를 분할하도록 하는 CSS 입니다.

table, figure, .sector {
page-break-inside: avoid;
}

table, figure 또는 sector 라고 클래스를 지정해 준 요소는 페이지 때문에 끊기지 않도록 처리해주는 구문입니다. 이렇게 지정한 요소가 만약 A4 용지 단위로 프린트물이 나올 때 중간에 걸리게 되면 통째로 그 다음 장으로 넘어가게 처리해줍니다.



간단 예제 소스보기<style>@media print {      .page-divide {             page-break-after: always;      }      .no-print-page {
            display: none; //작업의 편리함을 위해 넣은 페이지 구분선. 프린트 시에는 보이지 않음      } } h1, h2, h3, h4, h5 {       page-break-after: avoid; } table, figure, .sector {        page-break-inside: avoid; } .table {       width: 100%;        max-width: 100%;        margin-bottom: 1rem; } thead {
       display:…

Nodejs 날짜 관련 유용한 moment.js

안녕하세요. 남산돈가스입니다.

오늘은 제가 개인적으로 Node JS를 개발하면서 굉장히 유용하게 사용하는 모듈을 소개드리려고 합니다.

데이터들을 처리하는 과정에서 꼭 빠지지않는 것들이 날짜 데이터들이죠.

이 날짜 데이터들을 아주 유연하게 변경 및 비교, 계산까지 해줄 수 있는 것이 이 moment.js라고 할 수 있습니다.

지금부터 moment.js를 설치하고 사용하는 방법에 대해서 간단하게 소개드리겠습니다.

먼저 moment.js 모듈을 설치하기 위해서 npm 명령어를 실행합니다.

npm install --save moment
moment가 설치되었다면 이제 간단하게 사용법을 익혀보겠습니다.


◆ moment 선언

let moment = require('moment'); ◆ 현재 시각

console.log(`moment => ${moment()}`)//moment => Mon Jan 15 2018 10:50:08 GMT+0900
◆ Date 객체로부터 초기화 *month는 -1 값 지정

console.log(`Date to moment => ${moment(new Date(2018,0,15))}`);//Date to moment => Mon Jan 15 2018 00:00:00 GMT+0900
◆ 포맷을 지정하여 출력

console.log(`포맷 지정 출력 => ${moment().format("YYYY년 MM월 DD일")}`)//포맷 지정 출력 => 2018년 01월 15일 console.log(`포맷 지정 출력 => ${moment().format("YYYY-MM-DD HH:mm:ss")}`)//포맷 지정 출력 => 2018-01-15 11:01:16
◆ 단위 별 출력

console.log(`연도 => ${moment().year()}`)//연도 => 2018 console.log(`월 (※ 0〜11의 값)=> ${moment().month()}`)//월…

아이콘을 폰트로 만들어 쓰기

이미지
부트스트랩, Angular 등을 하다보면 부수적이지만 자주 접하게 되는 것이 있습니다.
바로 font-awesome !! (http://fontawesome.io/)
각종 아이콘을 폰트로 만들어 css 만 임베딩하면 다양한 아이콘을 폰트처럼 쓸 수 있는 CSS Toolkit 입니다.

font-awesome 등 아이콘 검색하기 https://glyphsearch.com/
<i class="fa fa-bandcamp"></i>

이런 식으로 아이콘을 만들어 쓰면 우선 수십개의 아이콘을 CSS에서 색상, 크기 등을 코드 한줄로 자유롭게 수정할 수 있기 때문에 사용이 굉장히 편리하구요

이미지로 할 경우 padding, margin 주면서 복잡하게 레이아웃을 맞춰야하는데 폰트 기반이다 보니 아무래도 정렬 등도 덜 신경쓰면서 웹페이지를 만들 수 있어 좋습니다.

그런데 아무리 600가지가 넘는 아이콘을 font-awesome 에서 제공한다 하더라도 모든 디자인이 다 있지는 않아서.. 딱 관리자 페이지 만드는 정도에는 유용한 것 같습니다.

특별한 브랜드 디자인이 들어가거나, 특별한 이미지 아이콘이 필요한 상황에서는 그 이상이 필요합니다.

이번 아이프렌즈펫 쇼핑몰을 만들면서 강아지/고양이 용품 관련 특화된 아이콘들이 다수 필요했는데요, 관련 아이콘들은 기존에 폰트로 만들어져 제공되는 font-awsome 이나 line icon 등에서는 찾을 수 없었습니다.

그렇다고 모든 아이콘을 기존 방식대로 일일이 이미지로 만드는 작업은 저 혼자서 디자인, 코딩 모두를 짧은 시간 내에 해내야 하는 상황에서는 어려울 것 같았구요.

그래서 이미지를 폰트로 바꾸어주는 사이트가 없을까 해서 찾아봤는데 있었습니다 ^ㅁ^
여러 군데를 뒤져봤지만 이곳이 제일 편하더라구요



https://www.flaticon.com


1. 초간단 가입

가입을 안해도 되지만.. 찜한 아이콘을 관리하거나 다운받으려면 가입하는게 좋아요~



2. 원하는 아이콘 검색 (영문으로만 가능합니다^^)




3. …

Ionic3 + three.js 로 AR 하이브리드 앱 만들기 기술검토 결과 중간리뷰

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


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

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

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

구글 애널리틱스에서 API 로 데이터 받아오기

이미지
남도패스 대시보드를 만들면서 구글 애널리틱스에서 데이터를 API 로 받아오는 부분을 알아보았는데 팀내 인수인계 문서 겸 블로그로 올립니다.

* 전제조건
구글 애널리틱스 계정이 있어야 합니다.
가입하기 > https://www.google.co.kr/intl/ko/analytics/

목적은 남도패스에 접속하는 회원이 무슨 키워드로 어느 소스/매체를 통해 접속하는지 일일세션 수를 구글 통계 API 를 통해 호출해서 화면에 뿌려주는 부분입니다.

자세한 항목/사용법은 https://developers.google.com/analytics/devguides/reporting/core/v3/reference#metrics 여기서 알 수 있습니다.


1. 먼저 https://ga-dev-tools.appspot.com/query-explorer/ 에 접속합니다.

로그인한 상태가 아니라면 아래 화면은 block 되어 있습니다. 주황색 부분을 누르고 구글 통계를 쓰고있는 계정으로 로그인하시면 됩니다.



2. 로그인 후에, Account 메뉴를 열어보면 해당 구글 계정에서 쓰고있는 구글 통계 웹사이트/앱 목록이 뜹니다. 그 중 API 로 데이터를 얻어오려는 계정을 선택합니다.



3. start-date, end-date: 계정을 선택한 후 해당 데이터의 기간 범위를 선택합니다. 남도패스는 일일 통계를 얻어야 하기 때문에 start-date, end-date 를 같은 날로 설정합니다.



4. metrics: 구글통계에서 최종적으로 어떤 데이터를 얻어올지 항목을 선택합니다. 남도패스에서는 세션, 페이지뷰를 선택했습니다.



5. dimensions: 데이터를 뽑아올 조건 항목들을 선택합니다. 남도패스 대시보드의 경우에는유입 검색 키워드소스를 선택합니다.



6. 마지막으로 Run Query 버튼을 누르면 해당 데이터를 뽑아올 쿼리문이 완성됩니다. 여기서 Include current access_token in the Query URI 값을 체크해줍니다.



7. 그렇게 나온 쿼리를 Post…

[정보] Git을 이용한 형상관리 #3 - Git 브랜치

이미지
안녕하세요 남산돈가스입니다.

지난 포스팅에 이어 마지막시간으로 Git 브랜치에 대해서 포스팅해보겠습니다.

지난 시간 저희는 Git 저장소를 생성하고 커밋까지 해보았습니다. 이제 조금 더 완전한 버전 관리를 위하여 브랜치에 대해서 알아보도록 하겠습니다.

프로젝트 단위로 개발을 하다 보면 반영되어있는 코드와는 상관없이 독립적으로 개발을 진행할 경우가 생기는데, 이렇게 독립적으로 개발하는 것이 브랜치입니다.

Git에서의 브랜치는 커밋 사이를 가볍게 이동할 수 있는 어떤 포인터 같은 것이다.
기본적으로 Git은 최초 생성 시 master 브랜치를 만들고. 커밋을 만들 때 마다 브랜치가 자동으로 가장 마지막 커밋을 가리키게 됩니다.
위에 보이는 그림처럼 master라는 브랜치가 생성이 되고 그 마스터는 항상 최종 커밋의 위치를 가리키고 있습니다. 그리고 위에 HEAD는 원격 저장소에 최신 버전을 가리키고 있다는 의미인데요. 최초에 master로 브랜치 설정이 되어있으니 HEAD가 바라보는 건 master가 되겠죠.

설명을 길게 하기 보다는 실제로 만들면서 확인해봅시다.

현재 자신의 브랜치가 어떤 것인지 확인해보기 위해서 명령어를 입력해봅시다.

$ git branch* master
git branch 명령어를 입력하면 현재 바라보고있는 브랜치를 보여줍니다. 현재 저는 master를 보고있습니다.

여기서 새로운 브랜치 testing을 하나 만들어보겠습니다.

$ git branch testing$ git branch* master testing
git branch testing 명령을 통해 브랜치를 생성했습니다. 이 브랜치도 역시 현재 작업중이었던 마지막 커밋을 가리키는 브랜치입니다.


그럼 여기까지 testing이라는 새로운 브랜치를 생성해보았습니다. 현재까지 작업 된 master 브랜치는 그대로 두고 다른 개발 사항이 생겨 testing 브랜치에 개발을 진행해보겠습니다.
현재 master로 되어있는 브랜치를 testing으로 이동하려면 checkout 명령어를 이용합니다.

[정보] Git을 이용한 형상관리 #2 - Git 저장소, 생성, 수정, 커밋

이미지
안녕하세요 남산돈가스입니다. 지난 시간에 이어 Git를 이용한 형상관리 포스팅을 이어서 진행하겠습니다.


1. Git 저장소 만들기

Git 저장소를 만든느 방법은 두 가지가 있습니다. 첫번째로는 기존 프로젝트를 Git저장소로 만드는 방법이 있고, 두번째는 다른 서버 저장소에 있는 Git을 Clone하는 방법이 있습니다.

1) 기존 디렉토리를 Git저장소로 만들기
기존 프로젝트를 Git으로 관리하고 싶을 때, 해당 프로젝트의 경로로 이동합니다.

$ git init
git init 명령어를 실행하면 해당 프로젝트 경로에 .git 이라는 디렉토리가 생성됩니다. 이 .git 디렉토리는 저장소에 필요한 뼈대 파일이 들어있습니다. 이 명령만으로는 아직 프로젝트의 어떤 파일도 관리하지 않은 상태입니다. Git이 파일을 관리하게 하려면 저장소에 파일을 추가하고 커밋을 해야합니다.

$ git add ./* $ git commit -m 'my first commit!!'
해당 디렉토리 하위의 있는 모든 파일을 Git 저장소에 add한 뒤 commit 명령어를 이용해 저장소에 추가한 파일을 commit 하였습니다.

2) 기존 저장소를 Clone 하기

Git 저장소를 복사하고 싶을 땐 git clone 명령을 사용합니다.

$ git clone [url]
url 안에 복사할 저장소의 url를 입력하면 됩니다. 지원하는 프로토콜은 https, git, ssh 등이 있습니다.

2. 수정하고 저장소에 저장하기

git init이나 clone을 이용하여 저장소를 생성해보았습니다. 이제 실제 파일을 수정하고 파일의 스냅샷을 커밋해보겠습니다.
 워킹 디렉토리의 모든 파일은 크게 Tracked(관리대상인) 파일과 Untracked(아닌) 파일로 나뉜다. Tracked파일은 이미 스냅샷에 포함되어 있던 파일을 말합니다. 또 Tracked파일은 Unmodified(수정되지 않은) 와 Modified(수정 된) , 그리고 Staged(커밋으로 저장소에 기록 할) 로 나뉩니다. 그리고 그 이외의…

[정보] Git을 이용한 형상관리 #1 - Git의 세가지 상태, Git 설치

이미지
안녕하세요 남산돈가스 입니다.

오늘은 Git에 대해서 포스팅해보려고 합니다.
현재 플랫폼사업팀은 소스코드 관리를 svn을 이용하고 있습니다. 하지만 개발하며 braches를 trunk로 올리는 과정에서 잦은  conflict들을 경험하였고 Git을 이용하면 소스관리가 조금 더 편해질까라는 의문을 가지게 되었고 함께 공부해볼 겸 Git에 대해 포스팅하기로 하였습니다.

이 포스팅은 방대한 Git의 내용을 모두 다루기보다는 실제 개발에 가장 빈번하게 사용되는 기능을 위주로 작성할 예정입니다.

1. Git의 세가지 상태

Git은 파일을 Committed, Modified, Staged 이렇게 세 가지 상태로 관리합니다.
먼저 Committed란 데이터가 로컬 데이터베이스에 안전하게 저장되었다는 것을 의미합니다.
Modified는 수정한 파일을 아직 로컬 데이터베이스에 커밋하지 않은 것을 말합니다. 마지막으로 Staged는 현재 수정한 파일을 곧 커밋할 것이라고 표시한 상태를 의미합니다.
 이 세 가지 상태는 Git 프로젝트의 세 가지 단계(Git Directory, Woking Directory, Staging Area)와 연결되어 있습니다.


 Git Directory는 Git이 프로젝트의 메타데이터와 객체 데이터베이스를 저장하는 곳을 말합니다. 이 Git Directory가 Git의 핵심이라고 할 수 있습니다. 다른 컴퓨터에 있는 저장소를 Clone할 때 이 Git Directory가 만들어집니다.
 Working Directory는 프로젝트의 특정 버전을 CheckOut 한 것을 말합니다. Git Directory는 지금 작업하는 디스크에 있고 그 디렉토리 안에 압축된 데이터베이스에서 파일을 가져와서 Working Directory를 만들게 됩니다.
 Staging Area는 Git Directory 안에 존재하고있습니다. 단순한 파일이고 곧 커밋할 파일에 대한 정보를 저장합니다.

위의 설명을 종합해보자면 Git은 다음과 같은 순서를 작업을 하게 됩니다.
 1) …

Node.js를 이용하여 Android 푸시기능 구현

안녕하세요 남산돈가스입니다.

오늘은 지난 포스팅에 이어 Nodejs를 이용하여 Android 푸시기능을 구현해보겠습니다.

개인적으로 gcm은 apple의 apns보다는 푸시기능 구현이 더 간단하다고 생각하는데요.
그 이유는 apns 같은 경우엔 인증서 및 키 파일을 발급받는 과정이 복잡한데 비해 gcm은 개발자 콘솔에서 프로젝트를 등록하고 gcm 서비스만 활성화하면 API Key와 sender ID 값을 바로 제공해주기 때문에 이것들을 가지고 바로 push기능을 구현할 수 있기 때문입니다.

API Key을 발급 받는 과정은 http://blog.saltfactory.net/node/implementing-push-notification-service-for-android-using-google-play-service.html 에 이해하기 쉽게 제공되고 있으니 참고하시기 바랍니다.

그렇다면 API Key와 SenderId값을 발급받았다는 전제 하에 본격적으로 NodeJs를 이용하여 안드로이드 푸시 기능을 구현해보겠습니다.

일단, NodeJS에서 gcm기능을 이용하기 위해선 gcm 모듈이 필요합니다.

npm install node-gcm
gcm 모듈을 다운받았으면 js 파일을 하나 생성합니다.

var gcm = require('node-gcm'); var message =newgcm.Message({ collapseKey: 'demo', delayWhileIdle: true, timeToLive: 3, data: { key: 'push Test', } });
install한 gcm 모듈을 선언하고, message라는 변수에  gcm.Message 를 초기화 합니다.
이 Message라는 메서드에 전송 될 푸시에 대한 설정 정보가 json 형식으로 들어가게 됩니다.
간단하게 Message에 대한 설정들을 알아보면, collapseKey는 푸시할 유사 메시지별로 동일한 c…

Node.js를 이용하여 iOS 푸시기능 구현

이미지
안녕하세요 남산돈가스입니다.
지난 시간에 이어서 오늘은 #2 Node.js를 이용하여 iOS 푸시기능을 구현해보는 시간을 갖겠습니다.
일단 이 포스팅에서는 iOS용 APNS 인증서와 키가 모두 발급되어있다는 전제하에 포스팅을 진행하려고 합니다.
iOS 클라이언트 단에서 APNS를 셋팅하는 부분은 아래 링크에 보기 쉽게 설명되어있으니 참고하시면 쉽게 따라오실 수 있을 것입니다.
http://blog.saltfactory.net/node/implementing-push-notification-service-for-ios.html
자, 그럼 ios에 푸시를 날리기위한 준비물이 완성되었으니 이제 nodejs쪽을 확인해봅시다.
간단한, 프로젝트를 생성하겠습니다.


express App으로 pushTest라는 프로젝트를 생성했습니다.
nodejs에서 apns 모듈을 사용하기 위해서는 apn 모듈을 install 해야합니다.
npm install apn
apn 모듈을 설치한 뒤 js파일을 하나 생성합니다

// Developer modevar dev_options = { gateway : "gateway.sandbox.push.apple.com", cert: './ios-certificates/development/swift_apns_development_cert.pem', key: './ios-certificates/development/swift_apns_development_server.pem', production: false }; // Production(App store)var pro_options = { gateway : "gateway.push.apple.com", cert: './ios-certificates/development/swift_apns_production_cert.pem', key: './ios-certific…

[정보] 기획자를 위한 WireFrameTool - PowerMockup 소개

이미지
오늘은 서비스 기획자에게 필요한 WireFrame Toll 중에 PowerMockup 프로그램을 소개해 드리고자 합니다.
저는 주로 카카오의 OvenApp 을 이용하여 화면설계를 진행 했습니다.
그런데 간혹 결과물을 PowerPoint 로  작성해야 하는 경우가 생기 됩니다.

검색 해보니 PowerMockup 은 PowerPoint 에 plug-in 형식으로
PPT 문서로 WireFrame을 편리하게 만들도록 도와주는 개념입니다.
아래 제품소개 동영상을 보시면 바로 이해가 되실 겁니다.



그럼 체험판을 다운로드 하여 프로그램을 사용법을 살펴보도록 하겠습니다.

1. 다운로드 사이트 접속
https://www.powermockup.com/


2. 체험판 다운로드

메인 페이지 에서 DOWNLOAD TRIAL 을 선택하여 체험판 설치 파일을 다운로드 합니다.


3. 다운로드 프로그램 설치




간단하게 Next 버튼 클릭을 통해서 설치 진행이 가능합니다.
설치가 완료되면 Run PowerMockup 을 선택하여 파워목업을 실행 할 수 있습니다.


4. 파워목업 실행

파워 목업이 실행되면 환영인사와 함께 파워목업 사용 방법에 대한 PPT 가 실행 됩니다.


5. 파워 목업 툴 사용하기

파워목업이 설치되면 리본메뉴에 “Power Mockup” 메뉴가 추가됩니다.
Power Mockup > Show Shapes Panel 을 선택하면 우측에 Power Mockup Shapes 메뉴가 생성됩니다.

제공되는 Layout 을 활용하면 Drag&Drop 을 통해 간략하게 화면 구성이 가능합니다.



체험 버전 이므로 일부 Shape는 사용이 불가능 합니다.
사용 불가능한 Shape를 사용하려고 하면 “Full Version Required”  라는 메시지가 표출되는 것을 보실수 있습니다.




6. Custom Shape 사용하기

PowerMockup 에서는 기본적으로 제공되는 Shapes 외에 사용자가 원하는 Shape를 저장해 놓고 필요 시 선택해서 사용할수 있는 Custom S…