Bleeding edge

좋은 코드를 작성하는 방법 다독 가독성 좋은 코드를 작성하려면, 좋은 코드를 많이 봐야한다. 안좋은 코드를 본다 할지라도 반면교사를 할 수 있기 때문에, 나쁜 코드를 보는것도 좋다. 변수명 잘 짓기 함수는 명령형, 동사를 이용하여 짓는다 변수 boolean는, isXX와 같이 짓는다. 일반 적인 변수는 명사로 짓는다 만일, 함수이름을 짓기 어렵다면, 함수에 기능이 많거나 함수를 잘못생각한 것이다. 속도보다는 가독성 빈칸을 아끼는 것은 이미, 나중에 업로드 전에 줄여지는 과정을 하기에 빈칸을 아끼는 것이 좋다. 변수명이 길다고할지라도, 이도 글자수를 줄이는 과정을 나중에 가지니일단은 가독성을 줄일 수 있다 속도를 챙기는 것은 체감이 덜되니, 득보다 실이 많다는 것을 기억하자. 오늘 코드를 짤때 얻었던 팁 ..

47장 에러처리 47.1 에러 처리의 필요성 에러가 생기지 않을 수 없기 떄문에, try…catch 문을 사용해 발생한 에러에 적정하게 대응하면 프로그램이 강제 종료되지 않고 코드를 계속 실행시킬 수 있다. 예외적인 상황에 적절하게 대응하지 않으면 에러로 이어질 가능성이 크다. 단축평가 혹은 옵셔닝 체이닝 연산자를 사용하지 않으면 에러로 이어질 가능성이 크다. 47.2 try…catch…finally 문 catch문이 없는 try 문은 의미가 없기 떄문에 생략하지 않는다. try catch finlly문으로 에러를 처리하면 프로그램이 강제로 종료되지 않는다. 47.3 Error 객체 Error 객체는 mesage프로퍼티와 stack 프로퍼티를 갖는다 message는 Error 생성자 함수에 인수로전달하는..

45장 프로미스 전통적인 콜백은 가독성이 나쁘고, 비동기 처리 중 발생한 에러의 처치가 곤란하며, 여러개의 비동기 처리를 한번에 처리하는데도 한계가 있다. ⇒ 이를 개선하기위해 비동기 처리를 위한 프로미스를 도입했다. 45.1 비동기 처리를 위한 콜백 패턴의 단점 setTimeout 함수가 비동기함수인 이유는 콜백 함수의 호출이 비동기로 동작하기 때문이다. setTimeout 함수를 호출하면 콜백 함수를 호출 스케줄링 한다음 타이머 id를 반환하고 즉시 종류한다. setTimeout 함수의 콜백 함수에서 상위 스코프의 변수에 값을 할당해보자. setTimeout 함수는 생성된 타이머를 식별할 수 있는 고유한 타이머 id를 반환하므로 콜백 함수에서 값을 반환하는 것은 무의미하다. [ ] 비동기 함수인 이유..

41장 타이머 41.1 호출 스케줄링 호출 스케줄링은 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하는 것을 말한다. 타이머를 생성할 수 있는 타이머 함수는 setTimeout, setInterval 두개가 있다. 타이머를 제거하는 함수는 clearTimeout과 clearInterval이 있다. 단발성 : setTimeout 다회성 : setInterval 자바스크립트엔진은 하나의 실행 컨텍스트 스택을 가지기 때문에 두 가지 이상의 태스크를 동시에 실행할 수 없다. 따라서 이러한 이유로 타이머 함수는 비동기 처리 방식으로 동작한다 41.2 타이머 함수 setTimeout((name, ...args )=> console.log(name, args), 1000, name,..

39.4 노드 정보 취득 Node.prototype.nodeType = 노드 객체의 종류 Node.prototype.nodeName = 노드의 이름을 문자열로 반환한다 hello document.nodeType = 9// 문서 노드타입은 9 텍스트 노드는 3 요소 노드는 1이다 document.nodeName = #document//텍스트 노드 #text, 요소노드는 태그이름에 #을붙인다 39.5 요소 노드 텍스트 조작 39.5.1 nodeValue node1.nodeValue = "a"//텍스트 노드에 있는 값을 변경한다 39.5.2 textContent document.getElementbyId('foo')//프로퍼티에 의한 텍스트 취득 null은 생략한다 vs innerText ⇒ innerText..

38장 브라우저의 렌더링 과정 브라우저가 HTML CSS 자바스크립트로 작성된 텍스트 문서를 파싱하여 브라우저에 렌더링한다. 파싱 : 프로그램밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고, 토큰에 문법적 의미와 구조를 반영하여 트리구조의 자료구조인 파스트리를 생성하는 일련의 과정을 말한다. HTML CSS 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력한다. 브라우저 렌더링 수행과정 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다 렌더링 엔진은 서버로부터 받은 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이를 결합하여 렌더 트리를 생..

34장 이터러블 34.1 이터레이션 프로토콜 34.1.1 이터러블 이터러블 프로토콜을 준수한 객체이다 Symbol.iterator를 프로퍼티 키로 사용한 메서드로 직접 구현하거나 프로토타입으로 상속받은 객체를 말한다 const isIterableList = [[], '', new Map(), new Set(), {}] isIterble(n) //true, true, true, true, false 배열은 Symbol.iterator 메서드를 상속받은 이터러블이다. 이터러블은 for of문으로 순회할 수 있다. console.log(Symbol.iterator in obj) //fakse 일반 객체는 Symbol.iterator 메서드를 구현하거나 상속받지 않는다 for(const item of obj){..

30장 Date 30.1 Date 생성자 함수 new Date() ; //Mon Jul .... typeof new Date() object Date(); //Mon Jul ..... typeof Date() String 30.2 Date 메서드 Date.parse('Jan 2, 1970 00:00:00 UTC') Date.parse('19970/01/02/09:00:00') Date.prase를 이용하여 주어진 인수를 밀리초로 변환한다. 30.3 Date를 활용한 시계 예제 31장 RegExp 31.1~3 정규 표현식 regExp.exec(target) //정규 표현식의 패턴을 검색하여 매칭 결과를 배열로 반환한다. /is/ regExp.test(target) //매칭 결과를 불리언으로 반환한다 /is..

26장 ES6 함수의 추가 기능 26.1 함수의 구분 ES6 이전의 메서드라고 부르던 객체에 바인딩된 함수도 callable이며 constructor이다.(내부 메서드 Call Construct를 둘다 가지고 있다) 불필요한 객체를 생성하기 때문에, 성능 문제가 있따. 26.2 메서드 ES6 사양에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다 ES6 사양에서 정의한 메서드는 인스턴스를 생성할 수 없는 non-constructor이기에 생성자 함수로 생성이 불가능하다 prototype 프로퍼티가 없고 프로토타입도 생성하지 않는다. ES6 메서드는 자신이 바인딩한 객체를 가리키는 내부 슬롯 [[HomeObject]]를 갖는다. super는 내부 슬롯 [[HomeObject]]를 사용하여 수퍼클래..