//tip 46 localStorage를 이용해 상태를 장기간 유지하자 //사용자 데이터를 localStorage에 저장하는 방법을 알아보자 //사용자 데이터를 localStorage에 저장하는 방법을알아 볼 것이다. //많은 사용자들은 페이지 방문할 때마다 데이터 입력을 하는 것을 꺼려한다. //그렇다 해서 로그인 기능을 만들자니 그것도 꺼려한다고 한다. //참 어떻게 해야할지 애매하다. //그래서 사용자 데이터를 브라우저에 저장해서 특정 기기의 특정 브라우저에 정보를 유지하게 할 수 있다. //하지만 사용자는 여러 기기를 이용하기에 큰 도움은 되지 않지만 계정 생성보다는 접근성이 좋을 것이다. //localStorage는 브라우저의 작은 데이터베이스(DB)와 같다. //localStorage에 정보를..
분류 전체보기
//tip 44 aync/await로 함수를 명료하게 하자 //프라미스는 인터페이스가 여전히 투박하다. //하지만 여전히 메서드에서는 콜백을 다룬다. //하지만 비동기 프라미스 데이터를 단일 함수 함수의 변수에 추가해 콜백함수 사용을 피하게 됬다. //async와 await는 서로 분리된 동작을 한다. //async는 선언한 함수는 비동기 데이터를 사용한다는 것이다 //await는 비동기 함수의 내부에서 값이 반환될 때까지 함수의 실행을 중지시킬 수 있다. //주의해야 할 점이 있다. //1️⃣ async와 await는 프라미스를 대채하지 않고 더 나은 문법으로 감싸는 것에 불과하다. //2️⃣ 최신 브라우저는 대부분 지원하지만 안되는 브라우저도 있으니 주의하자 //이제 사용 예제를 보자 function..
//tip 43 프라미스를 이용해 비동기적으로 데이터 가져오기 //프라미스를 이용해 지연된 데이터 응답을 처리하는 방법을 알아보자 //자바스크립트는 비동기 언어이다. 비동기 언어는 이전의 코드가 해결되지 않아도 이어지는 코드를 실행할 수 있는 코드이다. //코드가 중단되는 이유는 API, DOM이나 다른 곳에서 데이터를 가져올 수 있고 사용자 응답을 기다릴 수도 있다. //비동기 언어의 가치는 지연된 정보를 기다리는 동안 이 정보가 필요치 않은 다른 코드를 실행할 수 있다는 점에 있다. //지연된 정보를 기다리는 동안 코드는 멈추지 않는다는 것이다. //프로미스 등장 이전에는 콜백함수를 이요해 비동기 작업을 했다. //데이터 원본에 비용을 요청할 때 콜백함수를 인수로 넘기고 비동기 데이터를 가져온 후에 ..
//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주` ..
