출처 : https://nomadcoders.co/ Geolocation 핵심 : Geolocation를 위해 기본 환경을 세팅한다. 0. weather.js를 만들어주고, html에 import해준다. 1. weather JS에서 navigater 함수를 이용해서 사용자의 위치를 값으로 받는다. tip // navigator 함수는 첫번 째 인자로 위치를 받는데 성공했을 때의 함수를 받고, 두번째 인자로는 에러가 발생했을 때 실행될 함수를 받는다. // 위치를 받는데 성공했을 때의 함수 function onGeoOk(position) { // 위도 값을 저장함. const lat = position.coords.latitude; // 경도 값을 저장함. const lng = position.coords..

출처 : https://nomadcoders.co/ Setup 핵심 : To do list를 위해 기본 환경을 세팅한다. 0. todo.js를 만들어주고, html에 import해준다. 1. 사용자가 todo를 입력하는 것을 입력받을 form이 필요하다. 2. todo-list라는 id를 가진 ul을 만들어준다. 3. form과 ul을 HTML에서 JS로 가져온다. const toDoForm = document.getElementById("todo-form"); const toDoList = document.getElementById("todo-list"); 4. greeting의 form에서 했던 것을 똑같이 반복해줌 (submit시 브라우저의 기본 동작인 새로고침이 되는 issue) function ..

출처 : https://nomadcoders.co/ Quotes 핵심 : Random 배경화면과 Random 명언을 화면에 표시하는 법을 배운다. 0. quotes.js를 만들어주고 HTML과 연결을 시켜준다. . Random 명언을 화면에 표시하기 1. frontend에서 HTML을 생성한다. 2. quotes.js에서 div랑 span들을 가져온다. // HTML의 quote 아이디를 가진 span의 첫번째와 마지막 자식을 호출 const quote = document.querySelector("#quote span:first-child"); const author = document.querySelector("#quote span:last-child"); 2-1. array에 element들을 입력..

출처 : https://nomadcoders.co/ Intervals 핵심 : intervals과 timeout 기능에 대해 알아본다. . 한 파일에 모든 코드들을 넣는게 아닌 Devide and Conquer 방식으로 예를 들어 clcok.js 에서는 시계 기능만, greetings.js 기능에서는 greeting 기능만 다룸. 이렇게 세분화하여 파일을 관리하면, 코드도 짧아지고, 정리도 쉬워짐. . intervals이란? intervals은 "매번" 일어나야 하는 무언가를 뜻한다. ex) "매 2초"는 interval이다. 즉 매 2초마다 무슨 일이 일어나게 하는 것이 interval이다. ex) 2초마다 주식 시장 확인하는 기능etc... JS에서는 intervals이 이미 저장되어있다. /* se..