카테고리: JS/Angular

SPA 개발을 위한 Angular 프레임워크 관련

[

[스크랩] CompletableFuture & @Async

Completable futures with Spring async 12 Jun 2015 스프링 비동기와 자바8의 CompletableFuture 2016.04.24 [Java] CompletableFuture: 조합할 수 있는 비동기 프로그래밍 2015.04.12 restful api call rxjs loop state check How to loop through response object obtained from REST API and display data in the view in angular 2 RxJs: How to loop based on state of ...

[펌] Angular2 and Spring Boot: Getting Started

Spring Boot 기반의 웹애플리케이션에서 Angular-Cli 로 생성한 Angular2 애플리케이션을 실행시키는 튜토리얼

TS에서 tsd 파일 없이 외부 라이브러리 사용하기

Typescript에서 tsd 파일 없이 외부 JS 라이브러리를 사용할 수 있다. 대표적으로 jQuery Cytoscape의 경우에도 관련 패키지들을 Bower로 받을 수 있다. https://libraries.io/bower/cytoscape https://libraries.io/bower/cytoscape.js-navigator 등등.. 요 글에 대해서는 한번더 살펴봐야겠다. How to include Cytoscape.js Extension Cytoscape-qtip into an Ember App ** 본문 중 일부 발췌 You must follow the instructions for registering the extension and its dependencies ...

Webpack – Module build failed

Typescript 를 공부하는 중인데, 튜토리얼로 ‘React & Webpack’ 내용이 있어 따라해 보았다. => https://www.typescriptlang.org/docs/handbook/react-&-webpack.html 맞게 한거 같은데 ‘webpack’ 실행시 다음과 같은 오류가 발생했다. ERROR in ./src/components/Hello.tsx Module build failed: Error: Final loader didn’t return a Buffer or String 캡쳐 화면 구글링을 해보니 https://github.com/webpack-contrib/css-loader/issues/185#issuecomment-181615065 빈 모듈로부터 컴포넌트를 불러오려고 시도를 했기 때문이라고 한다. I resolved my issue, I ...

J

Javascript call() & apply() vs bind()

** 출처 http://stackoverflow.com/questions/15455009/javascript-call-apply-vs-bind Use .bind() when you want that function to later be called with a certain context, useful in events. Use .call() or .apply() when you want to invoke the funciton immediately, and modify the context. .bind() 함수는 파라미터를 맵핑해서 함수를 리턴하고, 이렇게 재정의된 함수를 이벤트나 콜백 처리용으로 사용한다. .call()과 .apply() 함수는 파라미터를 맵핑해서 즉시 ...

C

CORS 문제 Server 해결책 (Filter)

** 참고문서 CORS 크로스 도메인 이슈 (No ‘Access-Control-Allow-Origin’ header is present on the requested resource) 위 문서는 Spring 개발시 여러 도메인을 가질 경우, Ajax에서 발생하는 CORS 문제 해결에 대해 설명합니다. 크로스도메인문제 발생시 오류메시지 이에 대한 한글 안내는 이렇게 써 있습니다. 교차 원본 요청 차단: 동일 출처 정책으로 인해 http://xxx.co.kr 에 있는 원격 자원을 읽을 수 ...

Mobile 체크하여 OL3 선택도구 변경하기

OL3(OpenLayers 3)에서 ol.interaction.Select는 강력한 도구다. 별다른 코드를 넣지 않고도 선택시 스타일 변화와 함께 select 이벤트를 제공한다. OL3 선택도구에는 아래의 종류가 있다. Mouse – Pointer Hover Mouse – Click Mouse – Drag Box Mouse – Draw Circle or Polygon 사용상의 편의로 PC/Desktop 환경에서는 ‘Pointer Hover’를, Mobile 환경에서는 ‘Click’을 선택도구로 주로 사용한다. 우선 Javascript에서 Mobile 환경 체크 ...

OpenLayers 3에서 Daum Map 사용하기

지도 개발시 Google 지도도 만들고 Daum 지도도 만드는 등 다양한 요구가 있을 경우, OL3 하나만 개발하면 Overlay 시켜 개발공수를 절약할 수 있다는 장점이 있다. 유지보수도 편해진다. Daum Map을 개발하는 것도 동일하다. 앞에 ‘OpenLayers 3에서 Google Map 사용하기’ 글에서 소개한 바와 같은 방법으로 작업하면 된다. 작업 요령 HTML 상에 지도가 올라갈 div 객체 두개를 겹쳐 쌓는다 ...

[Javascript] jsTree 사용법 및 Tree 자료구조

jsTree는 jquery 기반으로, HTML 또는 JSON 데이터를 Tree 콘트롤로 웹에 출력해 주는 자바스트립트 라이브러리이다. 홈페이지는 이곳 ==> https://www.jstree.com/ 사용한 예는 다음과 같다. 먼저 jsTree 라이브러리를 불러온다. 이후 HTML 또는 JSON 데이터를 생성해 jstree()를 실행시킨다. 데이터 정의는 HTML과 JSON 두가지가 있는데, 위 코드는 JSON 방식이다. HTML의 경우, ‘ul’과 ‘li’ 태그를 이용하여 계층을 표현한다. 예제를 따라서, 구현을 ...

[

[펌] ‘this’를 위한 문맥 지정에 call 사용

** 참고문서 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call 익명 함수 호출에 call 사용 순수하게 생성된 이 예에서, 익명 함수를 만들고 배열 내 모든 객체에서 이를 호출하기 위해 call을 사용합니다. 여기서 익명 함수의 주목적은 모든 객체에 print 함수를 추가하는 겁니다, 배열 내 객체의 정확한 인덱스를 출력할 수 있는 this 값으로 객체 전달이 반드시 필요하지는 않았지만 설명 목적으로 했습니다.