velog.io/@kyusung/eslint-prettier-config ESLint 와 Prettier 적용 이 문서에서 사용하는 Prettier 버전은 1.19.1 입니다. (2020.03.02)Prettier는 코드를 읽어들여서 사용자 옵션에 따라 코드를 다시 포맷팅하는 코드 포맷터 입니다.코드 스타일에 초점을 맞추고 있기 때 velog.io 참고

for...in : 객체 순환 for...of : 배열 순환 단, 배열도 객체에 속하므로 for...in 적용이 가능. 이 경우에는 배열의 value가 아닌 index가 찍힘

자바스크립트의 이벤트는 DOM요소를 선택하고, 해당 element에 이벤트리스너를 부착하는 것으로 실행된다. 예컨데 예시코드의 경우는 button이라는 element에 addItem이라는 이벤트가 붙어있는 형태이다. 이 경우에 클릭을 누르게 되면 이벤트가 발생할 것이다. 만약 nested 형식으로 구성된 element 구조의 모든 div마다 이벤트를 달아놓는다면, 이벤트 전파가 발생한다 위와같이 div가 three depth로 구성된 화면의 div태그에 이벤트를 달아놓는다면 class가 three인 div를 클릭하더라도, 부모들의 이벤트도 모두 발생할것이다. 비슷한 예시코드로 전파의 종류를 설명해보겠다. 이벤트 전파는 크게 두 가지로 나뉜다 Bubbling은 자식 element에서 일어난 이벤트가 부모들..

트렌디한 문법을 사용하는 것이 좋아보이니까, 그리고 보편적으로 권장되는 일이니까 나도 async-await를 거의 남발하듯 쓴다. 근데 그리 하다 보니 자꾸 Promise를 간과하는 것 같아서 한번 정리 해보는 목적의 글! 우리가 쓰는 모든 async라는 꼭지가 달린 async함수는 promise를 리턴한다 그리고 모든 await 함수는 promise가 된다 promise는 객체안에 객체를 가지고 있는 일종의 중첩객체인데 promise라는 객체는 모든 함수에 대해 만들 수 있다. 얘들은 일반적으로 then()을 통해 받을 수 있고, 에러는 catch()를 통해 처리된다. 예컨데 getUsers는 콜백함수가 묶여있고, getUsers()는 promise를 리턴하는 함수라고 하자 즉, getUsers()가 ..

듣고 싶은 강의가 있는데 클로져, this, 프로토타입 요 세가지는 정리를 하고 듣고 싶어서... 여기까지 정리한다 ㅠㅠ 1) 프로토타입 기본적인 구조는 이렇다. new 키워드를 이용하여 생성자 함수를 통해 인스턴스를 생성하는 경우, 생성자 함수는 protoType라는 메소드를 가지고 있고, 인스턴스에 생성된 __ proto__가 이를 참조하게 된다. 즉 자바스크립트의 함수인 객체는 (거의 항상) protoType을 가지고 있고 (거의 모든) 객체는 항상 __proto__라는 프로퍼티가 존재한다. 위의 그림을 예시로 들어보자. test()라는 함수객체를 생성하고, 이는 object객체를 참조한다(모든 객체 생성이 다 그렇다!) test는 protoType이라는 메소드를 가지고 있게 되고, 아래 새로 생성..

콘텍스트 객체는 this가 바라보고 있는 어떤 객체이다. 예컨데 const a = {name: gihong} 이고 this.name으로 기홍을 소환할 때 a가 바로 콘텍스트 객체가 되는 것이다. 여기에는 네가지 동작 방식이 존재한다 1) 기본 바인딩 기본적으로 this는 global객체인 window에 바인딩된다. 그러니까 아무생각없이, 아무 조건없이 this를 적용하면 이는 window에 바인딩된다는 뜻 (참고로 NodeJS에서는 전역객체가 window를 가리키지 않는다. 2) 암시적 바인딩 어떤 객체를 통해 함수가 호출되면, 그 객체가 this의 콘텍스트 객체가 된다. 위의 그림으로 예를 들어보자. 이 경우 global하겐 a를 3으로, obj 객체 안에서는 a를 5로 선언했다. 이 시점에서 func..