HappyTomatoLife

#3 State 준비물 #3.0 Understanding State step 1. 바인딩 Total click : {counter} Click me step 2. UI 업데이트 function render(){ ReactDOM.render(, root);// 페이지에 위치시키기 } React.JS는 딱 변경된 부분만 업데이트된다. => 이걸 이용해서 인터렉티브한 웹을 만들 수 있다. #3.1 setState part One 1. 컴포넌트를 추가하고 싶을 때 {} 안에 넣으면 됨 2. UI를 업데이트하고 싶다면, render()를 호출할 것 리랜더링을 하는 더 효율적인 방식이 있을까? 어디에 데이터를 받을 수 있을까? 리액트 js에는 적절한 툴이 있음. const data = React.useState()..

#3.0 Understanding State React.js의 state : 데이터가 저장되는 곳 예시를 전체 구현하려면, state를 이용해주어야 한다. JSX React Element를 함수 안에 넣으면, 원하는 만큼 사용할 수 있다. 재활용 가능함. 함수라서 ㄷㄷ - 최고는 아닌 FM 방식 리액트에서는 중괄호를 열고 변수 이름을 넣어주면 된다. 변수들을 연결해줄 수 있음 => React.js는 바뀐 부분만 업데이트해준다. => 인터렉티브한 어플리케이션을 만들기 좋은 특성 #3.1 setState part one - 중괄호로 변수 연결해줄 수 있다. - ui 업데이트 하고 싶으면, render를 해주면 됨 - 랜더링하더라도 바뀐 부분만 새로 생성해주어서 인터렉티브한 어플리케이션을 개발하기 좋음- 데이..

#2.0 Introduction ReactJS는 어떤 문제를 해결하기 위해 만들어졌는가? ReactJS는 UI를 interactive하게 만들어준다. - 예를 들기 위해 바닐라JS를 이용한 프로그램을 만들 것 - ReactJS는 매우매우매우 간단해짐 #2.1 Before React 바닐라JS 어플리케이션을 만들어보자. 버튼을 몇 번 클릭했는지 확인해준다. Total clicks : 0 Click me - html 생성 - javascript로 듣기 - html에 반영해주기 이걸 리액트로는 안 해도 된다. #2.2 Our First React Element React.. 설치 없이 불러오면 되는 거였다 ㄷㄷ => React 의 규칙 1. html 코드를 직접 작성하지 않는다. - 리액트는 어플리케이션을 i..

=> ReactJS를 배우는 건 최고의 투자!! #1.2 Why React 시간이 가장 중요한 자원 - 누가 그 기술을 사용하는지 - 얼마나 중요한 것인지 등등 44%가 ReactJS 사용함 그리고 매우 중요한 툴이다. ReactJS는 그냥 JavaScript 기본이기 때문에 커뮤니티가 매우 크다 기술에 대한 에코시스템이 있어야 한다. #1.3 Requirements 바닐라 JS는 무조건 들었어야 함 ReactJS 입문자를 위한 강의임

#8.0 Geolocation function onGeoOk(position){ const lat = position.coords.latitude; const lng = position.coords.longitude; alert("you live it" + lat+ lng); } function onGeoError(){ alert("can't find you."); } navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError); #8.1 Weather API const weather = document.querySelector("#weather span:first-child"); const city = document.querySelector("#wea..

#7.0 Setup 7분 => 투두리스트 폼 00:00 Hi Go to my blog step 1. todo.js // grab html id const toDoForm=document.getElementById("todo-form"); const toDoInput = toDoForm.querySelector("input"); const toDoList = document.getElementById("todo-list"); // handle to do submit // submit 함수의 기본 동작인 새로고침을 막음 function handleToDoSubmit(event){ event.preventDefault(); const netTodo = toDoInput.value; // 새로운 변수에 값을 복..

#6.0 Quotes 10분 const quotes = [ { quote: "The way to get started is to quit talking and begin doing.", author: "Walt Disney", }, { quote: "Life is what happens when you're busy making other plans.", author: "John Lennon", }, { quote: "The world is a book and those who do not travel read only one page.", author: "Saint Augustine", }, { quote: "Life is either a daring adventure or nothing at all...

#5.0 Intervals 5분 심플한 작업임 h1 #clock을 받아와서 text를 변경해주면 됨 => function을 5초마다 실행시키는 것 * interval 매 interval 마다 실행시키고 싶을 때 사용하는 개념 setInterval를 이용한다. setInterval(function, milliseconds); // interval function sayHello(){ console.log("hello"); } setInterval(sayHello, 5000); #5.1 Timeouts and Dates 8분 * timeout 개념 => 잠시 기다렸다가 한 번만 실행시키는 것 setTimeout(function, milliseconds); * Date object를 활용해서 시각을 나타낸다...

이제 애플리케이션 빌드를 시작한다. #4.0 Input Values Log In 03:36 보던 중 const loginForm = document.querySelector("#login-form"); const loginInput = loginForm.querySelector("input"); const loginButton = loginForm.querySelector("button"); 이건 아래 코드랑 동일함 const loginInput = loginForm.querySelector("#login-form input"); const loginButton = loginForm.querySelector("#login-form button"); user가 버튼을 클릭하는 걸 감지하는 방식 = clic..

#3.0 The Document Object document는 브라우저에 이미 있는 객체 HTML을 가리키는 객체다. 자바스크립트 document 객체를 이용해서 html에 접근할 수 있다. (ex - Title) document.title 접근할 뿐만 아니라 수정도 가능함 document.title JavaScript는 이미 HTML에 연결되어있음. 특히 document 객체를 이용할 수 있음. #3.1 HTML in JavaScript document의 객체와 element를 가져오는 함수를 이용해서 html에 접근할 수 있다. Grab me! body에 Grab me라는 문구를 추가해주었다. JavaScript를 이용해서 이 h1 문구에 접근해보자. document.getElementById("ti..