도리쓰에러쓰

splice()와 slice() 메서드는 이름이 비슷해서 매일 헷갈리는 메서드 중 하나여서 글로 정리해보고자 한다. 우선 어떻게 사용하는지 알아보자. 1️⃣ splice() 사용 방법: arr.splice(start, deleteCount, items); - start: 배열의 변경을 시작할 index, 음수인 경우 배열 끝에서 시작한다. - deleteCount[option]: 배열 요소를 삭제할 갯수, 0이나 값을 작성하지 않은 경우 요소를 삭제하지 않으며, 값이 arr.length - start 보다 많은 경우 start부터 모든 요소를 제거한다. - items[option]: 배열에 추가할 요소, 값을 작성하지 않은 경우 배열의 요소를 삭제하기만 한다. 우선 splice()의 매개변수에 start..

배열에 요소를 더할 때 push(), unshift() 그리고 스프레드 문법 총 3가지의 방법을 통해 배열에 요소를 추가할 수 있다. 1️⃣ push() 메서드 const arr = [1, 2, 3]; arr.push(4, 5); console.log(arr); // [1, 2, 3, 4, 5] 2️⃣ unshift() 메서드 const arr = [1, 2, 3]; arr.unshift(4, 5); console.log(arr); // [4, 5, 1, 2, 3] 3️⃣ 스프레드 문법 const arr = [1, 2, 3]; const spreadArr = [...arr, 4, 5]; console.log(spreadArr); // [1, 2, 3, 4, 5] 배열 요소를 추가할 때 push()나 un..

1️⃣ delete 명령어 const obj = { a: 1, b: 2, c: 3}; delete obj.b; console.log(obj); // { a: 1, c: 3 } 2️⃣ 구조 분해 할당 (Destructuring Assignment) const obj = { a: 1, b: 2, c: 3}; const { b, ...objWithoutB } = obj; console.log(objWithoutB); // { a: 1, c: 3 }

우선 비트 연산자에 대한 설명이 필요하면 아래 게시물을 참고한다. [JavaScript] 비트 연산자 1️⃣ & (AND 논리 연산자) : 비교하는 비트가 모두 1이면 1을 반환한다. const and = 2 & 3; console.log(and); // 2 // 2 : 0010 // 3 : 0011 // 0010 => 2 2️⃣ | (OR 논리 연산자) : 비교하는 비트 중 하나라도 1이면 1을 dori-coding.tistory.com 1️⃣ 짝수를 판별하는 함수 const isEven = (num) => (num & 1) === 0; isEven(4); // true isEven(5); // false AND 논리 연산자(&)는 비교하는 비트가 모두 1이면 1을 반환한다. 짝수인 4와 1을 AND ..

1️⃣ & (AND 논리 연산자) : 비교하는 비트가 모두 1이면 1을 반환한다. const and = 2 & 3; console.log(and); // 2 // 2 : 0010 // 3 : 0011 // 0010 => 2 2️⃣ | (OR 논리 연산자) : 비교하는 비트 중 하나라도 1이면 1을 반환한다. const or = 2 | 3; console.log(or); // 3 // 2 : 0010 // 3 : 0011 // 0011 => 3 3️⃣ ^ (배타 논리 연산자) : 비교하는 비트가 같으면 0, 다르면 1을 반환한다. const beta = 2 ^ 3; console.log(beta); // 1 // 2 : 0010 // 3 : 0011 // 0001 => 1 4️⃣ ~ (부정 논리 연산자) ..

import { configureStore } from '@reduxjs/toolkit' import menuSlice from './menu-slice' const store = configureStore({ reducer: { menu: menuSlice.reducer }, }) redux 파일에 아래와 같이 코드가 작성되어 있을 때 store와 dispatch 타입 지정 방법은 아래와 같다. 1. store type export type storeType = ReturnType 2. dispatch type export type dispatchType = typeof store.dispatch

리액트를 사용하면 빠질 수 없는 라이브러리가 바로 '상태 관리 라이브러리'이다. 뷰나 앵귤러와 비교했을 때 가장 큰 차이점은 단방향 바인딩인데, 부모 컴포넌트에서 자식 컴포넌트로만 state를 props로 전달할 수 있고, 반대로 부모 컴포넌트로 props를 직접 전달할 수는 없다. 자식 컴포넌트에서 부모 컴포넌트에 있는 state를 변경하려면 setState를 props로 넘겨줘야 한다. 이것이 반복되다 보면 Props Drilling이 발생하게 되고 프로젝트의 규모가 커질수록 props의 depth가 증가하게 된다. 이는 불필요한 리렌더링을 발생시킬 수 있다. 그럼 props로 모든 state를 관리하는 것은 추천하지 않는가? 컴포넌트의 재활용성, 의존성 분리 등의 측면에서의 props를 state로..

💡 비동기적이란? 먼저 실행된 코드의 작업이 끝나기 전에 더 나중에 실행된 코드의 작업이 끝날 수 있음을 말한다. 즉, 동시성을 가지고 있는 코드들을 의미한다. 자바스크립트 V8 엔진은 싱글 스레드를 가지고 있어서 stack이 하나만 존재한다. 그런데 자바스크립트는 어떻게 비동기적으로 실행되는걸까? 1. 단일 호출 스택(Call Stack) '자바스크립트 엔진이 싱글 스레드를 가지고 있다'는 의미를 해석해보자. 자바스크립트 엔진은 하나의 Memory Heap과 단일 호출 스택(Call Stack)을 가지고 있다. Memory Heap: 메모리 할당이 일어나는 곳 단일 호출 스택(Call Stack): 코드 실행에 따라 호출 스택이 쌓이는 곳 이 말은 즉슨, 엔진 구조 상 한번에 하나의 함수만 동기적으로 ..