이걸 왜 비교하나요?배열은 우리가 자바스크립트를 사용하면서 굉장히 많이 쓰이는 구조 중 하나이다. 하지만, 배열에도 우리가 알고 있는 일반적인 배열이 있고 배열인 척하는 객체도 있고, 배열의 기능을 가진 객체도 있다. 우리가 배열을 자주 사용하는 이유에는 바로 반복문으로 요소를 순회 가능하기 때문이라는 점도 있을 텐데, 반복문을 사용할 때 어떤 건 for문이 되는 것도 있고 안 되는 것도 있고, 배열 메서드를 사용 못 하는 경우도 있기도 하고, 또 for~of문은 왜 되는 건지에 대해 모르고 넘어가는 경우 등 헷갈리는 경우가 많았을 것이다. 이번 기회에 배열 비스무리한 것들을 모두 정리하고, 또 그것들 사이에서 반복문은 어떤 게 사용 가능한 지 그리고 왜 그렇게 되는지에 대한 이유도 정리해보고자 한다. ..

이터러블 속성을 알아야 하는 이유자바스크립트 ES6가 나오면서 이터러블이라는 개념이 등장하였다. for~of문, Set, Map, 스프레드 연산자, 구조 분해 할당 등 ES6의 등장과 함께 나온 개념들 대다수가 이터러블 속성과 연관된 개념들이기 때문에 해당 기능들의 동작 원리를 이해하기 위해서는 이터러블 속성을 한번 짚고 넘어갈 필요는 있다. (예를 들어, Set과 Map 같은 경우는 배열도 아닌데 *어떻게 배열과 비슷하게 동작할 수 있는거지? 라고 질문하면, Set과 Map은 이터러블 객체이기 때문이라고 답변할 수 있다.) * Set과 Map이 배열과 비슷하게 동작하는 지에 대한 상세 설명1) Set과 Map은 배열과 달리 인덱스를 사용하지 않는데 for~of문으로 순회할 수 있음 ☞ 이터러블 객체이기..

객체 지향 프로그래밍과 클래스 문법class Person { constructor(name, age) { this.name = name; this.age = age; } sayHi() { console.log(`Hello! My Name is ${this.name}`); }}const kim = new Person('kim', 30); // {name: 'kim', age: 30}kim.sayHi(); // Hello! My Name is kim자바스크립트의 클래스 문법은 ES6에서 도입되어 객체 지향 프로그래밍을 더 쉽게 구현하도록 도와주는 역할을 한다. 여기서 객체 지향 프로그래밍이란 객체라는 독립적인 단위로 나누고, 이 객체들을 재활용하여 ..

객체 간 타입 호환성 (feat. 슈퍼 타입과 서브 타입)type Type1 = { name: string; color: string; phone: number;}type Type2 = { name: string; color: string;}let user1: Type1 = { name: 'Kim', color: 'blue', phone: 1234}let user2: Type2 = { name: 'Lee', color: 'red'}user2 = user1; // 정상user1 = user2; // Error! 여기서 에러가 나는 이유는?타입스크립트의 슈퍼 타입과 서브 타입을 공부하면서 객체끼리 서로 할당이 될 때, 어떤 객체가 슈퍼 타입인지에 대해 공..

Vite로 React 프로젝트 시작하기npm create vite@latest예전에는 React 프로젝트를 시작할 때, 일반적으로 CRA(create-react-app)로 개발환경을 구성했지만 요즘에는 Vite를 많이 사용한다. 시간이 흘러 이제 CRA는 더 이상 권장하지 않는 방법이 되었고, 심지어 CRA로 만든 프로젝트를 Vite로 마이그레이션 하는 추세인 것 같았다. Vite는 CRA에 비해 상대적으로 작은 크기와 빠른 빌드 속도를 가지고 있기 때문에 빠르게 변화하는 개발 생태계에서 Vite가 대세로 자리 잡게 되었다. 어쨌든, Vite를 이용해서 빠르게 개발 환경을 세팅해 주고 이 글의 메인 주제인 ESLint와 Prettier를 세팅해 주겠다. (이 글의 카테고리가 React인 이유는 단순히 내..