기록하는 개발자

구현할 화면 1. axios로 api의 json을 가져오는 동안 "loading..." 이라는 문구를 띄워준다. 2. json data를 모두 가져오면 영화 목록을 보여준다. import React from "react"; import axios from "axios"; import Movie from "./Movie"; import "./App.css"; class App extends React.Component { state={ isLoading : true, movies:[] }; /*axios는 항상 빠르진 않아서 js에게 componentDidMount 함수가 끝날 때까지 약간 시간이 걸릴 수 있다고 전달해야한다. 이에 getMovies 비동기 함수를 만들어 axios.ge..

component : html을 return하는 함수 react는 component를 사용하여 html처럼 작성하려는 경우에 필요하며, js와 html간의 조합을 jsx 라고 부른다. import React from "react"; import AppNamefrom "./AppName"; function App(){ return ( Hello! ); } export default App; 1. component를 작성할 때마다 React를 import해줘야한다. 그렇지 않으면 react는 jsx가 있는 component의 사용을 이해하지 못한다. → import React from "react"; 2. component 이름은 대문자로 시작해야한다. → appName(x) AppName(o) 3. ind..

react 사용에 필요한 것 - nodeJS, npm, npx, git, code editor - nodeJS 설치 시 npm이 함께 설치된다. (yarn과 npm은 동일한 역할을 수행한다.) - 원하는 code editor 사용 ex) VSCode, Sublime Text, Brackets, Atom, Vim etc.. react를 배우기 전 기본적으로 알아야 할 것 - html, css, vanillaJS 1. npx install > npm install npx -g 2. create app > npx create-react-app ex) npx create-react-app myapp 3. app 실행 > cd myapp > npm start import React from "..

- 주어진 팔레트 내에서 색상을 변경할 수 있다(default : black). - 주어진 range 내에서 브러쉬 크기를 변경할 수 있다(default : 10). - fill 버튼을 누르면 버튼이 paint로 바뀌고, canvas를 클릭하면 배경색이 채워진다. - paint로 바뀐 버튼을 누르면 다시 text가 fill로 바뀌고, canvas에 선을 그릴 수 있다. - clear 버튼을 클릭하면 canvas가 초기화 된다. Fill Clear @import "reset.css"; body{ background-color: #f6f9fc; display: flex; flex-direction: column; align-items : center; padding-top : 30px; } .canvas{ ..

Css 까지 추가하여 첫 js 프로젝트를 마무리 했다. 작년에는 무턱대고 js를 react로 시작해서 정을 못 붙이고 빨리 손을 뗐다. 바닥부터 배우자는 생각으로 서치를 해 본 결과 VanillaJS 로 js 공부를 시작하자는 결론을 내렸다. VanillaJS 강의는 따로 많지 않아 NomadCoding의 무료 강의로 공부를 시작했다. 작년과 같은 상황을 맞이하고 싶지는 않아서 그 날 들은 강의에 대해 스스로 코드 리뷰를 하고 블로그에 정리를 했다. 이 강의는 말 그대로 0부터 시작하는 사람이 들어도 알아들을 수 있도록 쉽게 설명해주기 때문에 그야말로 js 입문에 최적화 된 강의라고 생각했다. 당장은 github.io로 배포해서 볼 수 있도록 해놨다. 앞으로 해야할 일은 Heroku와 같은 무료 배포 서..

- openweathermap으로부터의 api를 통해 오른쪽 상단에 현재 위치, 날씨, 온도를 띄워준다. Log in 00:00:00 // https://openweathermap.org/ 가입 후 개인 api key를 복사해 API_KEY 변수에 저장 const API_KEY = "4b4a6452c8e528ead6fa2fa823527423"; function onGeoOk(position){ const lat=position.coords.latitude; const lon=position.coords.longitude; const url=`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=$..

- 위 스크린샷의 왼쪽 화면에서 체크리스트의 항목을 삭제하면 오른쪽 화면의 localStorage에서도 삭제된다. - 새로고침 실행 시 내가 삭제를 원했던 항목을 아래 스크린샷처럼 오른쪽 화면 및 localStorage 에서 모두 보이지 않도록 조치를 취한다. Log in 00:00:00 const toDoForm = document.getElementById("todo-form"); const toDoList = document.getElementById("todo-list"); const toDoInput = toDoForm.querySelector("input"); let toDos=[]; const TODOS_KEY = "todos"; fu..

Checklist Load 구현 - list를 입력 받아 localStorage에 저장한다. - 새로고침 후에도 localStorage로부터 이전에 저장한 value를 load해서 list를 유지할 수 있다. - 이전 정보 load 후 추가로 list를 입력 받을 때 덮어쓰기 되지 않고 기존 list에 추가되도록 한다. Log in 00:00:00 const toDoForm = document.getElementById("todo-form"); const toDoList = document.getElementById("todo-list"); const toDoInput = toDoForm.querySelector("input"); let toDos=[]; const ..