Development/Javascript 썸네일형 리스트형 [Angular] Grid Layout component 1. https://github.com/envyN/ngx-widget-grid2. https://github.com/swiety85/angular2gridster3. https://github.com/lunzhang/ng2-grid4. https://github.com/BTMorton/angular2-grid5. https://tiberiuzuld.github.io/angular-gridster2 Javascript Library1. GridStack - http://gridstackjs.com/ 2. gridster.js - https://dsmorse.github.io/gridster.js/#demos 3. Muuri - https://haltu.github.io/muuri/ 4. [Momentjs] format 이것도 스프링 Query Method처럼 참고용으로 올려놓는다. 은근 자주 쓰는데 잊어먹어서..ㅠㅠ TokenOutputMonthM1 2 ... 11 12Mo1st 2nd ... 11th 12thMM01 02 ... 11 12MMMJan Feb ... Nov DecMMMMJanuary February ... November DecemberQuarterQ1 2 3 4Qo1st 2nd 3rd 4thDay of MonthD1 2 ... 30 31Do1st 2nd ... 30th 31stDD01 02 ... 30 31Day of YearDDD1 2 ... 364 365DDDo1st 2nd ... 364th 365thDDDD001 002 ... 364 365Day of Weekd0 1 ... 5 6do0th 1s.. [Angular] formGroup 관련 에러 Error : ERROR Error: ngModel cannot be used to register form controls with a parent formGroup directive. Try using formGroup's partner directive "formControlName" instead. Example: In your class: this.myGroup = new FormGroup({ firstName: new FormControl() }); Or, if you'd like to avoid registering this form control, indicate that it's standalone in ngModelOptions: Example: Solution:이 에러가 참 어렵다. .. [Angular] File에서 값 가져오기. 출처: https://stackoverflow.com/questions/35399617/angular-2-file-upload-from-input-type-file [Angular] TS2339:Property 'curveBasis' does not exist on type 'typeof d3'. Error: Error:(103, 13) TS2339:Property 'curveBasis' does not exist on type 'typeof d3'. Solution: npm install @types/d3 --save-dev [NPM] macOS에서 npm install 중에 발생하는 에러 언젠가부터 npm install을 하면 이런 에러가 났다. 구글링을 해보니 해결방법은 재설치하면 된다고 한다 ㅎㅎ;;Error :$ yarn --version 0.27.5 $ npm install module.js:487 throw err; ^ Error: Cannot find module 'semver' at Function.Module._resolveFilename (module.js:485:15) at Function.Module._load (module.js:437:25) at Module.require (module.js:513:17) at require (internal/module.js:11:18) at Object. (/usr/local/lib/node_modules/npm/lib/util.. [Angular] Angular2 Component 사이트들 1. Angular Script오픈소스 컴포넌트만 있어 좋다 ㅎSite : http://angularscript.com/ 2. Angular Expo여긴 상용/프리가 섞여 있는 것 같다.Site : http://angularexpo.com/ 3. Material Side Menu말 그대로 옆에 나오는 메뉴 컴포넌트. AngularJS 용인듯...ㅜㅜSite : https://github.com/marcosmoura/angular-material-sidemenuDemo : http://marcosmoura.com/angular-material-sidemenu/ 4. Gridster2대시보드 꾸미기 좋은 컴포넌트Site : https://github.com/tiberiuzuld/angular-gridster.. [Javascript] JSON.parse() 사용 방법 feat. Object.assign JSON.parse()란?Javascript에는 JSON이라는 클래스가 있다. 클래스 이름대로 Javascript에서 JSON을 컨트롤하기 위한 유틸 클래스이다. Object 타입 객체를 JSON 형태의 String 타입으로 변환하려면 JSON.stringify() 함수를 사용하면 되고, 반대로 String 타입 JSON에서 Object 타입으로 변환할 때는 JSON.parse() 함수를 사용하면 된다. let jsonStr = JSON.stringify( { name: 'coffee', price: 3000 } ); console.log( jsonStr ); // {"name":"coffee","price":3000} let object = JSON.parse( jsonStr ); console.log.. [Javascript] Array.every() 사용 방법 Array.every()란?Array.forEach()와 다르게 loop를 돌다가 중간에 멈출 수 있는 아주 좋은 함수이다. 그래서 Array.forEach()를 사용할 때는 어떤 일이 일어나도 0번부터 N번까지 돌아야 할 때 사용하고, Array.map()은 마찬가지로 어떤 일이 일어나도 0번부터 N번까지 돌지만, 값에 변형을 줘야 할 때 사용한다. 그리고 이 Array.every() 어떤 일이 발생하면 loop를 멈출 필요가 있을 때 사용한다. 아래 예제를 참고하자.Array.every() 사용법아래 소스를 보면, input을 통해 값을 받고, 그 값이 Array에 존재하는지를 확인한다. every 함수 안에서 true를 리턴하면 loop를 계속 진행하고, false를 리턴하면 리턴한 시점에서 멈춘다.. [Angular] Typescript로 다른 Router-Outlet의 화면 변경하기 가끔 여러 개의 Router-Outlet을 선언해서 사용해야 할 때가 있다. 여러 개를 선언하면 어느 Router-Outlet의 페이지를 변경시킬 것인지 명시를 해줘야 하는데 아래와 같이 사용하면 된다. 선언 이 이런 식으로 선언되어 있다고 가정했을 때, 아래와 같이 사용하면 된다. navigate 사용 방법this.router.navigate( [ `./`, { outlets: { 'headerOutlet': 'header11' } } ] );아 참고로 header11이 path이다. 그리고 router 객체를 가져오는 건 provider를 이용하면 된다. [Webpack] Bootstrap tooltips require Tether Tether(http://tether.io/)는 HTML에서 절대 위치(ex. position:absolute, 수동위치, x,y 사용)를 이용한 화면을 만들 때 편리한 라이브러리이다. Bootstrap에서는 tooltip 컴포넌트가 이 라이브러리를 이용하여 개발되었다. 그래서 Tether도 같이 인클루딩 해줘야 한다. 아래는 Webpack에서 안 했을 때 나는 에러이다.Error : Error: Bootstrap tooltips require Tether (http://tether.io/) at http://localhost:9060/main.bundle.js:2754:11 이런 에러가 날 때는 간단하게 아래와 같이 Webpack Config의 ProvidePlugin에 추가해주면 된다.(대소문자 유의.. Promise를 이용한 이미지 로딩 제어 IE에선 동작 안 할 듯.. ( Native Promise도 Arrow function도 지원 안 한다.. ) 이전 1 2 3 다음
