728x90 Frontend/Javascript38 Javascript event loop 이벤트 루프는 브라우저에 정의되어 있습니다. 이는 whatwg의 명세를 보면 확인할 수 있습니다. html은 이전에는 단순 마크업 언어에 불과하였지만 현재는 마크업 언어 + web api 들을 지칭합니다. 이전 까지의 단순 마크업 언어에 불과했던 위상에서 벗어나야 한다 생각합니다. html 5로 들어서면서 그래픽 표현, 양방향 통신 등등 많은것들이 가능해졌습니다.(html5을 애플에서 사용하면서 플래시를 배제하였고 이로인해 어도비에서 많은 언론 플레이를 했던걸로 기억합니다.) html 에 관련한 글은 나중에 포스팅 할 수 있도록 하고 다시 본론으로 돌아오겠습니다. 이 글은 Event loop의 모든 것을 다루진 않습니다. 몇가지 주요한 관점만 살펴보고자 합니다. 위는 브라우저에서의 런타임을 나타낸 것입니.. 2022. 3. 31. Javascript 얕은 복사, 깊은 복사 HTML 삽입 미리보기할 수 없는 소스 얕은 복사(shallow copy) 변수가 가리키는 주소값이 같은 주소 값을 가리킬때 얕은 복사가 이루어진다고 한다. reference type을 복사할때 얕은 복사가 이루어진다. const a = { c: 'c' } const b = a b.c = 'd' console.log(a) // { c: 'd' } console.log(b) // { c: 'd' } console.log(Object.is(a,b)) // true spread를 통한 복사는 1 depth 까지만 깊은복사가 이루어진다. const a = { b: { c: 'c' }, e: 'e' } const b = {...a} console.log(a) // { b: { c: 'c' }, e: 'e' } c.. 2022. 3. 27. Javascript Polyfill Polyfill(폴리필)은 웹 개발에서 기능을 지원하지 않는 웹 브라우저 상의 기능을 구현하는 코드를 뜻합니다. 예를들면 자바스크립트의 최신 스펙에 나온 함수를 사용하여도 웹 브라우저에서는 돌아가지 않을 수 있습니다. 여러 자바스크립트 엔진에서는 자바스크립트의 최신 스펙중 우선순위에 따라 구현할 것이므로 아직 자바스크립트 엔진에 구현이 되어 있지 않을수도 있는 것이죠. 폴리필은 다시 정의하면 기존 함수의 동작 방식을 수정하거나, 새롭게 구현한 함수의 스크립트라 할수 있습니다. 현재는 바벨과 같은 트랜스 파일러를 이용합니다. 최신 스펙으로 작성된 스크립트 코드를 명시한 버전에 따라 재작성 해줍니다. 낮은 버전의 자바스크립트 엔진에서도 프로그램이 돌아갈 수 있게 해주어 서비스가 문제없이 제공될 수 있게 해줍.. 2022. 3. 26. Javascript strict mode javascript에는 strict mode가 있습니다. strict mode를 활성화 시키면 평소에는 무시되던 에러들을 발생시키기 시작합니다. 런타임에서 혹시 발생할 수 있는 에러들을 잡아내는데 도움을 줄 수 있습니다. 전체 스크립트에 strict mode를 활성화 시키기 위해서는 코드의 최상단에 "use strict"를 추가해주면 됩니다. "use strict" console.log('hihi'); 아래와 같이 사용하면 부분 함수에 적용할 수 있습니다. function test() { "use strict" console.log('hihi') } es6의 모듈은 default가 strict mode 입니다. script type="module"을 사용하면 strict mode가 default로 사용됩.. 2022. 3. 25. Javascript 화살표 함수 화살표 함수는 es6에서 등장하였습니다. 화살표 함수의 기본문법은 아래와 같습니다. () => {} const test = () => { console.log('hihi') } 화살표 함수는 함수 표현식으로 사용하여야 합니다. 익명함수로서만 사용할 수 있기 때문입니다. fuction test() { console.log('hihi') } const test = () => { console.log('hihi') } 화살표 함수는 this를 가지지 않습니다. 따라서 화살표 함수 내부에서의 this는 항상 상위 스코프의 this를 가리킵니다. bind, call, apply를 통하여 화살표 함수의 this를 변경할수가 없습니다. const people = { age: 0, older() { setTimeout.. 2022. 3. 25. Javascript event capturing, bubbling DOM 이벤트는 3개의 단계로 나뉘어집니다. 1. 이벤트 캡쳐링 - 이벤트가 하위 요소로 전파되는 단계 2. 타깃 - 이벤트가 실제 타깃 요소에 전달되는 단계 3. 이벤트 버블링 - 이벤트가 상위 요소로 전파되는 단계 위의 그림처럼 나타낼 수 있습니다. 이제 실제로 어떻게 출력되는지 보겠습니다. const divs = document.querySelectorAll('div'); divs.forEach(div => { div.addEventListener( "click", function () { console.log(this.classList); }, { capture: true } ); }) 위와 같은 코드로 클릭시에 자신의 classList를 출력하게 하였습니다. capture: true를 통해 캡처.. 2022. 3. 25. 이전 1 2 3 4 5 6 7 다음
