목록분류 전체보기 (90)
Land of Joe
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/kAyAi/btsf58ukAtz/RCOLPmdmrbJk8QHMMZwQW1/img.png)
Step1. 현재 위치의 위도, 경도 숫자 얻기 function onGeoOk(position){ const lat = position.coords.latitude; const lng = position.coords.longitude; console.log("You live in ", lat, lng); } function onGeoError(){ alert("Can't find you. No weather for you."); } navigator.geolocation.getCurrentPosition(onGeoOk,onGeoError); Step2. 위도, 경도 숫자를 장소로 바꿔준다 https://openweathermap.org/current Current weather data - OpenWea..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/NHTW7/btsfeBLhTed/O8pe9mYBWLZ3GZ8EYkEek1/img.png)
Step0 ) 기본 설정 // javascript const todoForm = document.querySelector('#todo-form'); const todoList = document.querySelector('#todo-list'); Step1 ) input 태그인 todoForm이 'submit'되었을 때 작동할 'handleTodoSubmit'이라는 함수를 만든다 function handleToDoSubmit(event){ event.preventDefault();//새로고침되지 않게 하기 위해 const newTodo = todoInput.value; todoInput.value=""; //작성 후 엔터 누르면 UI상 input 안이 비어지도록 paintTodo(newTodo); } S..
// html {quote, author}이 '10개' 있는 const quotes 생성 // javascript const quotes = [ { quote: "Go ahead, make my day.", author: "Harry Callahan" }, { quote: "If you want something done right, do it yourself.", author: "Charles-Guillaume Étienne" }, { quote: "May the Force be with you.", author: "Star Wars" }, { quote: "Life is like a box of chocolates. You never know what you’re gonna get.", author:..
00:00:00 // javascript const clock = document.querySelector('h2#clock'); setInterval, setTimeout 활용해서 시계 만들기를 해보자 [JavaScript] setInterval, setTimeout 공부(2) 22.10.05에 썼던 글 https://joeindeu22.tistory.com/entry/setTimeout [JavaScript] setTimeout, setInterval 타이머 설정하기 setTimeout() : 일정 시간이 지나면 코드를 실행해주는 자바스크립트의 기본 함수 setInterval() : 일 joeindeu22.tistory.com 그전에 js에 있는 date 객체를 활용해 현재 시각을 가져올 수 있다 c..
22.10.05에 썼던 글 https://joeindeu22.tistory.com/entry/setTimeout [JavaScript] setTimeout, setInterval 타이머 설정하기 setTimeout() : 일정 시간이 지나면 코드를 실행해주는 자바스크립트의 기본 함수 setInterval() : 일정 시간마다 코드를 실행해주는 자바스크립트의 기본 함수 setTimeout(function(){실행코드}, 시간); setInter joeindeu22.tistory.com [ '일정 시간 간격마다' function 호출하기 ] setInterval( , ) 첫번째 인자: 실행하고자 하는 function 두번째 인자: 호출되는 function을 몇 ms(1s=1000ms) 간격으로 할지 func..
https://ts2ree.tistory.com/122 검색창 만들기 오늘은 위처럼 생긴 검색창을 만들어 볼 것이다. div 태그 안에는 input 태그, img 태그가 들어있다. .search { position: relative; width: 300px; } input { width: 100%; border: 1px solid #bbb; border-radius: 8px; padding: 10px 12p ts2ree.tistory.com
브라우저에 데이터를 저장할 수 있게 하는 기능 https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage Window: localStorage property - Web APIs | MDN The localStorage read-only property of the window interface allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions. developer.mozilla.org localStorage.setItem(key, value); localStorage.setItem("myC..
const food = ['tomato', 'potato']; const [veg1, veg2] = food; // console.log(veg1) ->> tomato // console.log(veg2) ->> potato const [counter, setCounter] = React.useState(0); const onClick = () => { setCounter(counter+1) setCounter((current) => current +1); }; modifier함수를 이용해 state 변경하면 해당 컴포넌트 전체가 재생산(re-render)된다. const [counter, setCounter] = React.useState(); 에서 React.useState() 는 react기능을 ..