//tip 43 프라미스를 이용해 비동기적으로 데이터 가져오기 //프라미스를 이용해 지연된 데이터 응답을 처리하는 방법을 알아보자 //자바스크립트는 비동기 언어이다. 비동기 언어는 이전의 코드가 해결되지 않아도 이어지는 코드를 실행할 수 있는 코드이다. //코드가 중단되는 이유는 API, DOM이나 다른 곳에서 데이터를 가져올 수 있고 사용자 응답을 기다릴 수도 있다. //비동기 언어의 가치는 지연된 정보를 기다리는 동안 이 정보가 필요치 않은 다른 코드를 실행할 수 있다는 점에 있다. //지연된 정보를 기다리는 동안 코드는 멈추지 않는다는 것이다. //프로미스 등장 이전에는 콜백함수를 이요해 비동기 작업을 했다. //데이터 원본에 비용을 요청할 때 콜백함수를 인수로 넘기고 비동기 데이터를 가져온 후에 ..
JavaScript/You Don't know JS
//tip 42 bind()로 문맥 문제를 해결 //this를 다룰때 발생하는 문제를 bind()로 해결해 보자. //함수로 새로운 문맥을 생성하고 새로운 문맥에서 오류가 발생하는 경우를 이전에 알아봤다. //문맥변경은 혼란을 일으킬 수 있는데 this키워드를 콜백이나 배열 메서드에서 사용할 경우에는 더 문제가 될 수 있다. //클래스에서도 마찬가지이다. //우선 클래스로 만들어진 예제를 보자 class ValidatorProblem { constructor() { this.message = `가 유효하지 않습니다.`; } setInvalidMessage(field) { return `${field}${this.message}`; } setInvalidMessages(field) { return fiel..
//tip 40 get과 set으로 인터페이스를 단순하게 만들어라 //get과 set을 이용해 단순한 인터페이스 뒤로 로직을 숨기는 방법을 알아보자 //자바 스크립트는 비공개 속성을 지원하지 않아 클래스를 사용하는 쪽에서 메서드나 속성을 어떻게 사용하느지 제어할 수 없다. //클래스 사용자가 인스턴스의 속성에 점표기법으로 속성에 접근할지, 단순한 객체에 coupon.price = 11 같이 접근할 수 도 있다. //이런것은 큰 문제는 아니지만, 다른 개발자나 코드 작성자의 의도하지 않게 코드의 다른 부분에 값을설정하는 경우가 있을 수 있다. //예를 들어 정수값을 할당해야 하는 속성에 문자열이 들어가는 것처럼 작은 변화가 클래스에 퍼지면 예상치 못한 버그가 발생한다. class Coupon { const..
//tip 38 상속으로 메서드를 공유하라 //이번엔 클래스를 확장하고 부모 클래스의 메서드를 불러오는 방법을 알아보자. //초기에 클래스 상속을 하려면 객체의 속성이 존재하는지 확인하며 순회하고 부모로부터 새로운 객체의 프로토타입을 복사하고 메서드 추가를 해야 했다. //클래스를 사용하면 상속이 간단해진다. //하지만 상속을 사용할 때는 주의가 필요하다. 나쁜 코드로 이어진다는 의견이 있다. //이제 상속의 동작원리에 대해 알아보자 //새로운 클래스를 선언하고 extends 키워드를 이용해 부모 클래스를 상속받는다. class Coupon { constructor(price, expiration) { this.price = price; this.expiration = expiration || `2주` ..
//tip 37 읽기 쉬운 클래스를 만들어라 //클래스 문법은 오래동안 자바스크립트에서 없던 문법이지만 최근에 등장했다. //클래스 문법은 일반적인 개발 패러다임이며 다른 언어 개발자들도 익숙한 개념이라 말하는 반면, //언어 내부의 장ㄴ스러운 부분을 왜곡하는 나쁜 습관을 조장한다고도 한다. //허나 클래스는 앵귤러(Angular)나 리액트(React)같이 인기있는 프래임워크를 사용한다면 유용하게 사용된다. //클래스를 선언할 때는 class 키워드 사용하고 새로운 인스턴스를 생성할 때는 new 키워드를 사용한다. class Coupon { constructor(price, expiration) { this.price = price; this.expiration = expiration || `2주` } ..
//tip 36 화살표 함수로 문맥 혼동을 피하라 //유효범위와 문맥은 JS개발자가 어렵게 느끼는 개념이다. //함수의 유효 범위는 간단하게 함수가 접근할 수 있는 변수라고 할 수 있다. //문맥은 함수 또는 클래스에서 this키워드가 참조하는 것이기도 한다. //유효범위와 문맥은 파악하기도 어렵지만 많은 사람들이 두개를 혼동한다 //라이언 모르 라는 사람은 두 개념의 차이를 알 수 있는 간단한 방법을 말했다. //유효범위는 함수와 연관되어 있는 것이고, 문맥은 객체와 연관되어 있다는 것이다. //정확한 분류는 아니지만, 모든 함수에서 통하는 방식이다. 사실상 좋은 일반 규칙이다. //예시를 보도록 하자. //form요소에 유효하지 않은 값을 입력시 노출할 메세지를 설정하는 객체가 있다고 하자. //객체..
