본문 바로가기

Javascript36

[Vanilla-JS] 1. Project Setup 노마드코더 www.youtube.com/playlist?list=PL7jH19IHhOLNtwXhfYrbrqM6-CYrVkUWy 먼저 깃허브를 새로 생성하자. ※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다. 2020. 8. 9.
[Vanilla-JS] 5. Making a To Do List part One To-do 리스트를 빌드해볼거다. greetings했던것과 비슷하다. todo.js 생성 후 html에 추가해보자. 그리고 toDoList를 입력 할 Form을 만들고, 그 아래에는 입력한 내용을 리스트 형태로 출력하기 위해 ul태그를 생성할거다. 만약에 toDos가 null이면 아무것도 하지 않을거다. 왜냐하면 greeting form과 다르게 이 form은 항상 입력창을 활성화 할것이므로(showing) 여기도 submit 했을 때 문제점을 해결하기 위해 이벤트를 가져올 때 event.preventDefault를 넣어줄거다. 엔터를 누르면 입력칸에 입력 내용이 그대로 남아있는데, 다음 내용을 입력할수있게 엔터를 누르면 공백이 되도록 만들어 줄거다. 이제 ul태그안에 li 를 만들어보자. PaintTo.. 2020. 8. 6.
[Vanilla-JS] 4. Saving the User Name localStorage.setItem() 으로 key와 value를 각각 추가할 수 있다. 저장된 값을 가져올 때는 localStorage.getItem()을 사용한다. 새로고침을 하면 화면에 입력한 User정보가 리셋되는걸 막기위해 localStorage에 정보가 저장되어 있으면, 그 값을 paintGreeting 함수를 통해서 화면에 출력해줄것이다. const form = document.querySelector(".js-form"), input = form.querySelector("input"), //form이 input의 부모이므로 . 붙이지 않고 가져옴 greeting = document.querySelector(".js-greeting"); const USER_LS = "currentUser.. 2020. 8. 6.
[생활코딩] 객체지향 - prototype vs proto 함수란 무엇인가? 함수는 자바스크립트에서 만큼은 독특하다. statememt로 보이지만 사실 객체이다. function Person(){} 과 var Person = new Function(); 은 같다. 객체이니까 때문에 프로퍼티를 가질 수가 있다. Person 객체를 생성하면 Person의 prototype 객체가 생긴다. 서로가 연관되어 있어서 서로를 알고있어야 된다. Person 객체는 내부적으로 프로토타입이라는 프로퍼티가 생기고, 그 프로퍼티는 Person의 프로토타입 객체를 가르킨다. (Person.prototype이 Person's prototype인거다.) Person's prototype 객체도 자신이 Person에 소속되어 있다는것을 표시하기 위해서 어딘가에 기록해야된다. 그래서 con.. 2020. 8. 5.