본문 바로가기

분류 전체보기

 (185)
#7.1 Adding ToDos Log In 00:00:00 ​ const toDoForm = document.getElementById("todo-form"); const toDoInput = toDoForm.querySelector("input"); //document.querySelector("#todo-form input"); const toDoList = document.getElementById("todo-list"); function paintToDo(newTodo){ const li = document.createElement("li"); const span = document.createElement("span"); li.appendChild(span); span.innerText = newTodo; toDoList.a..
#7.0 Setup Log In 00:00:00 ​ const toDoForm = document.getElementById("todo-form"); const toDoInput = toDoForm.querySelector("input"); //document.querySelector("#todo-form input"); const toDoList = document.getElementById("todo-list"); function toDoSubmit(event){ event.preventDefault(); const newTodo = toDoInput.value; toDoInput.value = ""; } toDoForm.addEventListener("submit",toDoSubmit);
리액트 14강 import React from "react";import { BrowserRouter, Routes, Route, Link, useNavigate,} from "react-router-dom";export default function BasicExample() { return ( Home Index //경로가 바뀌면 Routes컴포넌트는 하위에 있는 Route컴포넌트들 중에 하나를 찾음 } /> //찾는 기준은 path가 정확하게 일치하는지를 기준으로 ..
#6.1 Background const images = ["0.jpg","1.jpg","2.jpg"]; //폴더 안에 있는 이미지 이름이랑 똑같게 const chosenImage = images[Math.floor(Math.random()*images.length)]; const bgImage = document.createElement("img"); //img요소 생성 bgImage.src = `img/${chosenImage}`; document.body.appendChild(bgImage) //body에 html추가(가장 뒤에)
#6.0 Quotes 랜덤 명언 불러오기 const quotes = [{ quote:"하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다", author:"사무엘존슨" },{ quote:"삶이 있는 한 희망은 있다", author:"키케로" },{ quote:"언제나 현재에 집중할수 있다면 행복할것이다.", author:"파울로 코엘료" },{ quote:"행복의 문이 하나 닫히면 다른 문이 열린다 그러나 우리는 종종 닫힌 문을 멍하니 바라보다가 우리를 향해 열린 문을 보지 못하게 된다", author:"헬렌켈러" },{ quote:"먼저 자신을 비웃어라. 다른 사람이 당신을 비웃기 전에", author:"엘사 맥스웰" },{ quote:"절대 어제를 후회하지 마라. 인생은 오늘의 나 안에 있고 내일은 스스로 만드는..
리액트 13강 useEffect우리가 호출을 하는 훅이 아닌 자동으로 호출이 되는 훅컴포넌트가 마운트가 되고 dom이 변경 된 다음 렌더링 발생 후 실행됨언제 필요하냐?props 에 속한 값을 컴포넌트의 로컬 변수로 선언API 호출하여 통신을 통해 값을 받아오거나 받은 값을 state에 값을 넣어주나 할 때 사용 서드파티 라이브러리 사용즉, 렌더링이 다 되면 화면에 요소들이 나타나고 그 다음 다시 한번 데이터를 변경할 때 사용하는 것아래 코드에서 제목이 알아서 바뀐다는 것이 핵심 -> 제목은 useeffect에서 바뀌는것import React, { useState, useEffect } from "react";function App() { const [count, setCount] = useState(0); ..
리액트 12강 React HookuseState도 React Hook임기존에 사용하던 클래스 컴포넌트의 여러 기능들을 자연스럽게 함수형 컴포넌트에서 사용하기 위한 장치클래스형 컴포넌트스테이트, 라이프사이클 직접 다룰수 있음진입장벽, 복잡한 코드즉 함수형 컴포넌트가 기존의 클래스형 컴포넌트를 완전히 대체할 수 있도록 하는 기능리액트의 생명주기(Life Cycle)리액트는 컴포넌트가 화면에 렌더링되는 과정을 생명주기를 이용해 관리마운팅 -> DOM에 컴포넌트가 등록되는 과정 컨스트럭터 : 우리가 만드는 컴포넌트가 생겨나는 과정, 함수정의할때의 과정랜더링 : 브라우저의 DOM에 어떤 객체가 들어가서 브라우저 화면에 나타나도록 하는 것업데이팅 -> 등록된 컴포넌트의 내용이 업데이트되는 과정언마운팅 -> DOM에서 사라지는 과..
리액트 11강 onChange가 엘리먼트의 이벤트->이를 함수 onTextChange 에서 e 라는 파라미터로 받아올 수 있고, e.target 은 이벤트가 발생한 DOM 을 가리킴setInputs 부분스프레드를 통해 inputs 객체를 복사한 다음, name 키의 값만 업데이트여러 스테이트를 다루는 경우, 리액트는 기존 state 변수를 대체하기 때문에 다른 state 변수의 손실을 막기 위해 이런 방법을 사용import React, { useState } from "react";function input() { // eslint-disable-next-line react-hooks/rules-of-hooks const [inputs, setInputs] = useState({ subject:..

티스토리툴바