this를 포함한 property를 구조분해할당하면this가 가리키는 객체가 다를 것이라는 것은 머릿 속으로는 알고 있었는데,정리해보려고 남겨보는 글이다.this를 포함한 구조 분해 할당의 문제와 해결 방법구조 분해 할당은 객체나 배열에서 원하는 속성 또는 값을 추출해 별도의 변수로 할당하는 방식이다.코드의 간결성과 가독성을 높이는데 자주 사용된다.예시: 단순 속성 구조 분해this를 사용하지 않는 경우, 구조 분해 할당은 아무 문제 없이 동작한다.함수형 예제const obj = { a: 1, b: 2, c: 3 };const { a, b } = obj;console.log(a, b); // 출력: 1, 2클래스 예제 (this 제외)class MyClass { constructor() { thi..
JS와 React에서의 디자인 패턴을 다루기 앞서, 자바스크립트 + 리액트 디자인 패턴을 읽고,디자인 패턴에 대한 개념을 정리해보려 한다. 디자인 패턴이란?디자인 패턴은 소프트웨어 개발에서 반복적으로 마주치는 문제를 효율적으로 해결하기 위한 모범적인 코드 설계 방식이다.이를 통해 개발자들은 코드의 가독성, 확장성, 유지보수성을 높일 수 있다. 특히 리액트와 같은 프레임워크에서는 상태 관리나 컴포넌트 구성에 디자인 패턴이 중요한 역할을 한다. 디자인 패턴의 필요성 및 특징가독성 향상: 코드 구조가 명확해져 다른 개발자들이 코드를 이해하고 수정하기가 쉬워진다.유지보수성 강화: 복잡한 로직을 반복적으로 해결할 수 있어, 코드 수정 시 더 적은 위험으로 변경이 가능하다.확장성 증가: 구조화된 코드를 기반으로 새..
성능을 고려하는 개발자라면,데이터를 어떻게 관리해야하는게 좋을지 고민해봐야 할 것이다.(사실 나는 이제서야 처음으로 생각해보는 것 같다.)JS에서 데이터를 어떻게 관리하는 것이 좋을까?JavaScript에서 데이터를 관리하는 방법은 여러 가지가 있으며, 각 방법은 특정 상황에서 장단점이 있다.이번 글에서는 Array, Object, Map, Set의 정의와 특징, 그리고 각각의 예시를 통해 어떻게 활용할 수 있는지 살펴보겠다.type 정의(공통)type NoticeItem = { key: string; subject: string; content: string; createDate: string; createBy: string;};1. Array정의Array는 순서가 있는 데이터의 집합으로, 인..
매년 Ecma International에서는 JavaScript의 표준인 ECMAScript(줄여서 ES)를 개정하여 발표한다.2024년 7월에 발표된 ES2024는 JavaScript에 새로운 기능을 추가하고 기존 기능을 더욱 강화하여 개발자들의 작업을 보다 효율적으로 만들어 주는 다양한 개선 사항을 포함하고 있는데,이번 글에서 다뤄보고자 한다.[JS] ES2024에는 어떤 기능이 추가되었을까?1. Object.groupBy 및 Map.groupByES2024 이전의 불편함: 배열을 특정 기준으로 그룹화할 때, 개발자는 reduce()나 forEach()를 사용해 수동으로 데이터를 그룹화해야 했다. 이 방식은 코드가 길어지고 가독성이 떨어지며, 실수를 유발할 가능성도 있다.이전 코드 (ES2024 이전..
