자바스크립트(65)
-
Promise
프로미스(promise)란? - 프로미스는 자바스크립트 비동기 처리에 사용되는 객체(Object)이다. - 비동기 처리: ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미함 - 프로미스를 사용하면 콜백 함수를 계속해서 불러서 코드의 가독성이 떨어지는 일명 '콜백 지옥'을 없이 쉽게 비동기 처리 가능 - 프로미스는 정해진, 장시간의 기능을 수행하고 나서 정상적으로 기능이 수행이 되어졌다면 "성공의 메시지와 함께 결과 값을 전달" - 만약 기능을 수행하다가 예상치못한 문제가 발생했다면 "Error를 전달" 프로미스 학습에 중요한 포인트 2가지 1) State(상태) 2) Producer VS Consumer - Producer(제공자): 우리가 원하는 ..
2021.02.03 -
[바닐라js로 그림판 만들기] Changing Color
Html 태그에서 각 컬러들에 class를 추가한다. (jsColor) const colors = document.getElementsByClassName("jsColor"); 이것을 자바스크립트에서 가져오고 console.log(colors)해보면 배열이 아니라 HTMLCollection인 것을 알 수가 있는데, HTMLCollection은 HTMLCollection은 리턴 결과가 복수인 경우에 사용하게 되는 객체다. 유사배열로 배열과 비슷한 사용방법을 가지고 있지만 배열은 아니다. console.log(Array.from(colors)); 그러므로 HTML Collection을 array로 바꿔주는 코드를 넣는다. Array.from()은 유사배열을 배열처럼 만들어주는 것이다. Array.from(c..
2021.01.28 -
[노마드코더-바닐라 JS로 크롬 앱 만들기]todo.js (3)
To-do list를 지우기 위해서는 2가지를 해야 한다. 1) local storage에서 todo 하나를 지워야 하고 그리고 저장해야 한다. 2) 그리고 HTML 에서도 지워야 한다. 먼저 HTML을 먼저 지우는 것부터 하겠다. 우리는 li를 지울 것이다. 그러기 위해서 함수를 하나 만든다. deleteToDo라는 함수 만들기 function deleteToDo(event){ } delBtn.addEventListener("click",deleteToDo); paintToDo 함수에서, delBtn(삭제버튼)을 눌렀을 때 deleteToDo 함수가 실행되도록 addEventListener를 사용한다. function deleteToDo(event){ console.log(event); } consol..
2021.01.25 -
[노마드코더-바닐라 JS로 크롬 앱 만들기]todo.js (2)
★to-do를 저장하기 이제 to-do(할 일)를 저장하는 것부터 시작할 것이다. 그리고 to-do list(할 일 목록)는 array가 되어야 한다. 왜냐하면 할 일 항목이 많아질 수 있기 때문이다. 해야할 일을 하나만 저장하는 게 아니라 여러 개가 모인 목록으로 저장해야 하는 것이다. const toDos = []; toDos라는 이름의 빈 배열을 만들어 준다. 처음엔 빈 배열로 만들고, 해야할 일을 생성했을 때 그게 이 toDos라는 Array에 추가되도록 한다. 그러기 위해서 일단 toDoObj 라는 것을 만들어야 한다. const toDoObj = { text: text, id : toDos.length + 1 //맨 처음엔 toDos Array가 비어있으니까 id 값은 1일 것이다. } toD..
2021.01.25 -
[명품 웹프로그래밍] Open Challenge 08 겜블링 게임 웹 페이지 만들기
겜블링 게임 각 숫자를 클릭하면 0에서 2사이의 난수로 바뀝니다. 모두 같은 수가 나오면 승리합니다. 0 0 0 문제에 나와있는 기능말고 내가 직접 더 추가해보았다. 처음 숫자가 0으로 세팅되어 있는데 클릭을 했는데도 만약 0이면 이게 클릭이 된건지 아닌지 잘 모르겠어서 클릭이 안 된 숫자는 파란색, 이미 클릭된 숫자는 노란색으로 표시하게 했고 클릭 횟수를 나타내는 변수를 지정하여 한 숫자는 한 번만 클릭이 가능하도록 두번째 클릭부터는 alert 창이 뜨도록 했다. 그리고 각각의 숫자들은 나란히 정렬해야 하므로 div 안에 span으로 놓을 수도 있었지만,CSS에서 flex를 배웠던게 생각나서 한 번 사용해 보았는데 justify-content를 space-around를 통해 간격을 예쁘게 잘 줄 수 있..
2021.01.19