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

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

이미지
부트스트랩, 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…

푸시기능과 GCM / APNS

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

이번 포스팅은 iFriendsPet v.1.11에 업데이트 될 기능인 푸시기능에 대해서 정리하는 시간을 가져보려고 합니다.

이 주제는 총 3개의 포스팅으로 나누어 다음과 같은 순서로 게시될 예정입니다.
#1 푸시기능과 GCM / APNS
#2 Node.js를 이용하여 iOS 푸시기능 구현
#3 Node.js를 이용하여 Android 푸시기능 구현

그 첫번 째 포스팅으로 푸시기능의 개념과 GCM / APNS에 대해서 알아보도록 하겠습니다.

일단 저도 푸시기능을 처음 개발해보는 사람으로서 푸시기술이라는게 정확히 어떤 의미인지부터 궁금했습니다.
위키피디아에서 검색한 푸시란, 인터넷 상에서 어떤 전송 요청이 중앙 서버에서 시작되는 정보 전달 방식이라고 설명하는데요. 덧붙여, 이 푸시는 전송 요청이 클라이언트에서 시작되는 풀 기법과 대비되는 것이라고도 표현합니다.

위의 설명을 살펴보면 풀 방식과 푸시방식이 존재하는데, 이 두 방식은 서로 상반 된 기능을 하고 있다고 짐작해볼 수 있습니다.
간단하게 정리해보자면, 푸시 기법은 사용자(클라이언트)가 어떠한 이벤트를 실행 함에 따라 서버 사이드에서 그 이벤트에 대한 정보 등을 자동으로 제공해주는 서비스라고 할 수 있고, 풀 기법은 이와 반대로 사용자가 직접 필요한 정보를 서버쪽에 요청하여 해당하는 정보 등을 제공받는 형식이라고 말할 수 있습니다.

모바일 서비스가 주를 이루기 전의 푸시서비스는 흔히 뉴스, 메일링 서비스 등을 생각해 볼 수 있습니다. 웹 상에서 뉴스를 구독하거나 메일 수신에 동의하는 절차를 통해 자동으로 서버에서 클라이언트에게 주기적인 정보를 제공해왔었습니다.
이런 푸시 서비스는 스마트폰의 급격한 성장을 통해 모바일 서비스들의 기본적이고 중요한 기능으로 자리 잡았습니다.
이러한 이유들을 통해 우리 iFriendsPet 모바일 서비스에서도 사용자와의 지속적인 커뮤니케이션과 사용성 증가를 위해 푸시 기능을 도입하고자 생각했습니다.
그렇다면 지금부터 푸시기능을 어떻게 개발할 것인지 알아보도…

어도비 플래시(Adobe Flash), 2020년 역사의 뒤안길로 사라진다

이미지
어도비 플래시가 2020 년 말에 지원을 중단한다고 합니다. (기사보기 > http://www.zdnet.co.kr/news/news_view.asp?artice_id=20170726065937)

솔직히 플래시의 하락세가 시작된지 꽤 오래되어서 곧 플래시 지원이 끊긴다는 것보다 아직도 지원을 끊지 않았다는 사실이 더 놀라운데요.
플래시 액션스크립터로서 경력을 시작했던 저로서는 신기한 기분이 들어서 포스팅을 하게 되었습니다.

플래시는 1996년에 Macromedia 사에서 만들고 2005년에 Adobe가 인수해 지금까지 왔습니다. 웹상에서 영상이나 게임 등 HTML 로는 구현하기 힘든 프로그램등을 사용할 수 있게끔 해준 플러그인의 일종으로, 플래시로 무언가를 만들면 웹에서 배포하기가 용이하기 때문에 빠르게 확장되어 나간, 인기 있는 기술이었습니다.


제가 플래시를 배우고 있던 2007~2009년, 플래시의 인기는 거의 정점을 찍고 있었습니다. 웬만한 웹사이트나 게임은 물론이고 많은 터치폰 UI, IPTV UI, 냉장고 터치스크린 등이 플래시로 제작되었던 걸로 기억합니다.

삼성이 플래시로 모바일 UI를 제작할 수 있게끔 플래시 Lite 버전을 만들어달라고 Adobe 사에 직접 요청했다는 소문(?)도 들었습니다.


매 주 전세계 웹사이트 순위를 매겨 보여주는 awwwards (https://www.awwwards.com/) 에는 플래시로 만든 화려한 모션의 사이트로 도배되어 있었고, papervision3d 같은 오픈 라이브러리를 이용한 풀 플래시 3D + 물리엔진으로 만들어진 게임 등이 많이 있었죠.

예를 들면 이런 것들요.
영상출처: https://youtu.be/XNAFFhAkGC8
나날이 높아지는 인기에 힘입어 Adobe는 플래시로 데스크탑용 애플리케이션을 만들 수 있는 Flex SDK, Adobe AIR 등 확장 버전들을 내놓기에 이르렀습니다.

2010년, 플래시는 전세계 90%의 PC에 설치되어 있었고, 웹상의 비디오 콘텐츠 75%가 플래시로 만들어져…

Angular2 양방향 바인딩에서 한글이 짤리는 문제

남도패스 사이트 운영중에 사용자로부터 다음과 같은 오류사항을 접수 받았습니다.


말씀주신 오타는 저희의오타가 아닌 입력 부분 오류임을 말씀드립니다.
1. 업장명 등 글자를 입력하면 끝 글자는 자음만 표시가 됩니다.  예) 유명횟집-유명횟ㅈ     저희는 지금 맨 마지막 글자만 스페이스바로 임의적으로 입력하고 있습니다.
2, 전체적인 글자가 안 보이는 현상 (그러떄가 있고 안 그럴 때가 있어요)  예) 서대회 제공 - 대회 제공     앞글자가 안 나옵니다. 혜택뿐 아니라 다른 텍스트 입력에도 나오는 현상입니다.    아래 상세 내용은 입력해도 홈페이지에 안 나오네요.

사용자는 정확히 입력하였지만, 마지막글자가 반영되지 않는 것을 확인할수 있었습니다.


한글과 같은 조합형 문자의 경우 일반적으로 글자를 입력 후 스페이스나 엔터 등을 통하여 문자 입력을 완료한 시점에
compositioned라는 이벤트가 발생하고, 이 이벤트에 따라 Angular는 양방향 바인딩을 처리합니다.


 작성중인 문자를 모두 바인딩하기 위해서는 Angular에서 제공되는 COMPOSITION_BUFFER_MODE를 변경합니다.


프로젝트 전체에서 일괄반영하기 위해
app.module.ts 에서 valueProvider를 사용하여 주입시켜 주면 됩니다.


import {CUSTOM_ELEMENTS_SCHEMA, NgModule, NO_ERRORS_SCHEMA} from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { LocationStrategy, HashLocationStrategy } from '@angular/common'; import { HttpModule } from '@angu…