WEB/JS
-
async/await + 지난번에 한거 복습WEB/JS 2019. 10. 16. 14:51
프로미스를 한문장으로 정리) 프로미스는 결과를 가지고는 있는데, 바깥에다가 표시를안해준것. then이나 catch를 붙이기 전까지는 반환을 안한다. 이로인한 장점) 프로미스가 콜백보다 자유로움 --------------------- 이제 오늘 원래 하려고 했던 async와 await에 대해서 알아보자 잘모르겠다. async func() { try{ const user = await Users.findOne('zero'); ~~~} catch(err) { } } func() 이런식으로 사용한다는데 잘모르겠다. 감이 안온다. ---- 나중에 수정 이어서
-
곱하기 게임WEB/JS 2019. 10. 11. 14:51
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 구구단 게임 구구단 게임하기 const num1=Math.floor(Math.random()*9); const num2=Math.floor(Math.random()*9); let counter=0; document.write(num1+'*'+num2+'='); const refresh =() =>{ document.getElementById('result2').innerHTML='2초후 새로운 게임이 시작됩니다.'; setTimeout(function(){ window.locatio..
-
Promise문법 +@WEB/JS 2019. 10. 10. 13:47
호두쥐. ---------- promise 문법을 테스트 해 볼 수 있는 코드를 작성해 보자. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 const plus= new Promise((resolve, reject) =>{ const a=1; const b=2; if (a+b >2){ resolve(a+b); }else{ reject(a+b); } }); plus .then((success)=> { console.log(`success`); }) .catch((fail) =>{ console.log(`fail`); }); Colored by Color Scripter cs 티스토리 기본 글 에디터에서 들여쓰기가 안되서 개짜증난다.. 지금부터는 컬러 스크립터를 이용할 계획인데 ..
-
프로미스 문법WEB/JS 2019. 10. 8. 11:28
프로미스 나인이 아니다 ! 이번엔 프로미스 문법에 대해서 araboja. 자바스크립트 언어는 지난 포스트에서 말했던 것 처럼 싱글쓰레드 언어이다. 비동기 처리를 위해선 콜백을 이용했다. 콜백이 사용되는 경우가 많아지면서 비동기 처리를 중첩 시켜서 표현해서 에러, 예외처리가 어렵고 코드를 짜기의 복잡함이 증가하는 단점이 드러나기 시작했다. 그래서 등장한것이 프로미스라고 한다. 아래는 캡틴 판교님의 프로미스를 이해하기 위한 코드이다. 설명이 잘 되어있어 이해하는데 도움이 많이 되었다. https://joshua1988.github.io/web-development/javascript/promise-for-beginners/ new Promise(function(resolve, reject){ setTimeo..
-
비동기와 콜백WEB/JS 2019. 10. 7. 12:37
난 카페에서 신발 벗고 있는거 별로 안좋다고 생각한다. 실제로 미국에서는 신발 벗는거 죤내 이상하게 처다본다더라. 음~ 어쨌든 오늘은 비가 존나 와서 신발을 약간 몰래 벗고 있었다고. 아부지의 리복 신발을 신고왔는데, 이게 가볍고 통기성을 너무 신경쓴 나머지 물이 튀기면 1도 방어가 안되고 쏙쏙 다 들어와서 발과 양말이 젖어버린다. 그래서 어쩔 수 없었다고 자기합리화 하는중. ---------------- 아마 마도리 코드였던것 같은데 비동기라는 개념을 이해하지 못했었다. 비동기처리에 관련된 코드였던것같은데 암튼 잘몰랐음ㅋ. 비동기 처리는 어떤 로직의 실행 종료까지 안기다리고 나머지 코드를 먼저 실행하는게 비동기 처리다. JS에서 서버로 데이터를 요청했을 때 서버가 결과값을 언제줄지 모르는데 다음 코드를..
-
rest 문법WEB/JS 2019. 10. 7. 11:47
화살표 함수에서 const p = (...rest) => { return rest; } p(1,2,3,4,5); 를 해버리면 [1,2,3,4,5]를 반환한다. 배열에 사용되는 여러 메쏘드들을 이용할 수 있는것이었던 것이었던 것이다. arguments 어쩌구랑 비슷하다는데 앞으로는 쓸일 없으니 알아보지 말자. 아 그리고 const에 대해서 정확히 알게 되었는데, const를 쓰면 바꿀수없다는것에 대해서 언제는 바꿀수 있고 언제는 없고 해서 당황을 많이 했었고 그냥 let을 쓰는게 속편해서 그냥 let을 썼었다. 이번에 좀 정확히 알게되었는데, const a ={1,2,3,4}; 이런식으로 하면 {} 중괄호라는 사실만 안바뀌고 안에 1,2,3,4는 바뀔 수 있는 것이다. 아직 한 85%밖에 이해 못했으니 앞..
-
비구조화 할당 (Destructuring)WEB/JS 2019. 10. 7. 10:55
전에 썼던게 틀려서 다시 쓴다. const a = candymachine.a; const b = candymachine.b; 이런식으로 쓰는건 사실 귀찮고 비효율적이다. 이럴 때 쓰는게 비 구조화 할당이다. 위의 두줄을 아래처럼 한줄에 표현 가능하다. const {a,b} =candymachine 다만 this가 의도와 다르게 작동하는 경우가 있다는데, this가 의도와 다르게 작동하는 경우는 아직 잘 모르겠으니 넘어가자. 머 this를 바꿔주는 method를 사용하면 해결된다 카더라 배열에도 비구조화 할당을 사용할 수 있다고 한다. 원래는 이렇게 작성하던것(내가 지금까지) const array = ['node',{},10,true]; const node =array[0]; const obj = arra..
-
객체 리터럴과 화살표 함수의 이해WEB/JS 2019. 10. 6. 03:47
객체 리터럴 ES6 에서 부터는 객체의 메서드에 함수를 연결할 때 다음과 같이 더는 콜론(:)과 function 키워드를 붙이지 않아도 된다. const newObject = { Hello() { console.log('helloJS'); } } 음~ 아직 많이 안써봐서 뭔지 잘 모르겠다. 그 이유는 아직 객체 안에다가 함수넣고 이런걸 많이 안해봐서 그렇다. JS문법강좌를 대충보고 넘어간 실수다. 차차 알아가면 되지싶다. ----- 화살표 함수. 화살표함수를 내가 이해하지 못했던 것은 const add = (x,y) => { return x + y; } 라고 쳤을 때 add를 어떻게 활용하는지에 대해 잘 알지 못했기 때문이었다. 그러나 지금은 잘 이해한 듯 하다.(아님말고ㅋ) 그리고 friends = [..