Today Hailie Learned

항상 컴퓨터로만 코드를 짜보다가 문득 자기 전에 생각난 코드가 있다면 여러분들은 어떻게 하시나요? 메모장에 저장해두고 컴퓨터 앞에 앉으면 그때 가서 실현해본다. 그냥 기억만 잘 하려고 노력한다. ...!! 해보고 싶어서 안달난다. 저 같은 경우에는 시작한지 얼마안되기도 하고, 지금 쉽고 재밌는걸 배워서 그런지 1번인 상태입니다. 그래서 이리저리 검색하다가 핸드폰으로 코딩할 수 있는 사이트를 발견해서 공유하고자 합니다. https://codepen.io/pen/?editors=0011 Create a New Pen ... codepen.io 이 사이트는 로그인할 필요없이 바로 사용가능합니다! 저는 현재 할 줄 아는 언어가 자바스크립트인데 자바스크립도 문제없이 잘 구현됩니다. 다음으로 소개할 사이트는 vis..

DOM 이벤트 참조 사이트! https://developer.mozilla.org/ko/docs/Web/Events 이벤트 참조 | MDN DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가 developer.mozilla.org Mouse event의 종류는 위와 같다. (출처: https://developer.mozilla.org/en-US/docs/Web/Events#Mouse_events) auxclick: 이 이벤트는 마우스 왼쪽버튼을 제외한 다른 버튼을 클릭했을 때 작동한다. 오른쪽 버튼, 휠버튼, 다른 매크로 버튼 등이 이 이벤트를 작동시킨다. clic..

스파르타 코딩클럽에서 진행하는 무료 강의인 "1시간만에 끝내는 직장인 코딩용어 해설"를 듣고 내용을 정리했습니다. 다음 수업을 어떤 것을 들어야할지 정리하던 중에 스파르타 코딩클럽에 접속하게 되었고, 무료 수업이라서 간단하게 회원가입을 하고 강의를 들었습니다. 총 1시간 가량의 강의이고, 저는 내용을 정리하면서 들어서 시간은 좀 더 걸렸습니다. 비전공자인 제가 대략적인 용어에 대해 알 수 있어서 정말 좋았고, 무엇보다 지루하지 않고 빨리빨리 진행되서 좋았습니다. 아이티 회사에 재직하고 있거나, 개발자와 소통이 많으신 분들도 들으면 좋을 것 같습니다. 귀여운 그림과 함께해서 좋았어요! ㅎㅎ 총 8개의 강의이고, 부담없는 시간이라서 출퇴근할 때 들으면 좋을 것 같습니다. 컴퓨터와 인터넷 컴퓨터는 기본적으로 ..

navigator.geolocation.getCurrentPosition() user의 위치(geolocation)를 켜준다. 성공했을 때 실행될 함수 에러가 발생했을 때 실행될 함수 API 란? application programming interface 프로그램들이 서로 소통하는 방법 / 코드들끼리 서로 소통하기 위해 만들어진 것 공공 API 날씨 API 각 어플들의 API 과거 날씨 API 공기 오염 API API 는 데이터, 서버를 가지고 있는 사람들이 원하는대로 디자인할 수 있다. 그래서 어떤 API는 접근권한이 정해져있다. 가끔은 API 사용에 제약이 있거나, 사용하기 위해 지불해야할때도 있다. web API = 브라우저를 위해 만든 API. ex) 구글 크롬, 파이어폭스 등등 https://..

const toDoForm = document.getElementById("todo-form"); const toDoInput = toDoForm.querySelector("input"); const toDoList = document.getElementById("todo-list"); const TODOS_KEY = "toDos"; const toDos = []; function saveToDos (){ localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)); } function deleteToDo (event){ const li = event.target.parentElement; // 우리가 삭제하고 싶은 내용 li.remove(); } function p..

to do list 만들기 const toDoForm = document.getElementById("todo-form"); const toDoInput = toDoForm.querySelector("input"); const toDoList = document.getElementById("todo-list"); function handleToDoSubmit (event){ event.preventDefault(); const newToDo = toDoInput.value; toDoInput.value = ""; } toDoForm.addEventListener("submit",handleToDoSubmit); const toDoInput = toDoForm.querySelector("input"); /..

노마드코더 크롬 앱 만들기 클론코딩 강의를 보다가 궁금증이 생겨서 하는 정리글입니다. 처음에 배울 때 const로 변수를 생성하면 후에 값을 update할 수 없다고 배웠습니다. 그런데 강의 중간중간에 const로 변수를 선언하고도 push 함수로 array에 추가를 하는데요! 이유는 아래와 같습니다. 어레이나 오브젝트 자료형은 const로 선언해도 내부의 값을 할당하는것은 할 수 있습니다. Ex) const arr = ["a","b","c"]; arr.push("d"); // arr = ["a","b","c","d"] 그러나 arr = { name : "Kim" } 같이 자료형 자체를 새로 할당하는것은 const 특성상 되지 않습니다. 더 자세한 설명 👇 원시 자료형(primitive type)과 참조..

* quotes 함수는 배열이다! * 쉼표를 조심하자! Math 객체 기능 (Math Module) Math module은 JS에서 이미 load돼서 공짜로 제공되고 있다. ex) Math.PI Math.random()은 0부터 1 사이의 랜덤한 숫자를 제공한다. 응용도 가능!! Math.random() * 10 0.0 2 내림 해서 정수만 보여준다. 숫자를 바닥(floor)까지 내려준다. [1,2,3,4,5] 이렇게 생긴 array가 있을 때, Array.length를 사용하면 Array의 길이를 반환해준다. createElement("") 를 사용하자. 예를 들어, document.createElement("img")일 경우 html 내에 img 태그를 생성 const images = ["0.JPG"..

한 주동안 들었던 수업을 복습하면서 이해가 되지 않았던 return에 대해 공부하는 시간을 가졌다. 사실 공부를 했지만 100% 이해를 한게 아니라서 지금 적는 내용 중에도 미흡한 점이 있을 수도 있다. 나중에 내가 이 포스팅을 보고서 수정할 사항이 있다면 수정해서 재 업로드 할 예정이다..! 미래의 헬리야 실력아 쑥쑥 올라라!! return 이란 1. return은 말그대로 돌려준다는 의미. 내가 설정한 값을 결과값으로 돌려준다는 말입니다 2. return 뒤에오는 함수들은 즉시 종료가 됩니다. "dead code" 리턴값은 함수를 실행시킨 곳으로 돌려준다 그리고 함수가 끝까지 실행되지 않고 리턴하는 지점에서 끝난다. hello라는 function을 실행하는데 number1, number2를 넣어봐. ..

const clock = document.querySelector("h2#clock"); const clock = document.querySelector("#clock"); const clock = document.getElementById("clock"); 모두 같다. 시계 만들기 default 값으로 00시00분 만들기 = 매번 일어나야 하는 무언가. ex) 매 주, 매 2초 등등 function sayhello() { console.log("hello"); } setInterval(sayhello, 5000); => sayhello 라는 function에 실현시키고자 하는 함수를 쓴다. 나는 이 함수를 매 2초마다 실행하고 싶어. setInterval() => 두 개의 argument를 받는다. ..