Javascript
코어 자바스크립트 - 콜백 함수
이 챕터를 읽고 다음의 질문에 답할 수 있어야 한다. 콜백 함수란 무엇인가? 콜백 함수의 제어권은? 콜백 함수로 전달된 메서드 내부의 this가 참조하는 객체는? callback 함수 내부에 this를 바인딩하는 방법은 어떤 것들이 있는가? 콜백 지옥이란 무엇인가? 비동기적 코드란 무엇인가? 콜백 지옥을 해결하기 위한 방법들에는 어떤 것들이 있는가? Promise란? Generator란? async/await란? 콜백 함수란 다른 코드의 인자로서 넘겨주는 함수 콜백 함수의 제어권 콜백 함수의 제어권은 콜백 함수를 전달받아 사용하는 코드에서 갖는다. setInterval(cb, 300); 여기서, 콜백 함수 cb의 제어권은 setInterval이 갖는다. 콜백 함수의 this 콜백 함수는 말 그대로 함수로..
코어 자바스크립트 - this
이 챕터를 읽고 난 후 다음의 질문에 답할 수 있어야 한다. this란 무엇인가? this가 참조하는 대상은 어떻게 결정되는가? 컨텍스트에 따라 this가 참조하는 객체는 어떻게 달라지는가? this를 바인딩하려면 어떤 메서드를 써야 하는가? call/apply 메서드를 어떻게 활용할 수 있는가? 화살표 함수에서 this는 무엇을 참조하는가? this 입문자의 입장에서 this를 활용하게 되는 경우는 많지 않았다. 낯설기 때문에 this에 대한 개념을 공부할 때면 항상 느껴지는 불편함이 있다. 하지만 여기저기서 this가 자주 언급되는 것으로 봐서 확실히 짚고 넘어갈 필요가 있어 보인다. 이 책에서도 this에 대해 상세히 다루고 있다. this는 특정 객체를 가리키는 일종의 속성이라고 할 수 있다. 그..
코어 자바스크립트 - 실행 컨텍스트
복습의 목적으로 정재남님의 저서 '코어 자바스크립트'를 읽고 정리한 글입니다. 더 자세하고 정확한 내용은 책을 참고하시길 바랍니다. 이 챕터를 읽고 난 후 다음의 질문에 답할 수 있어야 한다. 자바스크립트 환경에서 실행 컨텍스트란 무엇인가? 활성화된 실행 컨텍스트에 어떤 정보가 수집되는가? VriableEnvironment와 LexicalEnviroment는 무엇이고 어떤 차이가 있는가? environmentRecord는 무엇이고 호이스팅과 어떤 관련이 있는가? 함수선언문과 함수표현식의 차이는 무엇인가? 스코프와 스코프 체인이란 무엇인가? 변수 은닉화란 무엇인가? 실행 컨텍스트란 실행 컨텍스트란 실행할 코드에 제공되는 환경 정보를 모아놓은 객체이다. 동일한 환경에 있는 코드를 실행할 때 필요한 환경 정보..
코어 자바스크립트 - 데이터 타입
복습의 목적으로 정재남님의 저서 '코어 자바스크립트'를 읽고 정리한 글입니다. 더 자세하고 정확한 내용은 책을 참고하시길 바랍니다. 질문 이 챕터를 읽고 난 후, 다음 질문에 답할 수 있어야 한다. 자바스크립트의 자료형은 어떻게 분류할 수 있는가? 숫자 또는 문자열의 데이터를 위해 몇 바이트의 메모리가 확보되는가? 변수는 무엇이고 식별자란 무엇인가? (데이터 타입에 따라) 데이터는 어떻게 메모리에 할당되는가? 변수와 상수을 구분짓는 특징은 무엇인가? 불변성이란 무엇인가? 메모리에 남아있는 미사용 데이터는 어떻게 처리되는가? 기본형 데이터를 갖는 변수 복사, 참조형 데이터를 갖는 변수 복사에는 어떤 차이가 있는가? 얕은 복사와 깊은 복사의 차이는 무엇인가? 불변 객체를 어떻게 만들 수 있는가? undefi..
Guard Clauses로 예외처리를 해보자
코드숨 과정을 통해 Guard Clauses에 대해 알게 되었다. 이는 조건문에 관한 것이다. if-else 로직을 리팩토링하여 좀 더 읽기 쉽고 깔끔한 코드를 작성하는데 그 의의가 있다. function checkMaster(user) { if (user.role === 'admin') { if (user.master === true) { return true; } else { return false; } } else { return false; } } if-else 로직으로 작성하는 것은 편리하다. 하지만 가독성이 좋지 않다는 단점이 있다. 중첩이 깊어질 수록 내용을 명확하게 파악하기 힘들고 이는 유지보수에 도움이 되지 않는다. Guard Clauses에 의한 작성법은 과감하게 if-else 로직을 ..
이벤트 핸들러를 어떻게 할당해줘야 할까?
학습했던 내용을 정리하기 위해 작성된 글이며 다소 부정확한 내용이 포함될 수 있음을 양해바랍니다. 이미 게시된 글이라도 복습하는 과정에서 내용이 보완 또는 수정될 수 있습니다. 이벤트 핸들러를 붙여주는 방식엔 크게 3가지가 있다. //index.html //첫 번째 //index.js //두 번째 button.onclick = function() {...} //세 번째 button.addEventListener('Click', handleClick1); button.addEventListener('Click', handleClick2); button.addEventListener('Click', handleClick3); 속성으로 onClick을 넣어주는 것과 이벤트리스너 메서드를 붙여주는 것은 단지 방..
스프레드 연산자의 장점_1
스프레드 연산자가 개꿀인 부분을 정리하고자 함 자바스크립트 배열에는 push 메서드가 존재한다. 어떤 항목을 배열에 추가하고 싶을 때 사용한다. const a = ['a', 'b', 'c']; a.push('d'); //a = ['a', 'b', 'c', 'd']; 아주 쉽고 편리하지만 push()를 사용하는 순간 원본 배열이 바로 조작된다는 사실에 주의해야 한다. 예를 들어, const a = ['a', 'b', 'c']; function addItem(array) { if (array.length > 3) { return { error: '이미 가득 차버렸습니다.', }; } const newArray = array.push('e'); //a = ['a', 'b', 'c', 'e'] return ne..
const 를 써야 하는 이유
변수를 선언하는 방식은 그 변수의 성격을 정의한다. 재할당할 수 없는 변수를 선언하고 싶다면 const를 사용한다.다시 할당할 수 없다는 점이 뭔가 유연하지 못하고 불편하게 느껴질 수도 있다. 코딩을 배우는 과정에서 왜 let아닌 const로의 변수 선언을 강조하는지 처음에는 이해가 잘 되지 않았다. 정확히는 그 필요성을 잘 느끼지 못했다고 해야겠다. 생활코딩의 이고잉님은 강의 중에 극단의 상황을 가정하는 것을 좋아한다. 나도 좋은 아키텍쳐를 만들기 위해서는 그런 가정이 필수적이라고 생각한다. 변수의 선언도 마찬가지이다. 만약 수백 줄로 작성된 코드를 유지보수해야 한다면 const에 의한 변수 선언 방식은 코드의 신뢰도를 높여준다. const a = 100; const result = a * 10; //..