코딩 기록기

Promise Promise는 자바스크립트에서 비동기 처리에 사용되는 객체이다. 내용은 실행 되었지만 결과를 아직 반환하지 않은 객체라고 이해해도 좋다. Promise 에는 3가지 상태가 있는데 Pending (대기) Fulfilled (이행) Rejected (실패) 비동기 처리가 완료 되지 않았다면 Pending, 완료 되었다면 Fulfilled, 실패하거나 오류가 발생하였다면 Rejected 상태를 갖는다. Promise 사용 예시 const condition = true; const promise = new Promise((resolve, reject) => { if (condition) { resolve('resolved'); } else { reject('rejected'); } }); pro..

1. 이벤트 버블링(Event Bubbling) 이벤트 버블링이란 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상을 말한다. 버블링 예제 코드를 보자. DIV1 DIV2 DIV3 const divs = document.querySelectorAll("div"); const clickEvent = (e) => { console.log(e.currentTarget.className); }; divs.forEach((div) => { div.addEventListener("click", clickEvent); }); div를 클릭하면 해당하는 클래스의 이름이 콘솔로 출력되는 코드이다. 자..

자바스크립트의 변수 선언은 var로만 가능했으나, ES6(ES2015)부터 let과 const가 추가 되었다. 옛날의 var가 최신의 let(변수), const(상수)로 분리되었다고 생각할 수 있으나, 내부 사정은 상당히 다르다. (참고로 여전히 var도 함께 사용이 가능하다) var, let, const 차이점 중복선언 가능 여부 재할당 가능 여부 변수 스코프 유효범위 변수 호이스팅 방식 1. 중복선언 1. var : 중복 선언이 가능하다. // 첫번째 변수 선언+초기화 var a = 10; console.log(a); // 10 // 두번째 변수 선언+초기화 var a = 20; console.log(a); // 20 // 세번째 변수 선언(초기화X) var a; console.log(a); // 2..

JavaScript의 유용한 배열 메소드 정리 📌 1. push & unshift let arr = [1, 2, 3]; console.log(arr.push('push!')); // [1, 2, 3, 'push!'] console.log(arr); // console.log(arr.unshift('unshift!')); // 5 console.log(arr); // ['unshift!', 1, 2, 3, 'push!'] push 배열 끝에 요소를 추가시킨다. unshift 배열 앞에 요소를 추가시킨다. 배열의 length를 반환한다. 기존 배열을 변경한다. 📌 2. pop & shift let arr = ['unshift!', 1, 2, 3, 'push!']; console.log(arr.pop()); ..

React에서 구성 요소가 데이터를 받거나 처리하고 보내기 위해 사용된다. props 먼저 props("properties"의 줄임말)로 state 와의 간단한 차이는 변할수 없다는 것이다. 컴포넌트는 상속하는 부모 컴포넌트로 부터 props 를 받고 이 props 는 상속받는 컴포넌트 내에서 수정이 불가능하다. 리액트에서 부모 > 자식 일방향성 상속이라는 특징때문이다 . 블변의 데이터(읽기전용) 부모로부터 전달된다 초깃값과 자료형의 유효성 검사가 가능 state 컴포넌트 상태를 나타내며 , props 와 반대로 변할수 있다 . 컴포넌트의 내부에서 선언되기 때문에 이러한 state 는 외부에 공개하지 않고 컴포넌트가 스스로 관리한다. 상태에 따라 변화하는것 직접 변경 가능 state 가 변경되면 컴포넌트..

Promise는 무엇인가? JavaScript(React)에서 Promise는 비동기 처리에 활용되는 객체입니다. 여기서 비동기 처리란 line by line 순차적으로 특정 코드의 실행을 끝까지 기다리지 않고 다음 코드를 선제적으로 처리하는 것을 의미합니다. Promise의 역할 Promise는 주로 웹 서비스 구현 시 원활한 데이터 통신을 위해 활용됩니다. 더욱 구체적으로 말씀드리자면, 서버에 데이터를 요청했을 때, 데이터가 모두 받아오기 전에 웹에 출력하려고 할 때 발생하는 오류를 방지하기 위해 활용됩니다. 즉, Promise 객체는 A, B, C 로직이 있을 때, A 로직이 모두 완료될 때까지 B, C 로직을 대기시키지 않고 실행시키는 데 주로 활용됩니다. Promise의 상태(State) Pro..

구조분해 (Destructuring assignment) 1. 문법 구조분해의 기본 문법은 아래와 같습니다. const [a, b] = [1, 2]; console.log(a); // 1 console.log(b); // 2 const [c, d, ...rest] = [1, 2, 3, 4, 5, 6, 7]; console.log(c); // 1 console.log(d); // 2 console.log(rest); // [3, 4, 5, 6, 7] const { e, f } = { e: 1, f: 2 }; console.log(e); // 1 console.log(f); // 2 const x = [1, 2, 3, 4, 5]; const [y, z] = x; console.log(y); // 1 cons..

ES6의 호환성 해결 방법은 ? 브라우저 별로 구동원리 또는 JS엔진 등의 차이가 있기 때문에 브라우저 호환성 이슈가 발생하는데, 이러한 차이를 최소화해 런타임 환경에 맞게 최적화 하는 작업을 크로스 브라우징이라고 하는데, Javascript의 호환성에 따른 충돌이나 부작용을 줄이기 위한 방법으로는 Babel이라는 도구를 사용하면 됩니다. 바벨은 주로 ES5 이상 버전의 코드를 현재 및 과거의 브라우저와 같은 환경에서 호환되는 버전으로 변환하는데 사용되는 도구로, IE나 다른 브라우저에서 동일한 기능을 제공하고 side-effect를 최소한으로 줄일수 있습니다. 사이드 이펙트 (Side Effect) 란 ? 사이드 이펙트란 사전적의미로는 '원래의 목적과 다르게 다른 효과 또는 부작용' 이라는 상태를 말하..

Array 특징 Array은 입력된 데이터들이 메모리 공간에서 연속적으로 저장되어 있는 자료구조이다. 메모리상에서 연속적으로 저장되어 있는 특징을 갖기때문에, index를 통한 접근이 용이하다. index만 알고 있다면 시간 복잡도 O(1)만에 해당 원소로 접근할 수 있다. 조회 각 데이터의 index를 가지고 있고 무작위 접근이 가능하기 때문에, index로 각 데이터에 직접 접근이 가능 데이터 삽입과 삭제 데이터의 삽입과 삭제 시 그만큼 index를 맞춰주어야 함 예시 : 5개의 데이터가 있을 때 맨 앞을 삭제했다면 뒤쪽의 나머지 4개는 앞으로 한 칸씩 이동해야됨 이로 인해 삽입과 삭제가 많다면 Array는 비효율적임 Linked List 특징 LinkedList는 여러 개의 노드들이 순차적으로 연결..

ES6에서 추가된 기능 ( String Literal, 객체 비구조화 ( Object Destructuring ), 객체 리터럴 ( Object Literal ), for .. of, Spread Operator, Rest Parameter, Arrow Function, Default Params, includes, Trailing Commas, Map & Set ) 1. String Literal ES6의 String Literal을 활용하면 문자열을 좀 더 직관적으로 결합할 수 있습니다. es5 const val1 = 'my string'; const val2 = 'my string2'; const conVal = val1 + ', '+ val2; console.log(conVal); // my st..