Pay it forward

노마드코더님 강의를 들으면서 이해가 어려웠던 부분 정리 위 코드는 querySelector로 hello클래스의 h1태그를 h1변수로 받아와서 h1.addEventListener로 "클릭했을때 handleTitleClick함수를 실행한다."는 코드이다. 클릭할때마다 파란색과 토마토색이 왔다갔다 변화되는 코드인데 h1.style.color가 너무 많이 반복되니 더 깔끔하고 좋은 코드를 만들어 보자. 이렇게 바꾼다고 하셨는데 let newColor부터 이해가 어렵다. 이를 이해하기 위해 알아야 할것. 1. currentColor는 getter로써, 최근 color값을 복사하는 역할이므로 const로 선언하는 것이 의미상 적절 2. newColor는 if조건문을 거치면서 변수에 대입된 색상값을 h1.style...

console.log 와 return의 차이 처음에 책보면 전부다 console.log로 가르쳐줘서 이 기능이 이렇게 되는건 알겠는데.. 콘솔에 찍히는거 확인하는게 코딩이랑 무슨상관이지? 라는 생각을 했었다. 처음에 return으로 데이터를 받는 법을 알려주고 그걸 눈으로 확인하고 싶을 때 console.log를 찍어본다. 라고만 알려줘도 참 이해하기 쉬울것 같다. 콘솔로그를 하면 콘솔에 찍긴 찍지만 데이터가 들어있는 상태는 아님 그래서 undefined가 나옴 리턴을 해주면 콘솔에 찍히진 않지만 실제 데이터가 들어간 것을 확인할 수 있다. 즉 뭔가 코딩으로 데이터를 받아서 처리하려면 콘솔로그가 아니라 리턴으로 해야한다. 그리고 중요한거, 리턴을 하고나면 함수는 끝난다. 리턴을 만나서 되돌아가고 그런개념..

콜백을 계속 nesting해서 사용하는 것을 Promise 를 통해 방지할 수 있다. Promise를 써보니 상태에 따라 resolve와 reject로 나눠서 함수를 만들 수 있고 producer 와 consumer로 구분할 수 있어서 코드가 훨씬 쉽게 보이는 것 같다. producer에서 Promise를 만들고 consumer에서 then,catch,finally를 사용할 수 있다. 일단 UserStorage 클래스에 두개의 API를 Promise로 만들자. loginUser API가 id 와 password를 받고 Promise를 return 하도록 만들자. 어떤 함수가 실행되고 제대로 실행되면 resolve로 id를 받고, 그렇지 않으면 reject로 error를 발생시킨다. Promise의 res..

오늘은 콜백지옥을 만들어보자. 그리고 Async와 promise 가 이 콜백지옥을 어떻게 해결하는지 공부해보자 loginUser와 getRoles 라는 API를 가지는 클래스 선언. loginUser는 id,password를 받고 로그인이 정상적으로 이루어지면 실행되는 onSuccess 콜백함수, 로그인에 실패하면 실행되는 onError라는 콜백함수가 들어있다. getRoles는 로그인에 성공한 사용자의 데이터를 받아서 사용자의 role을 받아오는 API. 실제 서버와 통신하는 코드가 아니지만 이해를 하기위해 setTimeout을 이용함. userStorage라는 인스턴스를 만들었고 loginUser를 실행한다. id와 password를 요구하고 if가 true면(아이디가 ellie이고 비번이 dream..

자바스크립트는 동기적이다. 호이스팅이 된 이후부터 우리가 코드를 작성한 순서대로 하나하나 동기적으로 실행된다. 호이스팅이란 var변수선언이나 함수선언들이 제일 위로 올라가는 것. 동기적이라는 말이 무슨말이냐.. 한 작업이 실행되는 동안 다른 작업을 멈춘채로 유지하고 자신의 차례를 기다리는 것. 이라고 하는 글을 봤는데 synchronous(동시에 발생[존재]하는) 라는 영어단어와 뭔가 맞지 않는다고 생각했다. 이런 코드가 동시에 발생한다고 볼수는 없지 않을까? 사람인 내가 사람의 눈으로 보기엔 동시에 나오지만 콘솔에 1,2,3 순서대로 출력된다는 자체가 뭔가 1,2,3 순서대로 작동하고 있다는 생각이 든다. 동시에는 아닌 것 같다. 동기적 이라는 말을 동시라는 뜻으로 이해하면 오해가 생길 수 있기 때문에..

JSON 은 JavaScript Object Notation 의 약자로 해석하면 '자바스크립트 객체 표기법' 이다. 제대로 이해한건지 모르겠지만.. 서버랑 클라이언트랑 데이터를 주고받을 수 있는 데이터 교환 표준 인것같다. 특징으로는 사람도 이해하기 쉬우며, 용량도 적다. 그리고 가장 중요한 것은 특정언어에 종속되지 않아서 다른 언어에서도 사용가능하다. 서버에 데이터를 보낼때 JSON을 사용하는 것 같다. 그래서 데이터를 JSON으로 바꾸고 다시 parse하는 방법을 배운다. JSON의 데이터로 올 수 있는 타입: number, string, boolean, object, array, null 그래서 위에 rabbit객체의 jump 함수가 json으로 들어가지 않음. replacer는 결과값을 특별하게 ..