얕은 복사 (shallow copy) 와 깊은 복사 (deep copy) 얕은 복사와 깊은 복사는 참조형에만 해당된다. 얕은 복사 javascript의 참조형은 가변성 때문에, 데이터를 복사해오는 것에 주의가 필요하다. 이때 얕은 복사는 참조형 데이터의 1차원 데이터만 복사한다. 더 깊은 차원의 데이터는 깊은 복사를 이용해서 가져온다. 얕은 복사는 객체의 경우 Object.assign()을 통해, 배열의 경우 concat()을 통해 할 수 있으며, 두 가지 데이터 모두 공통적으로 스프레드 연산자 ... 을 사용할 수 있다. // 얕은 복사(shallow copy) - 참조형의 1차원 데이터만 복사 let a = 1 let b = a // a 주소의 메모리 주소가 b에 할당됨 b = 2 console.lo..
javascript
불변성과 가변성 불변성과 가변성은 그 데이터가 원시형인가 참조형인가에 따라 갈리는 성질이다. 객체(object), 배열(array), 함수(function)이 참조형 데이터에 해당된다. 이를 제외한 데이터는 원시형에 해당된다. 원시형 데이터는 불변성을, 참조형 데이터는 가변성을 가지고 있다. 원시형은 모양이 같으면 같다고 할 수 있지만, 객체형은 모양이 같다고 해서 같다고 해서는 안된다. // 불변성 & 가변성 // 불변성(Immutability)은 생성된 데이터가 메모리에서 변경되지 않고 가변성(Mutability)은 생성된 데이터가 메모리에서 변경될 수 있음을 의미 // 참조형: 객체, 배열, 함수 // 자바스크립트 원시형은 불변성을, 참조형은 가변성을 가지고 있다. let a = 1; let b =..
자바스크립트 이벤트 중 Focus와 Form과 관련된 이벤트들이다. 이벤트를 보고 아래 코드를 보며 어떤 작용을 할지 생각해보면 좋을 것 같다. Focus & Form Event focus : 요소가 포커스를 얻었을 때 blur: 요소가 포커스를 잃었을 때 input : 값이 변경되었을 때 change : 상태가 변경되었을 때 submit : 제출 버튼을 선택했을 때 reset : 리셋 버튼을 선택했을 때
자바스크립트 이벤트 중 Keyboard와 관련된 이벤트들이다. 이벤트를 보고 아래 코드를 보며 어떤 작용을 할지 생각해보면 좋을 것 같다. Keyboard Event keydown : 키를 누를 때 keyup : 키를 뗄 때
자바스크립트 이벤트 중 Mouse와 관련된 이벤트들이다. 이벤트를 보고 아래 코드를 보며 어떤 작용을 할지 생각해보면 좋을 것 같다. Mouse Event click: 요소를 클릭(버튼을 눌렀다가 뗌)했을 때 발생 dbclick: 요소를 더블클릭했을 때 발생 mousedown: 요소에 마우스 버튼을 눌렀을 때 발생 mouseup: 요소에 마우스 버튼을 뗐을 때 발생 mouseenter: 요소 안에 커서가 들어갔을 때 발생 mouseleave: 요소 안에서 커서가 벗어났을 때 발생 mousemove: 해당 요소에서 커서를 움직였을 때 발생 contextmenu: 마우스 오른쪽 버튼을 눌렀을 때 발생 wheel: 마우스 휠을 굴렸을 때 발생
이벤트 위임 (event delegation) 비슷한 방식으로 여러 요소들을 다뤄야할 때 사용한다. 모든 요소에 이벤트를 달아주는 것이 아니라 공통 조상에 이벤트 핸들러 하나만 할당한다. 그 후 부모요소를 통해 자식 요소에 할당해주면 되는데, 이 방법을 통하면 이벤트를 하나만 할당해도 여러 요소를 한 번에 다룰 수 있다. 1 2 3 4 커스텀 이벤트 (custom event) 이벤트를 직접 만들어 dispatchEvent를 통해 실행시키는 것을 뜻한다. 이게 사실 사용을 하나 싶어서 찾아봤는데 그래픽 컴포넌트를 만들 때 사용된다고 한다. 어쨌든 쓰니까 만들어 놨겠지라는 생각을 하지만... mdn 문서를 참조하면 좋을 듯 하여 아래에 첨부한다. 1 2 3 4 https://developer.mozilla...
이벤트가 발생했을 때, 이것이 퍼져나가는 방식에는 2가지가 있다. 하나는 버블링 방식이고 하나는 캡쳐링 방식이다. 버블링 한 요소에 이벤트가 발생하면 해당하는 요소에 할당된 핸들러가 동작한 후, 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. 아래에서 위로 올라가는 게 거품이 퍼져나가는 것 같다고 해서 버블링이라고 한다는 썰이 있다. 버블링은 event.stopPropagation() 을 이용해서 중지할 수 있다. 캡쳐링 버블링의 반대 방식이라고 생각하면 편하다. 자주 쓰이지는 않는다고 한다. 캡쳐링은 이벤트가 발생하면 해당하는 요소에 할당된 핸들러가 동작한 후, 자식 요소의 핸들러가 동작한다. 최하단의 요소를 만날 때까..
클릭, 마우스 휠, 마우스를 올렸다 내려 놓기, 키 입력 등의 행동들이 이벤트다. 이런 이벤트가 일어났을 때 핸들러 함수를 추가할 수 있는 메서드가 addEventListener. 이번에는 이에 대한 기록을 하려고 한다. NoDieMeCarry removeEventListener에 대한 의문이 있었는데 이번에 풀 수 있어서 좋았다. 함수 안에서 작동하는 인수기 때문에 removeEventListener에 연결할 수 없던 것!
비동기 처리를 하기 위해 콜백함수를 도입했으나, 반복되다보면 콜백지옥에 빠지는 것을 봤다. 그래서 나온 게 Promise 키워드! 라지만... 사실 콜백지옥이랑 별 다를 게 없어보인다. 사실 프로그래밍 햇병아리 수준이라 그렇게 보이는 것일지도 모르겠다. 머리 아파 죽겠어요~ promise 상태 new Promise: 대기 resolve: 정상적인 동작이 되었을 때 reject: 에러가 발생했을 때 Async와 await 이 친구는 비교적 최근에 등장한 문법. 그래서 그런가 promise보다 훨씬 쉬운 것 같다. async는 함수 앞에 붙이는 것으로, 해당 함수는 항상 promise를 반환. (promise가 아닌 것은 promise로 감싸 반환) await는 async가 있어야만 등장할 수 있다. 가장 ..
동기(Synchronous) 비동기(Asynchronous) 첫 번째 해결 방법, 콜백이다. 여기까진 잘 이해가 됐지만... 이 다음이 문제다. 쭉 따라가다 보면 알 수 있지만, 콜백을 반복하다보면 함수 안에 함수가 들어가는 꼴이 반복되면서 콜백지옥 (Callback hell)이 만들어지는 것을 볼 수 있다. 물론 저 정도로 지옥은 아니겠지만 더 길어지면 정말 지옥이 될지도 모른다. 그래서 나온 방법이 Promise. 다음 포스팅에서 볼 수 있을 것이다. 물론 올리기 전에 내가 먼저 이해를 해야겠지만... // 동기(Synchronous), 비동기(Asynchronous) // 동기: 순차적으로 코드 실행O // 비동기: 순차적으로 코드 실행X console.log(1); // 1 console.log(..
