시계 만들기 html 파일 수정 이제 모멘텀 extension을 만들기위해 알아야할 문법은 다 배웠으니 실전에 들어가보도록 하자. 우선 html 파일에서 시계가 오는 위치를 정하자. <body> <div class="js-clock"> <!-- 시계가 들어갈 클래스를 생성하였다. --> <h...
prototype-중급자로 가기 위한 여정
5. proto vs prototype 우선 설명하기에 앞서 생성자 함수를 2개 만들자 function Person(name, first, second) { this.name = name; this.first = first; this.second = second; } function PersonPlus(name, first, secon...
런타임 환경
1. runtime 환경에 대해서 자 그럼 자바스크립트가 실제로 브라우저에서 어떻게 동작하는지 알아보자. 동작하는 환경을 일단은 runtime environment라고 한다(이하 runtime). 그리고 그곳에서 자바스크립트 엔진과 브라우저는 서로 소통을하면서 협동한다. 이때 협동할 수 있게 소통을 돕는 아이가 바로 event loop이다. even...
프로세스와 쓰레드
1. 프로세스와 쓰레드 이번엔 자바스크립트가 브라우저라는 공간에서 작동할때 어떤 일이 실제로 ‘뒤’ 에서 발생하는지 알아보고자 한다. 따라서 자바스크립트라는 언어의 동작원리를 좀더 구체적으로 이해함으로써 효율적인 코드작성이 가능할것이다. 그전에 프로세스와 쓰레드 부터 알아보자. 그림으로 나타내면 이렇게 나타낼 수 있다. 운영체제(윈도우) 안에서...
이벤트 위임
1. bubbling bubbling은 이름 그대로 방울이 겹쳐서 연속적으로 무엇인가가 올라가는 그림을 그리면 된다. 부모태그와 자식태그에 설정된 이벤트가 같다고 했을때 자식태그에 있는 이벤트가 실행되면 상위에 있는 부모태그 모두가 다같이 실행되는 현상이 bubbling이다. 설정된 이벤트가 방울처럼 부모쪽으로 퍼져나간다고 생각하면 더 이해하기 쉬울...
재밌는 디버깅방법
1. 개발자 도구를 통해 디버깅 하는 법 진짜 신기한 기능을 알았다. 클릭 할때 마다 모든 과정이 순차적으로 실행되고 과정마다 어떤 일이 일어나는지 상세히 설명해주는 기능이다. 우선 개발자 도구에서 sources 에 들어간다. 그리고 왼쪽에 자바스크립트를 클릭한다음 오른쪽 상단에 pause를 클릭한다. 그리고 watch를 통해서 내가 특정 영역의 변...
간단한 과제(toggle로 커서유지)
커서 유지하기. 우선 글자를 클릭할때마다 색깔이 바뀌게 했다. css 파일안에 몇가지 변화를 추가했다. 첫번째로, pointer클래스를 추가하고 그안에 커서를 올릴때 커서모양으로 바뀌는 효과를 추가했다. 또한 컬러가 바뀔때 서서히 바뀌게 하는 효과도 추가하고 , clicked 라는 클래스를 만들고 (일종의 변수를 지정) 그 안에 새로운 컬러를 추가하...
DOM 을 정복해보자
DOM DOM은 Document Object Model 의 약자로 객체를 이용해 html 이나 xml 을 수정, 보완, 생성, 삭제 등 modify 할 수 있는 기능을 말한다. //자바스크립트 document 객체로 html 상의 정보를 변경할 수 있다. console.log(document); // html 안에 있는 모든 라인을 뽑아냄. con...
getter와 setter와 call함수
3-3. 클래스의 getter(획득자) 와 setter(설정자) 또한 획득자와 설정자라는 method 가 있다. 함수처럼 생긴 mothod 이지만 함수가 아니다. 가상의 함수이다. constructor에서 설정한 property(_carname)를 가져와서 set 할때 쓰이는 method들이다. 그리고 get 의 이름은 property랑 달라야한다....
콜백지옥에서 구원받기2(async/await)
9. async/await 배우기 promise 를 통해 구현하게 되면 then을 통해서 계속해서 앞의 return값을 받아와야하기 때문에 명령이 길어지게 된다. async를 이용하면 함수안에 깔끔하게 담아서 정리가능하다. 우선 과일을 따는 함수를 만들어 보겠다. // resolve 를 선언하기만 함. function delay(ms) { re...