require vs import (CommonJs와 ES6) 기본적으로 require와 import는 모듈 키워드입니다. 외부 파일이나 라이브러리를 불러올 때 사용합니다. require는 NodeJS에서 사용되고 있는 CommonJS 키워드이고, import는 ES2015에서 새롭게 도입된 키워드입니다. 둘다 다른 파일의 코드를 불러온다는 같은 목적을 가지고 있지만, 다른 문법 구조 지니고 있습니다. const library = require("library") import library from "library" 최근 ES6(ES2015) 모듈 시스템인 import가 많이 사용되고 있지만, 아직까지는 import 키워드가 100% 대체되어 사용될 수 없습니다. 태그를 사용하는 브라우저 환경과, Node..
프론트엔드/Javascript
개요 실행컨텍스트는 코드가 실행되는 환경을 말합니다. 크게 전역 컨텍스트와 함수 컨텍스트가 있는데, 우선 코드가 실행되면 (브라우저가 스크립트를 로딩해서 실행할 때) 모든 것을 포함하고 관리하는 전역 컨텍스트가 생깁니다. 페이지가 종료 될때까지 유지됩니다. 다음 함수 컨텍스트는 함수 호출시마다 생성됩니다. 이 실행컨텍스트들은 생성될때마다 변수객체, 스코프체인, this가 생성됩니다. 컨텍스트 생성 후 함수가 실행되는데 사용되는 변수들은 변수 객체 안에서 값을 찾고 없으면 스코프 체인을 따라 올라가며 찾습니다. 함수 실행이 마무리되면 해당 컨텍스트는 사라집니다. (클로저 제외) 페이지가 종료되면 전역 컨텍스트가 사라집니다. 먼저 전역 컨텍스트 하나 생성 후, 함수 호출 시마다 컨텍스트가 생깁니다. 컨텍스트..
들어가며 이벤트 등록 방법 이벤트 전달 방식 (이벤트 버블링, 이벤트 캡쳐링, 이벤트 위임) event.stopPropagation() 이벤트 등록 이벤트 등록이란 웹 어플리케이션에서 사용자의 입력을 받기 위해 필요한 기능입니다. 1) 간단한 버튼을 만듭니다. add one item 2) 버튼 클릭 시 addItem 함수를 실행되고, 이 때 event 인자가 넘어옵니다. let button = document.querySelector('button'); button.addEventListener('click', addItem); function addItem(event) { console.log(event); } 이처럼 addEventListener 같은 웹 API는 이벤트 등록을 가능하게 해줍니다. 이..
들어가기전 이벤트루프에 대해 글을 처음쓴건 20년도인데, 21년도에 이 글을 보니 다시 정리할 필요가 있다는 생각이들었습니다. MDN 공식문서를 보면서 새롭게 보였던 부분이 있었습니다. 이벤트루프와 자바스크립트의 동시성 모델을 연관지어 설명한 부분입니다. 처음 이 개념을 공부할때는 이벤트루프만 이해하기 바빴는데 동시성 모델과 같이 이해하니, 이벤트루프가 자바스크립트의 언어적 특성과 깊은 연관이 있다는 점을 발견했습니다. 동시성을 지원하는 이벤트루프 자바스크립트의 동시성 모델과 이벤트루프의 연관성은 근본적으로 자바스크립트의 싱글스레드인 언어적 특성에서 비롯됩니다. 이는 한명의 일꾼으로 한번에 하나의 작업을 처리할 수 있다는걸 의미합니다. 하지만 프로그램이 복잡해지고 커지다보면 한명의 일꾼으로는 턱없이 부족..
