코딩을 하다보면 배열을 랜덤하게 섞을 상황이 생깁니다. 대부분의 경우, 아래와 같은 코드를 이용해서 배열을 섞고는 하죠. Array.prototype.sort()를 이용한 방법 function sortShuffle(arr) { return arr.sort(() => Math.random() - 0.5); } 이는 배열을 정렬하는 sort 메서드를 이용해서 새롭게 정렬을 만들어내는 방식인데요, Math.random()의 결과는 0 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr; } 테스트 동일한 배열로 동일한 환경에서 테스트를 진행해 보았습니다. 테스트 코드는 아..
Javascript로 코딩을 하다보면 싱글 스레드니 Stack이니 Heap이니 하는 말을 듣게 됩니다. 그런데 의외로 많은 분들이 대충 느낌은 아니까 정도로 넘어가는 경우를 많이 봤습니다. 의외로 제대로 아는 사람들이 드물더라구요. 한번 쯤은 정리하고 넘어가는 게 좋을 것 같다는 생각이 들어서 다시금 정리를 해보겠습니다. 메모리 누수나 Garbage Collection 등 Javascript의 심화 개념을 이해하기 위해 반드시 필요한 지식이라고 생각하거든요. Call Stack Javascript를 구동하는 V8 Engine에는 크게 두 가지 구성요소가 있습니다. Call Stack과 Memory Heap인데요, 간단히 설명하자면 Memory Heap에는 참조형 데이터가 저장됩니다. 객체나 배열 같은 것..
발단 최근, 회사 프로젝트에 유닛 테스트를 도입하기로 했습니다. 기존에는 Cypress를 이용한 E2E 테스트만을 통해 데일리 빌드를 수행하고 있었는데요, Cypress가 유닛 테스트의 영역까지 차지하고 있는 게 좀 어색하게 느껴졌기 때문이에요. 컴포넌트가 다른 환경에 의존하지 않고 그 자체만으로 제대로 동작하는지는 유닛 테스트를 통해 확인되어야 한다고 생각하거든요. 테스트 방법론이야 여러가지가 있겠지만, E2E는 유저의 입장에서 전체적인 어플리케이션의 Flow를 테스트하는 것이라고 봅니다. 그에 비해 유닛 테스트는 별개의 컴포넌트의 무결성을 체크하는 것이라고 보면 될 것 같아요. 각종 Validation checking이나 그에 따른 UI 상태의 변화 같은 것들이죠. 기존에는 Jest를 이용한 테스트가..
개요 예로부터 Javasciprt 환경에서 날짜와 시간을 parsing하기 위한 도구로 가장 유명하게 사용돼 온 라이브러리는 Moment.js였습니다. 그런데 비교적 최근인 2020년 9월, Moment.js의 사망선고가 내려졌습니다. 이미 대체해서 사용하실 분들은 다들 대체하셨겠지만, 혹시 아직도 대체하지 않고 그대로 사용중이신 분들을 위한 포스팅입니다. goodbye Moment........ 😢 Moment.js는 2020년 9월 기준, 일주일에 1,200만 건 이상 다운로드 되고 있습니다. 하지만, Moment는 이전 세대의 자바스크립트 생태계를 위해 만들어졌고, 현대의 웹은 많이 달라졌습니다. 우리는 새로운 기능보다 안정성을 중시하기로 했습니다. (중략) 최근 크롬 개발 툴은 Moment를 교체..
ES6가 나온 지가 벌써 6년이 지났습니다. 그런데 코드리뷰를 하다보면 아직도 var로 변수를 할당하는 분들이 자주 보입니다. 물론 짤막하게 동작을 보여주기 위해서 코드를 작성하는 수준에서는 크게 문제될 게 없겠지만 그 코드를 보는 사람들 중 누군가는 그게 정설이라고 생각하고 개발을 시작하게 될지도 모릅니다. 그래서 변수 선언 방식에 대해서 피드백을 드리면, 물론 대부분은 수정해주시지만 왜 굳이 그렇게 써야 하냐고 되묻는 분들이 이따금씩 계셨습니다. 이미 이것에 대한 자료들이 인터넷 여기저기에 차고 넘치는데도요. 그래서 썼습니다. 왜 var를 버리고 const와 let을 사용해야 하는지! 하.. let? const? 일단 둘의 차이점을 먼저 언급하고 넘어가는 게 좋을 것 같습니다. 아주 간단히 설명해서 ..
ES6에서 새롭게 도입된 자료구조로, iterable한 객체입니다. Map 특징 Map()은 Javascript의 key-value pair로 이루어진 컬렉션 Key를 이용해서 value를 get, set 가능 key는 중복될 수 없음 key에는 어떤 값이든 사용할 수 있음 // Map을 만들어서 key, value 엔트리를 추가하는 방법 const person = new Map() person.set('name', 'Jay') person.set('age', 30) console.log(person.get('age')) // 30 // has(): 주어진 key 가 존재하는지 확인 console.log(person.has('name')); // true // size: map 에 담겨진 엔트리의 개수를..
What is Module Module이란 독립적인 하나의 Software를 의미합니다. 사실 순수한 Javascipt에는 Module이라는 개념이 분명하게 존재하고 있지는 않았는데, JS가 구동되는 환경에 따라서 서로 다른 Module화 방법이 제공되고 있었습니다. 이렇게 Module화된 Software는 자주 사용되는 코드라면 재활용성이 크게 향상되고, 해당하는 코드를 개선하면 이를 사용하는 모든 Application의 동작이 개선됩니다. 만일 Module의 런타임 환경이 웹브라우저라면, 해당하는 공간에 저장이 되므로 동일한 로직을 로드할 때 시간과 트래픽을 절약할 수 있다는 장점이 있습니다. Javscript 모듈 시스템의 종류 앞서 말했듯이 순수한 JS에는 Module System 개념이 분명하게..
