본문 바로가기

Development

[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..
[Windows] 열려있는 포트를 확인하는 netstat 사용 방법 Windows에서 열려 있는 포트를 확인해야 할 때가 가끔 발생한다. 가령 서버를 띄워 개발 테스트를 하다가 종료가 제대로 안 되어서 프로세스가 남아 있는지 실행이 안 될 때 확인하거나 아니면 보안을 위해서 오픈되어 있는 포트를 확인할 때라든지 간간히 명령어를 사용하게 된다. 근데 잘 안 쓰다보니 자꾸 잊어먹어서 포스팅을 통해 기록을 남긴다.일단 단순히 목록을 쭉 뿌려주고 싶을 때 사용하는 명령어는 다음과 같다.netstat -an그러면 아래와 같이 오픈되어 있는 모든 포트를 보여준다. 이렇게 실행하면 포트 전체를 알 수는 있지만 내가 관심 있는 포트를 찾아서 보기는 좀 불편하다. 그래서 linux의 grep과 같은 기능의 findstr 명령어를 파이프를 통해 실행하면 편하게 해당 포트만 볼 수 있다. ..
[macOS] MAC에서 윈도우 키보드를 사용할 때 옵션(alt)키와 커맨트키를 바꾸는 방법 출장에 나왔는데 가지고 있는 건 맥북프로인데 키보드는 HP키보드라 Alt키와 Windows키가 안 맞는 문제가 있었다. 그래서 키보드를 안 쓸까 하다가 키보드 설정을 찾아보니 고맙게도 특수키를 변환해주는 기능이 있었다 ㅎㅎ 그래서 바꿔서 사용 중에 있다.일단 옵션은 System Preferences(시스템 환경설정) > Keyboard(키보드) > Keyboard(키보드)탭 > Modifier Keys(보조 키)를 누르면 아래와 같은 화면이 나오는데 여기서 설정하면 된다.간단하쥬? ㅋ그리고 이제 키보드는 이렇게 사용하면 조금 편하지 않을까 싶다 ㅋㅋㅋㅋㅋㅋ
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을 ..
[VS Code] 단축키 정리 중.. macOS 기준 Navigate전 커서 위치로 이동: Command + -다음 커서 위치로 이동: Command + Shift + -구현체로 이동 : F12워크스페이스 안에서 심볼 찾기: Command + O파일 안에서 심볼 찾기: Command + Shift + O파일 찾기: Command + P기능 검색: Command + Shift + P왼쪽 파일로 이동: Command + Shift + [오른쪽 파일로 이동: Command + Shift + ]설정: Command + , 참고: https://code.visualstudio.com/docs/editor/editingevolved
[Chrome] DevTools에서 Network, Console 클리어 단축키 웹 개발자에게 필수인 Chrome의 DevTools. (단축키: Alt + Command + I)로그를 볼 때 클리어해서 보는 게 편한데 단축키를 사용하면 더 편하다 ㅋConsole의 Clear 단축키는 Command + K,아쉽게도 Network의 Clear 단축키는 없다ㅜㅜ 편법으로 Recording Network를 껐다가 키면 로그가 사라지는데 그걸 이용해서 Command + E를 두 번 누르면 된다. (https://stackoverflow.com/questions/47993352/chrome-devtools-shortcut-to-clear-network-tab-logs)참고로 터미널 클리어 단축키도 Command + K이다.
[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.
[IntelliJ] 작업 중인 메소드명 아니면 클래스명 보기 단축키 Alt + Q를 누르면 커서가 있는 위치의 메소드명이나 클래스명이 나오는 단축키. 커서가 메소드 안에 있으면 메소드명이 먼저 보여지고 한 번 더 누르면 클래스명이 나온다. 커서가 메소드 밖 클래스 안에 있으면 클래스명이 먼저 나온다.
[macOS] TCP Tester Packet Sender Packet Sender ( https://packetsender.com )윈도우용은 상용도 많고 좋은 툴도 많은 듯 싶은데 맥용으로는 별로 없는 것 같다. (윈도우용으로는 상용이지만 Docklight 짱짱맨) 그 중에 맥에서 써본 것 중에 이게 제일 좋은 것 같다. TCP뿐만 아니라 UDP, SSL, IPv6까지 지원한다. 당연히 데이터를 보내고 받을 수 있다. 그리고 개인적으로 가장 장점으로 생각되는 건 크로스 플랫폼!!!! 요즘엔 맥용은 있어도 리눅스용은 거의 없는... 실정이라 크로스플랫폼인 게 반갑고 고맙다 ㅎㅎ;;메인 화면 실행화면