prettier! 자바스크립트 공부를 시작하면서 계속 사용해오던 코드 포맷터다. 크게 신경쓰지 않아도 자동으로 코드 스타일을 정리해줘서 정말 편리하다. 지난 미니 팀프로젝트에서 팀원분의 제안으로 prettier를 다함께 설정해 시작했지만, 개인마다 다른 환경과 확장 프로그램 영향인지 배열만 다른 코드가 변경사항으로 push/pull 되는 경우가 종종 있었다. 제대로 적용된다면 너무 편할 것 같아서 다음 팀프로젝트에는 적용해보고싶었는데, 개인 프로젝트를 시작하는 김에 협업용으로 설정하는 방법을 알아보았다. 패키지 설치npm install --save-dev --save-exact prettier 터미널을 통해 prettier 패키지를 설치한다. .prettierrc.js 생성echo module.exp..
generator에대해 공부하다가 generator 객체는 어떤 식으로 출력이 되는지 궁금했다.그래서 콘솔에 로그를 찍어보았는데 로그가 찍히는 순서가 예상과 달라 고민에 빠졌다.. const addCoffee = function(prevName, name) { setTimeout(function() { coffeeMaker.next(prevName ? prevName + ", " + name : name); }, 100);};const coffeeGenerator = function* () { const espresso = yield addCoffee("", "에스프레소"); console.log(espresso); const americano = yield..
동기와 비동기동기적 (synchronous)하나의 일이 끝날 때까지 다음 일이 기다리고 있음비동기적 (asynchronous)실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식ex. setTimeout, addEventListener 등별도의 요청, 실행대기, 보류 등과 관련된 코드 콜백지옥 예시와 해결방안예시setTimeout( function (name) { var coffeeList = name; console.log(coffeeList); setTimeout( function (name) { coffeeList += ", " + name; console.log(coffeeList); setTimeout( ..
호출 시점에 대한 제어권// setInterval: 반복해서 매개변수로 받은 콜백함수의 로직을 수행let count = 0;let cdFunc = function() { console.log(count); if(++count > 4) clearInterval(timer) };// setInterval의 콜백함수로 전달let timer = setInterval(cbFunc, 300);// 직접 호출cbFunc();마지막처럼 cbFunc()를 직접 호출하는 경우 함수의 호출 시점은 프로그래머가 제어할 수 있다. 하지만 setInterval의 콜백함수로 전달하는 경우, 300ms 간격으로 setInterval이 호출 시점을 제어하게 된다. 인자에 대한 제어권let newArr = [10, 2..
this가 가리키는 것JS의 this는 런타임 상황에서 고려해야한다. 따라서 두가지 상황을 고려할 수 있다. node, 브라우저! 1) 브라우저: window 객체2) 노드: global 객체 메서드 내부에서의 this메서드와 함수함수는 그 자체로서 독립적인 기능을 수행하지만, 메서드는 자신을 호출한 대상 객체에 대한 동작을 수행한다.1) 함수의 this: 전역 객체2) 메서드의 this: 호출의 주체 this의 할당function exFunc() { console.log("this: ", this);}exFunc(); // this: Object [global]const obj = { method: exFunc,}obj.method(); // this: { method: [Func..
실행 컨텍스트실행할 코드에 제공할 환경정보들을 모아둔 객체JS는 특정 실행 컨텍스트가 활성화되기 전 다음을 수행한다.선언된 변수 호이스팅외부 화경 정보를 구성this값 설정 콜스택 (Call stack)동일한 환경에 있는 코드를 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 이를 콜스택에 쌓아올린다.가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법으로 코드의 환경 및 순서를 보장하는 것. 실행 컨텍스트의 구성 정보VariableEnvironment (VE)1) 현재 컨텍스트 내의 식별자 정보(record)를 갖고 있다.ex. var a = 3 에서 var a 2) 외부 환경 정보 (outer)를 갖고있다. 3) 선언 시점 LexicalEnvironment의 snapshot-> 즉, 변..