분류 전체보기90 6. 리액트 영화 앱 만들기 axios를 import한 다음, componentDidMount() 함수에서 axios로 API를 호출하면 된다. axios는 네트워크를 사용해서 느리게 동작하므로 getMovies 함수를 만들고, 그 함수안에서 axios.get()이 실행되로록 만든다. 그리고 async, await를 사용해서 자바스크립트에게 getMovies()함수는 시간이 좀 필요하다는것을 알린다. this.setState에 key:value 와 isLoading의 상태를 업데이트 해준다. 하지만 아직 화면에는 아래와 같은 메시지만 뜰거다. 그 이유는 movies state를 Movie컴포넌트를 통해 화면에 그려야 한다. import React from 'react'; import axios from 'axios'; class A.. 2020. 8. 8. [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. 이전 1 ··· 6 7 8 9 10 11 12 ··· 23 다음
