JavaScript

[자바스크립트] sort함수는 왜 숫자를 이상하게 정렬할까?

이상한 자바스크립트의 sort 자바스크립트 개발자라면, 당연히 알고있는 이상함이다. 그래서 "자바스크립트 숫자 정렬"과 같은 키워드로 인터넷을 검색해보면, // 오름차순 정렬을 하고 싶으세요? arr.sort((a,b)=>a-b); // 내림차순 정렬을 하고 싶으세요? arr.sort((a,b)=>b-a); 이렇게 딱 답이 나와있다. 우리는 평소처럼 숫자 정렬에서는 a-b는 오름차순, b-a는 내림차순이구나! 하고 써먹고 끝낸다. 이것만 알아도 사실 전혀 문제는 없다. 그러나 한번쯤은 이유도 궁금해해보자. 꽤나 배울 것이 많다. 이번 포스팅에서는, 왜 저렇게 이상한 함수를 넣어줘야 하는지를 함께 알아보도록 하자. Sort의 근원지 MDN를 탐색하자. Array.prototype.sort() - JavaS..

[Array] 일반적인 배열과 자바스크립트의 배열 알아보기

배열(Array) 먼저 배열에 대해 가볍게 알아본다. 배열은 동일한 크기의 메모리 공간을 연속적으로 나열한 구조다. 동일한 크기여야 하므로 하나의 통일된 타입의 요소들이, 연속적으로 인접해있는 형태를 보인다. 위처럼 "데이터가 연속으로 인접한 배열"을 밀집배열(dense array)라고 한다. 밀집배열의 경우, 인덱스를 이용해 한번의 연산으로 접근이 가능하다. 연산 횟수가 1회이므로, O(1)의 시간복잡도를 보인다. 배열의 단점 인덱스(찾으려는 데이터의 위치)를 모르면 선형탐색을 해야한다. - 선형탐색은 O(n) 시간복잡도. 배열 마지막 요소가 아닌 위치에 추가/삭제 시 배열 요소들의 연속적인 이동이 필요하다. - 삽입과 삭제에서 O(1) ~ O(N)의 시간복잡도. tmi) 왜 장점과 단점들을 따지는가?..

[vanillaJS] 채팅창 컴포넌트의 스크롤을 다뤄보자.

채팅창 문제의 시작점 프로젝트에서 채팅 컴포넌트와 관련된 코드 중 일부분이다. chats 이라는 state가 업데이트 될 때 마다, 새로운 채팅요소를 생성하게 될 것인데 채팅방 엘리먼트에 채팅들이 넘치기 시작하면 문제가 발생한다. 문제가 발생한 프로젝트는 리액트였지만, 바닐라로 차근차근 정복해보자. 바닐라를 이해하면 리액트는 effect, ref 정도만 고려해서 그대로 적용하면 된다. 👍👍 HTML을 통한 문제 소개 // index.html chat 0 채팅추가 2. 유저가 스크롤을 조절하여 특정 채팅을 보고 있다면, 새로운 채팅을 추가하지만 스크롤은 건드리지 않는다. 1번 기능에 의하면, 새로운 채팅이 추가되면 항상 스크롤이 내려가게 된다. 그렇다면 사용자는 이미 지나가버린 채팅을 보기가 쉽지 않다. ..

엄격모드. "use strict"

엄격모드(strict mode)란? ES5(ES2009)에서 추가된 스펙으로, 암묵적인 느슨한 모드"sloppy mode"를 해제하고, 자바스크립트 문법을 보다 엄격히 적용하는 방법이다. 느슨한 모드에서는 오류를 발생시킬 확률이 높거나, 최적화에 문제를 일으킬 수 있는 작업들을 유발할 수 있으며 이를 엄격모드로 전환함으로써 몇가지 실수에 대해서 명시적인 오류를 발생시키게 된다. 엄격모드 코드 런타임에서는 몇가지 변화가 생기는데, 1. 기존에는 무시되던 몇가지 에러들을 던진다. 2. JavaScript 엔진 최적화를 방해하는 실수들을 바로잡는다. 3. ECMAScript의 다음 버전들에서 정의될 문법을 금지한다. 그래서 핵심은? 평소 자바스크립트는 너무 관대하게 동작하니, 조금 빡빡하게 보면서 잠재적 오류..

이벤트 위임, 버블링, 캡쳐링 (Event Delegation, bubbling, capturing)

이벤트 위임 유사한 노드들을 다뤄야 할 때 노드마다 핸들러를 할당하지 않고, 공통 조상에 이벤트 핸들러를 할당하여 여러 노드들을 한꺼번에 다루는 방법이다. 요약하면, 이벤트를 효율적으로 다루는 방법이다. 이벤트가 전파되는 특징(캡처링과 버블링)을 이용하면 이벤트 위임을 구현할 수 있다. 이벤트 위임을 배우기에 앞서, 먼저 노드마다 직접 핸들러를 할당하는 경우를 살펴보자. 1 2 3 4 5 지금은 나름대로 querySelectorAll + forEach를 통해 그럴싸한 코드를 작성해뒀는데, 여기서 add 버튼을 통해 li태그가 추가되거나, li태그에 delete 버튼을 생성해 삭제버튼을 도입했다고 하자. 새로운 li태그 추가시에 해당 태그에도 이벤트핸들러를 부여해야 하며, 기존 li태그 삭제시에 해당 태그..

[함수형] 커링 Currying을 배워보자.

함수형 시리즈 [함수형] 클로저 Closure에 대해 알아보자. 클로저 클로저란, 내부 함수가 함수가 참조하고 있는 주변 환경에 접근할 수 있는 것을 의미한다. MDN에서는, 클로저는 독립적인 (자유) 변수를 가리키는 함수이다. 클로저 안에 정의된 함수는 만 gobae.tistory.com 이전 클로저 포스팅에 이어 이번에는 커링이다. 커링? 사진 속 연산을 이해할 수 있는가? 이해할 수 있다면 이 포스팅은 스킵하면 된다. 커링(Currying)은 함수형 프로그래밍에서 등장하는 필수 개념이다. 쉽게 말하면, '함수를 반환하는 함수'이다. 커링이 왜 사용될까? 함수의 재활용을 위해서 원하는 함수들을 조합해서 사용할 수 있다. 하나 이상의 인수의 함수를, 하나의 인수를 받는 함수로 축소할 수 있다. 그래서 ..