Sh개발일기

Promise “A promise is an object that may produce a single value some time in the future” "instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future" 프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 프로미스를 이용하면 비동기적 처리의 결과값이나(성공시) 에러값(실패시)을 핸들러(콜백 함수)와 연결하여 처리할 수 있도록 도와줍니다. 프로미스를 이해하기 전 꼭 비동기, 콜백 함수에 관한 이해를 먼저 해주세요. Promise 사용하기 let..

이벤트 버블링 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생한 경우 해당 이벤트가 상위 요소들로 전달되어가는 특성을 의미한다. 상위 요소란 HTML 트리 구조상 위에 있는 요소를 의미한다. 브라우저는 특정 화면 요소에서 이벤트가 발생하는 경우 그 이벤트를 최상위 요소까지 전파시키도록 동작한다. 이렇게 하위 요소에서 상위 요소로 이벤트가 전달되는 방식을 이벤트 버블링 이라고 한다. 이벤트 캡쳐 이벤트 캡쳐는 버블링과 반대 방향으로 진행되는 이벤트 전파 방식이다. 위 그림처럼 특정 이벤트가 발생한 경우 해당 태그를 찾아 내려간다. 이벤트 캡쳐는 addEventListener를 사용할 경우 API 옵션 객체에 capture: true 를 설정해주면 된다. event.stopPropagation() 해당 이..

본 포스팅은 "코어 자바스크립트, 정재남" 책을 읽고 요약한 내용입니다. this 자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 때 결정된다. 실행 컨텍스트는 함수를 호출하며 생성되므로 결국 this는 함수를 호출할 때 결정되는 것이다. 이 때 함수를 어떤식으로 호출하는지에 따라 this의 값이 달라지게 된다. this는 자바스크립트에서 가장 혼란스러운 개념중 하나이다. 상황에 따라 달라지는 this의 값을 정리해보며 좀 더 심화적으로 이해할 수 있도록 해보자. 1. 전역 공간에서의 this 전역 공간에서 this는 전역 객체를 가리킨다. 전역 컨텍스트를 생성하는 주체가 바로 전역 객체이기 때문이다. 전역 객체는 자바스크립트 런타임 환경에 따라 다른 이름과 정보를 가지고 있는데 브라우저에서..

학습 목표 객체 리터럴을 어떻게 사용하는지 이해하고, this키워드를 통해 객체 내부 메서드 접근방법을 이해합니다. 핵심 개념 객체 리터럴(Object literal) 패턴 this keyword 자바스크립트 객체의 활용 자바스크립트에서는 객체 리터럴이라는 표현식을 이용해 객체를 쉽게 만들 수 있다. 이와 같이 비슷한 기능을 묶어 객체리터럴로 코드를 만들어 사용할 수 있다. 자바나 C++과 같은 객체지향 프로그래밍을 경험해 봤다면, 이러한 개념을 받아들이는데 크게 문제는 없을것이다. this 객체 안에서의 this는 객체 자신을 가르킨다. 어떤 행위, 변수의 대상이 되는 객체 그 자신을 가르키는 키워드라고 생각하면 편하다. 자바스크립트에는 전역스크립트나 함수가 실행될 때 실행문맥이 생성된다. 모든 con..

학습 목표 배열의 메서드들을 활용해서 데이터 처리를 할 수 있습니다. 핵심 개념 forEach map filter immutable 자바스크립트는 배열을 쉽게 다루기 위해 여러가지 관련 메소드를 제공해준다. 익숙해 지게 여러번 사용해보는것이 중요하다. for문과 forEach 위와 같은 데이터가 있을때 for문과 forEach를 각각 사용하여 접근하는 코드는 다음과 같다. 두 코드는 같은 일을 수행하는 코드지만 forEach문은 i++나 length를 판단하는 코드가 따로 없다. 그만큼 실수를 줄일 수 있고, 코드는 더 보기 좋아진다. ES6의 arrow함수를 사용한다면 더 간단해질 수 있다. map, filter map메서드는 함수에서 정의한 방법대로 모든 원소를 가공해서 새로운 배열을 반환한다. fi..