그룹핑의 필요성웹 애플리케이션을 개발하다 보면 데이터를 특정 기준에 따라 그룹화해야 하는 상황이 자주 발생한다. 예를 들어 게시판에서 사용자들이 작성한 글을 카테고리별로 묶어서 보여주거나, 사용자 로그를 시간대별로 분류해서 보여줘야 하는 경우가 있다. 이 글에서는 JavaScript에서 배열의 원소들을 그룹핑하는 다양한 방법들을 소개한다. 방법 1. Lodash의 groupBy 함수 이용하기JavaScript에서 널리 사용되는 라이브러리인 Lodash는 배열의 원소들을 그룹화할 수 있는 groupBy 함수를 제공한다. 이 함수는 데이터를 특정 기준에 따라 손쉽게 그룹핑할 수 있는 직관적인 인터페이스를 제공한다.// 인터페이스_.groupBy(데이터, 함수 혹은 프로퍼티키)// 방법 1)_.groupBy(..
React에서 useState의 인자로 함수 반환값을 사용할 때 생길 수 있는 퍼포먼스 이슈React에서 useState 훅을 사용하여 상태를 관리할 때, 대부분은 단순한 primitive 값을 초기값으로 설정한다. 그러나 때로는 복잡한 연산이 필요한 경우도 있다. 예를 들어, 100개의 랜덤 한 Todo 아이템을 초기값으로 설정해야 한다고 가정해 보자. 일반적으로는 다음과 같은 방식으로 이를 해결한다.function createInitialTodoList() { const ret = []; for (let i = 0 ; i 처음 이 코드를 보면 아무런 문제가 없어 보일 수 있다. 초기 렌더링 시, createInitialTodoList 함수가 실행되어 Todo 리스트를 생성하고 이를 useSta..
Race Condition이란?Race Condition이란 두 개 이상의 비동기 작업이 예상치 못한 순서로 실행되면서 의도하지 않은 결과를 만들어내는 상황을 의미한다. 보통 백엔드에서 멀티스레드 프로그래밍을 할 때 Race Condition을 주로 이야기하지만, React에서도 비동기 API 호출을 여러 번 할 때 이러한 상황이 발생할 수 있다. 그렇다면 구체적으로 어떤 상황에서 Race Condition이 발생하고, 이를 해결하기 위한 효과적인 해결 방법들을 알아보자. React에서 발생할 수 있는 Race ConditionReact에서 흔히 발생할 수 있는 Race Condition의 예로, 유저의 id를 props로 받아 해당 유저의 데이터를 fetch해 보여주는 컴포넌트를 생각해 볼 수 있다. ..
배경TypeScript로 개발하다 보면 배열을 구성하는 요소의 타입을 추출해야 할 때가 종종 있다. 예를 들어, 서버에서 아래와 같은 응답 타입을 정의했다고 가정해 보자.interface Response { posts: { userId: number; title: string; text: string; }[];}이 응답을 받아 리스트 아이템을 렌더링 하는 컴포넌트를 만들 때, 해당 컴포넌트의 Prop 타입에는 보통 posts 배열을 구성하는 요소의 타입인 Post를 정의하고 싶을 것이다. 이때 가장 쉽게 생각할 수 있는 방법 중 하나는 아래와 같이 Post 타입을 별도로 분리하는 것이다.interface Post { userId: number; ..
MobX 다중 버전 에러MobX를 이용해 개발하다 보면 다음과 같은 에러 메시지를 마주칠 수 있다.1. [MobX] minified error nr: 35.2. There are multiple, different versions of MobX active. Make sure MobX is loaded only once or use `configure({ isolateGlobalState: true })` 1번 에러는 production 환경에서 볼 수 있는 메시지로, MobX 소스코드를 보면 2번과 똑같은 에러라는 것을 알 수 있다. 이 에러는 무엇이고, 어떻게 해결할 수 있는지 알아보자. 에러 발생 원인이 에러는 버전이 서로 다른 버전의 MobX들을 동시에 사용할 때 발생한다. 여기서 이야기하는 버전..
대부분의 프로그래밍 언어에서 데이터 타입을 확인할 수 있는 연산자를 제공한다. 자바스크립트도 데이터 타입을 확인할 수 있는 연산자를 제공한다. 연산자는 피 연산자의 데이터 타입을 문자열로 리턴한다. 사용법은 어렵지 않기때문에 실습 코드로 설명을 대신한다. 소스 코드/* number example */var intNum = 10;var floatNum = 3.14;console.log(typeof intNum, typeof floatNum); // number number/* string example */var ch = 'a';var str = "hello world";console.log(typeof ch, typeof str) // string string/*..
이 글은 C, C++에 익숙한 개발자의 시점으로 작성됐습니다. Symbol과 Object는 다루지 않습니다. 이 두 가지는 다른 포스팅에서 자세히 다룰 예정입니다. 자바 스크립트의 데이터 타입은 크게 두 가지로 나눠질 수 있다. 첫 번째는 기본 타입, 두 번째는 객체(Object)이다. 기본 타입은 숫자, 문자열, 불리언, undefined, null, Symbol(ECMAscript6)로 나눠지며 객체는 배열, 함수, 정규표현식으로 나눠진다. 이 글에서는 기본 타입에 해당하는 데이터 타입들을 살펴볼 것이다. 숫자(Number) C, C++, Java는 숫자를 정수, 실수로 나눠 , , 등과 같은 다양한 타입이 존재한다. 하지만 자바스크립트에서는 모든 숫자..
* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.
