오늘은…수리 추리 문제를 푸는 것은 마감 기한이 있어서 그것을 먼저 공부하려고 했는데 왜 수학을 두고 n나이가 지나면… 그렇긴 너무 오래 걸리고 말았다···www아주 오래 걸리는데? 거의 답안지를 봐야 할 것 같은.)계속 풀어 가면… 그렇긴 어떻게 되겠지>< 그렇게 저녁 식사 전까지 문제를 풀어 보아, 저녁 식사 후부터 코딩 공부하고 양은 적지만 빠짐없이 공부하고 가슴이 힘껏!
<callback/synchronous, asynchronous>:Javascript는 synchronous(동기적)이다.
즉, hoistiong이 되어서 코드가 나타나는 순서에 자동적으로 실행되는 것.*hoisting:var, function decaration 같은 변수 선언이 위에 올린다.
console.log(‘1’);setTimeout((()=> console.log(“2”), 1000)log(“3”);1, 3은 동기적, 2는 비동기적 set Timeout은 웹브라우저가 제공하는 API로 1초 후에 2를 띄우는 callback 함수를 실행한다.
console.log(‘1’);setTimeout()=>console.log(“2”), 1000)console.log(‘3’);//동기 콜백 함수 printImmediate(print){print();}printImmediate(()=>console.log(‘hello’);//비동기 콜백 함수 printWithDelay(print, timeout){setTimeout(print, timeout);}인쇄 Delay()=>console.log(“c callback”), 2000)의 경우이와 같이 함수를 정의하고 실행하는 경우,이 순서로 실행된다.
JS에서 실행될 때 우선 정의된 함수인 printImmediately와 printWithDelay는 hoisting되어 가장 위에 올라가서 동기적으로 열리는 1,3, hello가 실행된 후 1초 만에 2가 실행되어 2초 후에 asynccallback이 실행된다.
그렇다면 백문에 미치지 않고 콜백 지옥을 직접 체험하고 보자!
//Callbakc Hell exampleclass UserStorage { loginUser (id, password, onSuccess、 onError) { setTimeout(() => { if( ((id === ‘ellie’ && password === ‘dream’) || (id === ‘coder’ && password === ‘dream’))} { onSuccess(id); } } else { onErrrror(‘not Found’); } }, 2000)} getRoles(user(user, onSuccess、 onError){ setTimeout(() => { if (user === ‘ellie’){ onSuccess ({name: ‘ellie’, role: ‘admin’}; } else { onError(newError(‘noaccess’)); } } } }, 1000); }}}}}}}}}class User Storage는 로그인하는 객체.-method login User의 인자로서 id, password를 가져오고 성공하면 on Success콜백 함수를 실패하면 on Error콜백 함수를 가져오거나 총 4개의 파라미터를 가진다.
그러니까 setTimeout으로 2초 후에 혹시 ID가 ellie에서 패스워드가 dream이거나 id가 coder에서 패스워드가 academy는 onSuccess에 id를 주고 호출, 틀리면 onError에서 Error객체를 호출.-getRoles는 user정보를 갖고, 그 유저가 바르면 onSuccess를 잘못 있으면 onError콜백 함수를 호출.그래서 setTimeout을 통해서 1초 후에 혹시 user가 ellie라면 onSuccess를 호출, 틀리면 onError를 호출.이런 유저 스토리지를 통해서 실행하고 싶은 것은 1. 사용자가 id와 password를 입력 받는다.
2. 입력된 것을 이용하여 서버를 통해서 로그인 3. 로그인에 성공할 경우 로그인한 사용자 ID를 다시 취득한다(onSuccess(id);사용자의 역할을 거듭 요청하고 받아(getRoles)4. 역할이 성공적으로 수신되는 경우, 유저 object가 출력되도록 한다.
const userStorage=newUserStorage();const id=프롬프트”id를 입력하세요”;const password=프롬프트”패스워드를 입력하세요”;userStorage.loginUser(id, password, user=>{userStorage.getRoles(user, userWithRole=>{alert(`안녕하세요${user)}user)WithRole.name),${유저가 있습니다 Role.role}role`);}, 에러=>{exclude.log(error)});}, 에러=>{exclude.log(error)};constuserStorage = newUserStorage(); constid = 프롬프트 “id 를 입력해 주세요”; const password = 프롬프트 “비밀번호를 입력해 주세요”; userStorage.loginUser(id, password, user=> {userStorage.getRoles(user, userWithRole => {alert(‘안녕하세요${user)}, ${사용자가 있습니다.
Role.//1. promise const promise = new Promise((resolve, reject) =>{ // 重労働(network, read files) console.log(何かをしている…’;};promise를 만든 순간 정의된 executor콜백 함수가 바로 실행된다.
즉, promise속에 네트워크 통신을 하는 코드를 작성했다면 promise가 만드는 그 순간 네트워크 통신을 수행하게 된다.
만약 네트워크 리퀘스트를 사용자가 요구할 때만 할 필요가 있는 경우는? 버튼을 누르는 등···위와 같이 작성되자 누리꾼이 요청하지 않는 불필요한 네트워크 통신을 한다.
알아 둔다*Producer와 Consumer//1. 신규 Promise가 작성되면 실행자는 자동으로 실행됩니다.
const promise=new Promise(resolve, reject)=>{// 무거운 작업(nework, read files)console.log(“뭔가를 하고 있는…”);setTimeout()=>{//(‘resolveellie’);reject(new Eror(‘network(‘);};};//2. 소비자:그럼 catch, finally promise . then(value=>{console.log(value);}. html(error=>{console.log(error);}). html(()=>{console.log(fimally’)};promise를 사용할 때는 then, catch, finally를 활용한다.
then의 value는 promise가 성공하고 복귀된 ellie값을 갖게 된다(resolve(‘ellie’). 그래서 콘솔에 출력하면 ellie가 출력되는 것으로 나타났다.
그리고 fnally는 promise가 성공하든 실패하든 무조건 마지막에 출력되는 값. catch는 promise가 실패했을 때 reject 값을 갖는다.
//3. Promise chainingconst fetchNumber=new Promise(resolve, reject)=>{setTimeout()=>resolve(1, 1000);}};fetchNumber . then(num=>num*2). then(num=>num*3). then(num=>{resolve, reject)new Promise((()>reject)을 갚았다)=>{setTimeout()=>resolve(num-1, 1000);};}};}). then(num=>console.log(num);이렇게 then에서 비동기적인 것을 무더기로 처리할 수 있다.
-fetchNumber로 1초 후에 resolve값으로 숫자 1이 복귀되고 이 1이 then의 value num이 되어 2로 이 값이 다음의 then의 value가 되고 6으로 6이 다음의 then의 num이 되어 새로운 promise의 값이며, 1초 만에 6-1의 5이 복귀되고 마지막에 then을 통해서 이 값이 콘솔에 출력된다.
*오류정리방법//4. Error Handling consteHen=()=>new Promise(실패, 거부)=>{setTimeout()=>resolve(‘), 1000;};constEgg=hen=>new Promise((resolve, reject)=>{setTimeout()=>resolve(‘)=>new Promise(`${hen}=>1000);const cook===new Promise(resolve(`)=(‘${${}}}}}.then(meal=>cook(meal). then(meal=>console.log(meal);getHen을 정의하고 getEg에 hen값을 받은, cook로 egg값을 받은 Promise를 정의. 이를 출력할 때 getHen의 리턴 값을 hen으로 정의하고 이 값을 getEgg에 준다.
여기에서 리턴 하는 값을 egg에 배당하고 cook에서 이 값을 준다.
그리고 마지막으로 cook에서 복귀된 값을 콘솔에 출력!
그리고 then으로부터 hen, egg와 같이 하나의 값을 받고 그 값을 전달할 경우 코드를 보다 짧게 정리할 수 있다.
getHen() .then(getEgg) .then(cook) .then(console.log);then 리턴되는 값을 즉시 getEg, cook, cosole.log에 할당한다.
혹시 중간에 오류가 발생하면요?//4. Error Handling consteHen=()=>new Promise(실패, 거부)=>{setTimeout()=>resolve(‘), 1000;};constEgg=hen=>new Promise((resolve, reject)=>{setTimeout(()=>reject(`${hen}=>1000);const cook===new Promise((${hen}=1000)});conste);consterg)=>(>.>그리고(cook). ten(cook.log). ten(cook.log). ten(cook.log);getEgg에서 에러가 발생했을 경우(reject) catch를 마지막으로 작성함으로써 getEgg에서 발생한 에러를 작성해준다.
에러가 나도 에러를 내지 않고 다른 것으로 대체하고 싶을 때는getHen() // .then(getEgg) .then(error => { return ‘; }} .then(cook) .then(message.log) .then(message.log);이와 같이 에러가 나는 getEg 다음에 catch를 통해 getEgg에서 에러가 발생하더라도 에러를 내는 것이 아니라 을 리턴하도록 정리하여 에러를 처리할 수 있다.
>> 이렇게 then과 catch 순서로 에러를 어떻게 처리할지 조절할 수 있다!
그렇다면!
!
아까 작성한 콜백 지옥을 promise로 깔끔하게 정리해보자.>> 이렇게 then과 catch 순서로 에러를 어떻게 처리할지 조절할 수 있다!
그렇다면!
!
아까 작성한 콜백 지옥을 promise로 깔끔하게 정리해보자.loginUser와 get Roles를 promise로 정의함으로써 callback함수로서 별도 읽지 않아도 되기 때문에 코드가 간결하게 됐다.
가장 간결하게 된 것은 이 코드를 읽기 과정이지만 userStorage에서 loginUser에 id와 password를 인자로 배정하고 성공하면 리턴 하는 값(id)을 getRoles에 할당, getRoles에서 리턴 하는 값이 적절하면(user===ellie)경고 창이를 표시한다.
만약 실패하면 error을 콘솔에 표시한다.
이처럼 Promise를 사용하고 더 코드가 쉽다!
흔들흔들 강의에서는 2번째로 물어보는 내용인데 어렵다~ 그래도 드림 코딩 영상을 보기 전 생활 코딩의 기초 개념을 넣어 보는 것이 효과적이라는 생각!
정말 이제까지 진행된 것이 이런 코드는 이렇게 작동하는 거야!
개념만 알지 않은 상태에서 활용이 전혀 못하는 TT콜백 지옥을 만들어 보거나 promise로 보거나 하는 것을 직접 하려고 했는데 어떤 식으로 해야 할지 모르겠다…… 그렇긴 코드를 여기저기 새 조금씩 변형되고 만들어 보는 훈련이 필요하다고 생각한다!
!
!
그리고 수학 문제···제가 학생 때 싫은 타입만 모이는소금물, 가속시, 자료 해석, 확률이나···학생 때 이런 것이 싫어했지만, 바로 이 종류의 문제인 것은 무엇?그리고 예상외로 CT문제는 좀 풀어 봤는데 재미 있었어.물론 빨리 푸는 것은 말할 수 없지만…이래봬도 수학도 그렇게 어려운 문제가 아니니까 계속 하면 잘하겠다.
어려운 문제에서 나오지 않았으면 좋겠어!
!
그리고 오늘부터 지원 날이라 까닭도 없이 계속 신경을 안 쓰고 바로 지원서를 제출했는데 그러고 보니…이래봬도 저는 어학 관련 자격증도? 영어 자격증도 없습니다.
경력은?전혀 없고…이래봬도 생각하고 보니 그랬어.. 그래도 하고 보는 거야!
^^내일은 약속이 있는 날이라 친구와 만나고 수학 공부하고..집에 가서 코딩 공부해야지!
화이팅이야~
