바닐라 자바스크립트를 사용해 프로젝트를 생성하기 앞서 npm을 사용하여 babel, webpack, jest를 직접 인스톨 하여 사용해 보고자 한다 Webpack 의존 관계에 있는 js,css,img 등의 리소스들을 하나(또는 여러 개)의 파일로 번들링하는 모듈 번들러 웹팩을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더가 필요 없음 여러 개의 js파일을 하나로 번들링함으로써 HTML 파일에서 script 태그로 여러 개의 js파일을 로드해야 하는 번거로움도 사라질 수 있다. Babel 최신 사양의 소스 코드를 ES5 사양의 소스 코드로 변환(transpiling) 바벨은 ES6 이상의 js 소스코드를 트랜스파일링하여 그보다 낮은 사영의 소스 코드만 해석 가능한 브라우저에서도 돌아가게..

실행 컨텍스트(Execution Context) 자바스크립트의 실행 컨텍스트(Execution Context)는 코드가 실행되기 위한 환경이라고 볼 수 있다. 코드가 실행될 때, 자바스크립트 엔진은 실행 컨텍스트를 생성하고 이를 실행 컨텍스트 스택(Execution Context Stack)에 쌓아 나가면서 코드를 실행해 나간다. 실행 컨텍스트는 크게 세가지로 나뉜다 글로벌 실행 컨텍스트(Global Execution Context) 함수 실행 컨텍스트(Function Execution Context) eval 실행 컨텍스트(Eval Execution Context) 글로벌 실행 컨텍스트 자바스크립트 코드가 처음 실행될 때 만들어지는 기본적인 실행 컨텍스트 전역 객체와 전역 변수를 관리함 함수 실행 컨텍..

this란? this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable) this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 JavaScript엔진에 의해 암묵적으로 생성된다. this는 코드 어디서든 참조할 수 있다. 하지만 this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로 일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다. 함수를 호출하면 인자와 this가 암묵적으로 함수 내부에 전달 주저리 주저리 써놨지만 간단하게 말하자면 JS의 함수는 호출될 때 매개변수로 전달되는 인자값 이외에, arguments 객체와 this를 암묵적으로..

Promise? Promise는 비동기 작업의 완료 후 결과값을 나중에 처리할 수 있도록 해주는 객체다. Promise는 처음에는 'pending(대기)' 상태이고, 작업이 완료되면 'fulfilled(이행)' 됐는지 'rejected(거부)' 됐는지의 상태를 가진다. Callback? Callback 함수는 다른 함수에 인자로 넘겨주어, 그 함수가 실행을 끝낸 후 실행되는 함수를 말한다. 비동기 처리에 많이 사용되며, 특정 코드의 실행이 끝난 후 필요한 다음 작업을 지정할 때 유용하다. WHY? 자바스크립트에서 비동기 처리를 왜 해야할까? 비동기 처리는 웹사이트 개발 시 백엔드 서버와의 통신 속도를 빠르게 해주는 효과가 있다. 또한 동기식 코드로는 구현하기 어려운 복잡한 작업들을 쉽게 해결할 수 있다는..

자바스크립트 비동기 방식 자바스크립트는 싱글 스레드 프로그래밍 언어기 때문에 멀티작업을 하기 위해서는 비동기 처리 방식이 자주 쓰인다. 비동기는 백그라운드로 동작하기 때문에 그 결과가 언제 반환될지 알 수 없기때문에, 완료결과를 받기위해 쓰이는 콜백 함수(callback) 와 이를 보완하기 위해 나온 프로미스(Promise)가 있다. async / await async/await는 ES2017에 도입된 문법으로서, Promise 로직을 더 쉽고 간결하게 사용할 수 있게 해준다. 유의해야 할 점이 async/await가 Promise를 대체하기 위한 기능이 아니라는 것이다. 내부적으로는 여전히 Promise를 사용해서 비동기를 처리하고, 단지 코드 작성 부분을 프로그래머가 유지보수하게 편하게 보이는 문법만..

1. var ES6 이전에 나온 변수 선언방법 var변수가 함수 외부에서 선언될 떄의 범위는 전역 함수 블록 외부에서 var를 사용하여 선언된 모든 변수를 전역으로 사용할 수 있음 특징으로는 var 변수는 재선언,재할당 가능하다. 문제점 var hello = "hi"; var count = 4; if (count > 3) { var hello = "say Hello"; } console.log(hello) // "say Hello" count > 3 가 true 를 반환하기 때문에 hello는 "say hello" 로 재정의 된다. 이미 정의되어 있다면 상관 없지만 인식하지 못했다면 문제가 된다. 2. let var와 마찬가지로 let으로 선언된 변수는 해당 범위 내에서 업데이트될 수 있다. var와 달..