일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- JS
- localstorage
- 자바스크립트
- axios
- 파이어베이스
- 타입스크립트
- 리액트
- state
- v9
- es6
- CORS
- TypeScript
- react
- til
- 원티드
- firebase
- 프리온보딩
- Frontend
- 컴포넌트
- 프론트엔드
- 알고리즘
- 비트 연산자
- react localStorage
- JavaScript
- Reducer
- Redux
- Component
- array
- 브라우저
- 프로그래머스
- Today
- Total
목록JavaScript (24)
도리쓰에러쓰
1. 자바스크립트 엔진이 코드를 계산하기 위해 알아야 하는 부분 10 + 20 - 10, 20, + 기호의 의미를 알고 있어야 한다. - 10 + 20이라는 표현식의 의미도 해석할 수 있어야 한다. 자바스크립트 엔진은 피연산자인 10(좌변)과 20(우변)을 메모리에 기억하고, CPU를 사용해 연산한다. 2. 메모리(Memory) - 메모리(Memory): 데이터를 저장할 수 있는 메모리 셀(Memory Cell)의 집합체 - 메모리 셀 하나의 크기는 1바이트(8비트)이며, 컴퓨터는 메모리 셀의 크기, 즉 1바이트 단위로 데이터를 저장하거나 읽는다. - 각 셀은 고유의 메모리 주소(Memory Address)를 가진다. 메모리 주소는 메모리 공간의 위치를 나타내며 메모리의 크기만큼 정수로 표현된다. - 컴..
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 }
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️⃣ ~ (부정 논리 연산자) ..
💡 비동기적이란? 먼저 실행된 코드의 작업이 끝나기 전에 더 나중에 실행된 코드의 작업이 끝날 수 있음을 말한다. 즉, 동시성을 가지고 있는 코드들을 의미한다. 자바스크립트 V8 엔진은 싱글 스레드를 가지고 있어서 stack이 하나만 존재한다. 그런데 자바스크립트는 어떻게 비동기적으로 실행되는걸까? 1. 단일 호출 스택(Call Stack) '자바스크립트 엔진이 싱글 스레드를 가지고 있다'는 의미를 해석해보자. 자바스크립트 엔진은 하나의 Memory Heap과 단일 호출 스택(Call Stack)을 가지고 있다. Memory Heap: 메모리 할당이 일어나는 곳 단일 호출 스택(Call Stack): 코드 실행에 따라 호출 스택이 쌓이는 곳 이 말은 즉슨, 엔진 구조 상 한번에 하나의 함수만 동기적으로 ..
비동기 처리는 결과가 언제 반환되는지 알 수 없어서 동기식으로 처리하는 기법들을 사용해야 하는데 대표적으로 setTimeout, callback, promise가 있다. 그 외에도 사용법이 간단해진 비동기 처리 방법이 있는데 바로 async와 await이다. 우선 몰라도 좋으니 아래 코드를 참고하여 얼마나 간단해졌는지 확인만 해보자. // Promise const p1 = () => { return new Promise((resolve, reject) => { resolve('성공'); }); }; //async async function p2 () { return '성공'; }; p2.then((value) => console.log(value)); 1. async와 await async와 await는..
자바스크립트의 Promise를 알아보기 전에 동기와 비동기의 차이에 대해 알아보자. 1. 동기(Synchronous)와 비동기(Asynchronous) 1️⃣ 동기(Synchronous) - 1번부터 4번까지의 명령이 있을 때 순차적으로 명령이 진행 - 앞의 명령이 끝날 때까지 뒤의 명령은 먼저 실행되지 않는다. 2️⃣ 비동기(Asynchronous) - 명령의 순서와 상관없이 동시에 명령 실행 2. Promise 자바스크립트는 비동기 처리를 위해 콜백 함수를 사용한다. 하지만 콜백 중첩, 즉 콜벡 헬로 인해 코드의 가독성이 떨어지고, 비동기 처리 중 발생한 에러의 처리가 곤란한 등의 문제가 발생할 수 있다. async(1, () => { async(2, () => { async(3, () => { as..