본문 바로가기

Development

[WebStorm] Mark Modified(*) 설정 위치 원래는 Asterisk 라는 이름으로 찾으면 나왔는데 바뀌어서 블로그 남김!
Angular HttpClient를 통해 plain text를 가져오는 방법 https://github.com/angular/angular/issues/18672#issuecomment-424751374
[Mac] 열려 있는 포트 확인하고 프로세스 종료 시키기 프로세스 찾기 가끔 종료 시켰는데 정상적으로 종료되지 않아서 프로세스가 남아 포트를 점유하고 있는 상황이 발생한다. 내 경우는 Windows에서는 꽤 빈번하게 발생해서 netstat를 잘 쓰니까 커맨드를 안 잊어버리는데 Mac에서는 잘 안 쓰다보니까 자꾸 까먹어서 이렇게 포스팅 남긴다. sudo lsof -P -i :[포트번호] [포트번호] 부분을 각자 검색하려는 포트 번호로 변경하여 실행하면 다음과 같은 결과를 얻을 수 있다. 실행결과를 보면 알겠지만 NAME 부분에서 *:4040이 내가 검색하려고 한 프로세스이다. 때에 따라서 * 부분이 달라질 수 있다.(리슨 대상에 따라서 달라진다.) 하나의 프로세스만 나오는 게 아니라 여러 프로세스가 나오는 이유는 여러가지가 있겠지만 이 경우엔 바라보고 있는 프로..
[Typescript] RegExp의 함수를 사용할 때 주의할 점 서론 Typescript나 Javascript에서 RegExp 객체를 변수화한 뒤에 test()나 exec() 함수를 사용할 때는 특별히 주의할 점이 있다. 바로 lastIndex. 정규표현식을 사용할 때 flag로 넣을 수 있는 옵션 중에 g가 있는데 이것은 전체 찾기를 하겠다는 옵션이다. 이걸 넣어서 사용하면 내부적으로 lastIndex를 사용하게 되는데 lastIndex 속성은 함수를 실행할 때마다 값을 기억하고 다시 시작할 때 그 위치에서 검색을 시작한다. 그러니까 대상자 하나를 가지고 검색할 때는 괜찮을 수 있으나, 단순 검색으로 여러 대상을 가지고 검색을 할 때는 100% 문제가 된다. 원인 위의 코드를 보면 결과값이 true, true, 가 나오는 것으로 기대하지만 실제로는 true, fal..
[Node.js] 상위 Directory까지 한 번에 생성하기 서론 어디든 개발하다보면 File을 써야 할 상황이 온다. 그러면 아무 폴더에다가 저장하지 않고 ~/Documents/upload/image 와 같은 정리된 디렉토리 계층을 사용할 것이다. 문제는 여기서 발생한다. 정리된 디렉토리 계층을 사용하려면 디렉토리가 여러 개가 되어야 하는데 Node.js에서 지원하는 fs.mkdir은 여러 디렉토리를 한 번에 생성해주지 않는다. ~/Documents/upload/image 를 생성해서 사용하려면 ~/Documents는 원래 있는 거니 상관 없고, upload와 image 두 가지 디렉토리를 생성해줘야 한다. 그래서 패키지 mkdirp를 따로 추가하여 사용하고 있었는데 Node.js 10.12 버전부터는 recursive 옵션을 true로 주면 되네? ㅋㅋㅋㅋㅋ ..
Webhook 테스트 사이트 요즘엔 참 대단한 사람들이 많은 것 같다. 이런 완전 좋은 툴도 만들어주시고ㅜㅜ 1. Request Catcher 깔끔한 디자인의 사이트. 편하게 Request를 테스트 할 수 있지만 단점으로 바디가 한 줄로 나와서 데이터를 한 눈에 알아보기가 힘들다. 특이하게 서브 도메인을 설정해서 Request를 받는 형식인데 test와 같은 잘 사용하는 단어로 들어가면 다른 사람이 테스트하는 게 같이 들어올 수 있다. https://requestcatcher.com/ Request Catcher — record HTTP requests, webhooks, API calls Request Catcher will create a subdomain on which you can test an application. Al..
[Typescript] 간단하게 리팩토링 한 내용 처음엔 단순하게 string을 enum으로 변경하는 함수로 개발했었다. private convertTriggerFromDb( webhookInfo: WebhookEntity ) { if( !_.isEmpty( webhookInfo.triggerStr ) ) { return trigger = webhookInfo.triggerStr.split( ',' ).map( v => IncomingTriggerType[ v ] ); } return undefined; } 그러다 타입이 늘어나 이렇게 되어버렸다. private convertTriggerFromDb( webhookInfo: WebhookEntity ) { if( !_.isEmpty( webhookInfo.triggerStr ) ) { if( webhoo..
[PostgreSQL] 패스워드 변경하기 간단하게 alter user 쿼리를 사용하면 된다. ALTER USER [아이디] WITH PASSWORD '[패스워드]'; 대괄호 부분이 변수라고 보고 아래처럼 변경해서 사용하면 된다. ALTER USER posuser WITH PASSWORD 'wpek2k3j3lqe';
[mac] nvm으로 node.js 버전 바꾸기 node.js를 설치하고 개발하거나 테스트할 때 필연적으로 버전 매니저를 설치하게 된다. Javascript 언어는 계속 업데이트 되고 있기 때문에 최신 문법 (가령 flat()) 등을 쓰려면 node.js의 버전을 계속 업데이트 해줘야 하기 때문이다. 여하튼 nvm을 사용하면 되는데 설치 방법은 https://github.com/nvm-sh/nvm을 참고 하고 설정된 버전은 아래와 같이 바꾸면 된다. (설정 방법도 저 URL에 나와 있지만..;) nvm use 12.5.0 그런데 이렇게만 바꿔서 사용하면 당장 사용하고 있는 터미널에서만 버전이 바뀐다는 문제가 있다. 터미널을 껐다가 다시 키거나 하면 사용하겠다는 node.js 버전이 바뀔 수 있다. (버전을 하나만 설치하면 아마 그러진 않을 것 같지만)..
[Javascript] for-of에서 index값 사용하고 싶을 때 for-of는 for문에서 of 키워드를 사용하여 자동으로 배열의 요소값을 넘겨 받아 처리할 때 사용한다. 일반적인(요즘엔 for-of가 일반적이겠지만) for 문은 i를 length만큼 증가 시켜서 해당 배열 탐색을 하는데 배열의 위치값을 넣어서 사용해야 하는 귀찮은 점이 있다. 그래서 요즘엔 보통 for-of를 사용하는데 이게 또 가끔 해당 index 값을 가져올 수가 없는 문제가 있다. 그럴 때는 이렇게 사용하면 된다. 이런 편한 방법이? 성능상의 문제도 딱히 없는 것 같고 자동으로 변수에 할당하는 기능도 사용할 수 있어 편리한 것 같다. 추가. jsben(http://jsben.ch/gi3xg)을 이용해서 퍼포먼스를 비교해봤는데 확실히 느리긴 느리다ㅜㅜ 웬만하면 일반for를 사용하고 간단하고 짧게..
[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..

티스토리툴바