본문 바로가기

Development/Javascript

[Typescript] 변수 비구조화 (Destructuring) 비구조화란? (Destructuring이란?)Typescript(or Javascript ES6)에서 변수값을 할당해주는데 있어 다른 언어에서는 볼 수 없는 어마무시한 기능이 있는데 바로 비구조화 할당이다. 이게 뭐냐면 변수에 값을 할당을 하면서 구조화되어 있는(Object, Array 등)을 즉각 분리 시켜 변수에 할당해주는 기능이다. 이게 처음 접하는 분들은 무슨 말인지 감이 안 올텐데 예제를 보면 쉽게 알 수 있다.1. Array Destructuringconst [a, b] = [10, 20];이게 뭘까? 보통 언어에서는 저런 문법 자체가 없기 때문에 처음 보면 그냥 작성자의 오타나 일부러 에러를 만들어낸 것 같아 보이는 코드인데 실제로 Javascript나 Typescript에서 동작하는 코드이..
[Javascript] Array의 slice와 splice의 차이 slice()slice 함수는 Array에서 String의 substring와 같은 기능을 가지고 있는 함수이다. 즉 Array의 내용의 시작과 끝을 받아서 뽑아주는 기능이다. 문법을 보자면 아래와 같다. arr.slice([begin[, end]]) 발췌: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice중요한 건 2번째 인자의 이름이 end라는 것. 이 차이를 아는 게 중요하다. substr, substring의 차이도 마찬가지인데 어느걸로 기준점을 잡느냐의 차이이다. end 또는 indexEnd 등의 이름으로 사용하는 인자는 시작 주소 0을 기준으로 잡는다. 따라서 기준점이 begin..
async/await로 Promise를 사용하면서 reject을 try/catch로 잡을 때 주의할 점 문제의 시작 rxjs를 써보려다가 아직은 숙달되지 않아서 다시 Promise 기반으로 로직을 바꿨는데 rxjs 로직이었다가 Promise로 바꿔서 그런지 Promise가 배열로 생기는 문제가 발생하였다. 다행히도 Promise에는 mergeAll()과 비슷한 Promise.all()이 있기 때문에 여러 Promise가 끝나는 시점에 한 번에 동작 시키는 것은 가능했지만 이상하게도 catch가 안 잡히는 문제가 있었다. jsfiddle을 통해 간단하게 구현하여 테스트 해보니 java의 Exception을 try/catch로 잡는 것처럼 잡아선 안 되는 거였다. 아래 먼저 작성했던 코드가 있다. 결과는 이렇게 나온다. 코드를 보면 알겠지만 함수에 의해 Promise 배열이 생성되고, Promise.all을 ..
[Angular] Angular Input disabled 방법 https://stackoverflow.com/questions/42179150/how-to-disable-a-input-in-angular2/43765804
[Node.js] Typescript용 Controller(Like a Spring MVC) 3가지 1. tsoa - https://github.com/lukeautry/tsoa2. Trafficlight - https://github.com/swimlane/trafficlight3. routing-controllers - https://github.com/typestack/routing-controllers4. nest.js(추가함) - https://nestjs.com/셋 중에 난 3번 routing-controllers를 선택했다. star도 많고 코드가 제일 깔끔해보였다. 그리고 이미 typedi하고 연계를 잘 해놔써 typedi를 쓰는 내가 선택할 건 3번 뿐이긴 했다. 혹시나 DI 중에 inversify를 사용한다면 1번 tosa도 고려해볼만 하다. swagger도 지원되고 좋은 듯 싶다. ..
[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..