javascript 썸네일형 리스트형 [rxjs] concat, merge, zip, combineLatest의 차이점 여러 Observable을 한 번에 처리하기 위한 함수인 concat, merge, zip, 그리고 combineLatest의 사용 방법을 알아보고 차이점도 같이 알아보려 한다. 유능하고 센스 있는 개발자라면 이름만 보고도 그 사용법과 차이점을 알 수 있겠지만 나같은 초보 개발자는 이렇게 친절한 포스팅을 통해야만 그 사용법과 차이점을 알 수 있어 나와 같은 초보 개발자들을 위해 이 포스트를 작성한다. 일단 먼저 같은 Observable 세 가지를 두고 concat, merge, zip, combineLatest 한 번씩 실행해보자. 그리고 하나씩 설명할 것이다. 그리고 결과값을 직접 보는 방법은 F12를 눌러 DevTools를 켜고 Console 탭을 띄워놓은 뒤에 jsfiddle 탭 중 Result를 .. [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로 주면 되네? ㅋㅋㅋㅋㅋ .. [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.. [Javascript] for-of에서 index값 사용하고 싶을 때 for-of는 for문에서 of 키워드를 사용하여 자동으로 배열의 요소값을 넘겨 받아 처리할 때 사용한다. 일반적인(요즘엔 for-of가 일반적이겠지만) for 문은 i를 length만큼 증가 시켜서 해당 배열 탐색을 하는데 배열의 위치값을 넣어서 사용해야 하는 귀찮은 점이 있다. 그래서 요즘엔 보통 for-of를 사용하는데 이게 또 가끔 해당 index 값을 가져올 수가 없는 문제가 있다. 그럴 때는 이렇게 사용하면 된다. 이런 편한 방법이? 성능상의 문제도 딱히 없는 것 같고 자동으로 변수에 할당하는 기능도 사용할 수 있어 편리한 것 같다. 추가. jsben(http://jsben.ch/gi3xg)을 이용해서 퍼포먼스를 비교해봤는데 확실히 느리긴 느리다ㅜㅜ 웬만하면 일반for를 사용하고 간단하고 짧게.. [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.. [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를 리턴하면 리턴한 시점에서 멈춘다.. [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도 지원 안 한다.. ) 코딩도장 문제풀기01 - 1~10000번까지 숫자 8 카운트 http://codingdojang.com/scode/393 String형 Boolean값을 Boolean으로 변환하기 단순 연산자 비교로 변환하기 JSON을 이용해서 변환하기 간단한 성능비교 이전 1 2 다음
