목록전체 글 (146)
게으른개발너D
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/R0Ell/btspYeZX4YZ/SMuYvvVeHll0RKIP48Tphk/img.jpg)
✨ Dead Zone ✨ var을 이용해서 이렇게 작성해 보자 console.log(myName); var myName = 'Hwayeon'; // undefined hoisting은 JS가 프로그램을 실행하기 전에 얘네들을 어딘가로 이동시킨다는 것이다. 무조건 위에서 아래로 이동하는 것이 아니라, 이런 것들을 가지고 가서 어딘가로 옮겨주는 것이다. hoisted의 뜻은 프로그램이 시작될 때 variable들이 미리 top으로 끌어올려지는 것이다. var myName; console.log(myName); myName = 'Hwayeon'; // undefined 이런 경우는 원래 에러를 내야한다. 만약 let으로 바꾼다면 console.log(myName); let myName = 'Hwayeon'; ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cbcGru/btrZcmklzl7/GxEaPQXUF7Hrtb9B5EkhtK/img.png)
Canvas Events 캔버스에 발생하는 이벤트를 세팅해 주려고 한다. 1. mousemove 캔버스 안에서 마우스를 움직였을 때 스크립트에서 감지를 해야 한다. 먼저 캔버스를 불러오자. const canvas = document.getElementById("jsCanvas"); function onMouseMove(event) { console.log(event); } if(canvas) { canvas.addEventListener("mousemove", onMouseMove); } 캔버스 안에서 마우스를 움직였을 때 onMouseMove라는 함수가 작동하게 만들었다. console에서 해당 이벤트를 들여다보면 이렇게 나온다. 마우스를 캔버스 바깥에서 움직이면 아무것도 찍히지 않지만 캔버스 안에..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/ckwfB1/btrZhRKymvh/eAK6Aa6Vd0g6djGCBcVl31/img.png)
모든 브라우저에서 스타일을 동일하게 적용할 수 있도록 reset.css를 가져온다. https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter meyerweb.com 코드를 모두 복사하여 reset..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bh8wjD/btspXkMV1qv/QWYcCie4c5aNjRmtDzfsf0/img.jpg)
1. typescript https://www.typescriptlang.org/ JavaScript With Syntax For Types. TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes before you even run your code. www.typescriptlang.org typescript가 포함된 react 앱을 만들려면 npx create-react-app 앱이름 --template typescript 또는 이미 react 프로젝트를 생성하였다면 npm insta..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/V6J7x/btrYV9rYDK1/tHSAoyndG00jgcIIrft1ek/img.png)
꿀잼!!! 전공자든 비전공자든 가볍고 재미있게 읽을 수 있는 책! 거의 반틈까지 읽었는데 원래 알던 지식도, 몰랐던 지식도 매우 쉽고 재미있게 풀어놨다 컬러에 그림까지 있고 구어체도 되어있어서 개인적으로 읽기도 편함! 완독까지 홧팅!!
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/vv02q/btrZa2kqBgY/hqwhikFpfowHsbU5QKfch1/img.jpg)
IT계열 책 중에서 그나마 읽을만함ㅎㅎㅎㅎ 겨우 반틈 읽음ㅠㅠ 솔직히 요런 책들은 약간 전공서적 읽는 느낌이다 예제가 있는 경우도 있고 전공서는 시험기간에만 보고ㅋㅋㅋ 시험기간은 잠이 오고.. ㅠㅠ 아무래도 IT 용어가 쓰이다 보니 읽다보면 잠이 솔솔 완독까지 홧팅!!
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/byKZiG/btrZbq6oQMA/871VkPcMWs4zDbUVYlkbZ0/img.png)
지금까지 만들었던 Momentum App을 CSS로 꾸몄다. 중앙엔 시간과 이름을, 왼쪽 위엔 날씨정보를, 오른쪽 위엔 to do list를 작성할 수 있게 만들었고. 아래쪽엔 명언이 나오게 했고 마우스 hover 하면 아래에 author가 나오게 만들었다. 페이지 새로고침을 하면 배경화면과 아래의 명언이 새로운 것으로 교체된다. 이름 입력 후 로그인을 하고 to do list를 작성하면 다음과 같이 나타난다. 삭제버튼은 css로 checkbox처럼 만들었고, 그걸 클릭하면 체크 처리된 후 사라진다. JS 코드도 몇몇개는 바꾸었는데 날씨 API 사용하는 부분에서 특정 날씨가 나오면 그 날씨를 글자로 보여주는게 아니라 className으로 박아서 css로 해당 날씨에 대한 그림을 보여주도록 변경했다..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Ao1WC/btrZbrjT4SO/P6oSi5kqDKEhnMFJDt8ep0/img.png)
Geolocation 이제 내 Momentum App에 현재 날씨를 추가해주고싶다. 날씨를 추가하기 위해선 현재 사용자의 위치 정보가 필요하다. 그건 navigator.geolocation로 알 수 있다. navigator.geolocation.getCurrentPosition(함수1, 함수2); getCurrentPosition function을 호출하면 되는데, 첫번째 파라미터엔 함수 호출이 성공했을 때, 두번째 파람엔 함수 호출에 실패했을 때 보여줄 이벤트를 집어넣으면 된다. function onGeoSuccess(position) { console.log(position); } function onGeoError() { alert("Can't find you. No weather for you."..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/byIcMR/btrYVgxY6Zm/3bNKXyLK4HwJg6Ft8tf6g1/img.png)
Adding to dos const toDoForm = document.querySelector("#todo-form"); const toDoInput = toDoForm.querySelector("input"); const toDoList = document.querySelector("#todo-list"); /** * 작성한 내용을 li 태그에 담아서 화면에 출력한다. * @param {*} newTodo */ function paintToDo(newTodo) { const li = document.createElement("li"); const span = document.createElement("span"); li.appendChild(span); span.innerText = newTodo; ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Gvtap/btrYY7tIet5/il34DP0QeoowHltC57qroK/img.png)
Quotes 명언을 랜덤으로 보여주기위해 일단 명언 11가지를 Array와 Object로 구현했다. const quotes = [ { quote: "Be yourself; everyone else is already taken.", author: "Oscar Wilde" }, { quote: "A room without books is like a body without a soul.", author: "Marcus Tullius Cicero" }, { quote: "Without music, life would be a mistake.", author: "Friedrich Nietzsche" }, { quote: "You know you're in love when you can't fall aslee..