라벨이 Angular인 게시물 표시

angular4에서 외부 js파일 import 하기

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

angular 기반의 웹을 구축하면서, 외부의 js 소스를 import하여 사용해야하는 경우가 생기는데요.

기존의 웹 개발 방식은 각각의 페이지 별로 <script src= "외부 js 주소">를 이용하여 손쉽게 외부 js파일을 import 해올 수 있었는데요.

angular와 같이 spa(Single Page Application) 기반의 단일 페이지 어플리케이션에서는 각 컴포넌트에 대한 html 소스와 로직이 모두 분리되어 있기 때문에 외부 js 파일을 위와 같은 <script>태그로 인식하지 못한다는 문제점이 있었습니다.

angular 프로젝트를 진행 중, 카카오, 페이스북과 같은 오픈 API를 이용하기 위해서는 각각 제공하는 외부 js파일을 import하여 사용해야하는 경우가 이에 해당했습니다.

이를 해결하기 위해 다음과 같은 방법을 이용했습니다.

import{
Component,
    Input,
    ElementRef,
    OnInit,
    ChangeDetectionStrategy,
    Output,
    EventEmitter
} from '@angular/core';

(2)declare var daum: any

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…