본문 바로가기

분류 전체보기

 (207)
Wealth List (4) - sort () Sort by Richest 버튼을 눌렀을 때, 재산의 크기대로 정렬되도록 function sortByRichest() { data = data.sort((a, b) => { return b.money - a.money; }); updateDOM(); } data array를 받아오고 가장 돈이 많은 사람이 위로 올라가야 하기 때문에 a.money - b.money가 아니라 b.money - a.money 나는 처음에 sort() Method가 in-place 정렬인지 모르고 저렇게 다시 data에 넣어줬는데 그럴 필요가 없다. 그리고 arrow function을 더 간단하게 만들어주면 function sortByRichest() { data.sort((a, b) => b.money - a.money);..
Wealth List (3) - map() double money 버튼을 클릭하면 사람들의 재산이 2배가 되게 만들어 볼 것! 사용할 array 함수는 map() doubleBtn.addEventListener("click", doubleMoney); event listener을 만들고 function doubleMoney() { data = data.map((elem) => { return { name: elem.name, money: 2 * elem.money }; }); console.log(data); updateDOM(data); } 우선은 강의 보기 전에 내가 만들어 본 doubleMoney 함수다. 원래 data array를 받아와서 각 element의 name은 그대로, money만 두배를 해서 return 해준 후에 그 data ..
Wealth List (2) - forEach function updateDOM(providedData = data) { main.innerHTML = "Person Wealth"; providedData.forEach((element) => { const div = document.createElement("div"); div.classList.add("person"); div.innerHTML = `${element.name} ${formatMoney( element.money )}`; main.appendChild(div); }); } - 함수의 parameter updateDOM함수를 호출할 때, parameter가 없으면 저번 시간에 생성했던 data array가 들어온다. - main.innerHTML 부분을 원래 가장 기본 코드로 넣어줘..
Wealth List (1) 특별히 예쁜 UI이거나, 엄청 유용해서 앞으로도 계속 사용할 프로그램은 아니고.. - fetchAPI를 이용해서 data를 받아와서 동적으로 화면에 표시 (.then을 이용해서 chain을 만들기 보다는 async/await를 이용해서 깔끔하게 구현) - forEach, map, sort, filter, reduce와 같은 Array method 를 연습하기 위한 프로젝트 1. get Elements const main = document.getElementById("main"); const userBtn = document.getElementById("user"); const doubleBtn = document.getElementById("double"); const showBtn = document..
Custom Exchage Rate Calculator (fetch API, 3rd Party API) 실시간 환율 받아올 곳 https://www.exchangerate-api.com/ ExchangeRate-API - Open Free & Pro Currency Conversion API Using ExchangeRate-API means relaxing while our currency converter API just works, 24/7! www.exchangerate-api.com 기본 UI 1. get Elements const currencyOne = document.getElementById("currency-one"); const amountOne = document.getElementById("amount-one"); const currencyTwo = document.getElemen..
JSON (2) 개념 이 포스트는 드림코딩 by 엘리님의 자바스크립트 10. JSON 강의를 정리한 것입니다. youtu.be/FN_D4Ihs3LE 저번 시간 복습) 웹브라우저와 서버가 통신할 때 사용하는 규칙이 http http의 단점을 보완한 Ajax라는 기술이 등장했다. - Ajax 기술을 구현하는 다양한 방법 중 하나가 fetch API - 주고받는 데이터의 포맷으로 주로 XML을 사용했지만 최근에는 JSON을 사용한다. JSON 공부 포인트 1. Objet를 JSON으로 어떻게 serialize 할지 2. JSON을 어떻게 deserialize해서 Object로 바꿔줄지 1. Object to JSON JSON.stringify('object'); stringify라는 API를 사용하면 간단하게 Object가 JSO..
JSON (1) Intro 이 포스트는 드림코딩 by 엘리님의 강의를 듣고 정리한 내용입니다. youtu.be/FN_D4Ihs3LE Intro 웹 브라우저와 같은 Client들이 어떻게 Server와 통신할 수 있는지를 정한 것이 바로 HTTP(Hyper Text Transfer Protocol)라고 했다. 어떻게 Client와 Server가 Hypertext를 주고 받을 것인가..를 정한 것인데 여기서 Hypertext는 hyperlinks뿐만 아니라 문서, 이미지 파일, css, javascript 등등을 의미한다! 그런데 이 HTTP에는 단점이 있었다. 바로 사용자가 페이지를 이동해야만 무언가를 요청할 수 있거나 일부 정보만 바뀌면 되는데 페이지 전체가 리로드 되는 등.. 비효율 적인 점이 많았다. 그래서 이런 단점들을 해결..
Ajax (2) - Fetch API 이 포스트는 이고잉님의 Fetch API 수업을 듣고 정리한 내용입니다. https://opentutorials.org/course/3281/20562 fetch API - 생활코딩 수업소개 ajax를 구현하는 여러가지 기술이 있습니다. 우리 수업에서는 최신 기술인 fetch API를 이용할 것입니다. fetch API는 기존의 방식에 비해서 더 유연하고, 분명합니다. fetch API 기본 사용법 소 opentutorials.org Ajax를 구현하는 여러가지 기술이 있지만, 그 중 가장 최신 기술인 fetch API에 대해 알아보겠다. 요청과 응답 내가 fetch('hello'); 라는 코드를 치면 웹브라우저에게 "hello라는 이름의 파을을 서버에게 요청해줘~"라는 뜻이다. 그러면 이 Request..

티스토리툴바