juni

// 리액트로 개발한 앱은 컴포넌트라는 조각을 구성됨// -> UI구축을 훨씬 쉽게 만들어줌// 컴포넌트를 생성하고 UI 요소를 컴포넌트 내부에서 JSX통해 선언// -> 리액트가 반응 -> 리액트 컴포넌트가 '선언체'라는 개념이 아주 중요// 리액트에서 랜더링은 현재 props와 state의 상태에 기초하여// UI구성을 어떻게 구성할지 컴포넌트에게 요청하는 작업을 의미// triggering -> rendering -> commit 순으로 진행// 브라우저 랜더링은 다른 프로세스로 페인팅 이라고도 부름   import { useState } from "react";import "./App.css";import TodoList from "./components/TodoList.jsx";import To..

// children : Layout 컴포넌트를 만들 때 주로 사용// layout 컴포넌트는 자식 컴포넌트를 가지는 형태// const User = (props) => {//   console.log("props=>", props);//   return user {props.children};// };// function Layout(props) {//   const children = props.children;//   return (//     //       header//       {children}//       footer//     //   );// }const App = () => {  // return hi;  // return (  //     //     App  //     //..

// 조상 , 부모 , 자식 컴포넌트function App() {  return (    div>      h1>부모-자식 관계 테스트h1>      GrandFather />    div>  );}export default App;function GrandFather() {  return (    div>      p>할아버지p>      Mother />    div>  );}function Mother() {  return (    div>      p>엄마p>      Child />    div>  );}function Child() {  return (    div>      p>자식p>    div>  );} rafce 스니펫 ->import React from 'react'const App..

새로운 Promise를 생성 시 동기적 동작 / Promise 결과에 접근 시 비동기적으로 동작const fetchData = async () => {  let response = await (await fetch("")).json();};// Promise 객체 생성const promise = new Promise((resolve, reject) => {  if (true) {    resolve("성공데이터");  } else {    reject("실패데이터");  }});// Promise에 resolve데이터 접근promise.then((resolve) => {  console.log(resolve);});// Promise에 reject데이터 접근promise.catch((reject) => ..

Attribute 와 Property 차이점Attribute : HTML의 속성 , element에 id / class 와 같은 추가적인 정보 , 정적임Property : DOM의 속성 , 동적임둘이 연결은 되어있지만 Property값을 변경하면 DOM객체만 업데이트 되고 HTML은 업데이트 되지 않아Attribute 값은 그대로임 // Destructuring 구조분해할당// 배열은 위치(index) , 객체는 key가 중요함const person = {  name: "르탄이",  age: 25,  job: "개발자",};const { name, age } = person;console.log(`hi ${name}!, ${age}!!`);const movie = {  title: "inception",..

let , const, var// let const는 블록단위 스코프let blockScopeVariable = "Available only in this block";if (true) {  let blockedScope = "Visible inside this block";  console.log(blockedScope);}// 아래 주석 코드는 스코프 오류로 실행X// console.log(blockedScope)console.log(blockScopeVariable);for (let i = 0; i 3; i++) {  console.log(i);}function testFunction() {  let test = "any words";  if (true) {    test = "changed va..

캡처링 : 이벤트가 상위 요소에서 하위 요소 방향으로 전파되는 과정window -> document -> div(id) -> div(id) -> button(id) 여기서 button에서 이벤트가 발생하면 이 과정이 캡처링 단계 버블링 : 이벤트가 하위 요소에서 상위 요소 방향으로 전파되는 과정button(id) -> div(id) -> div(id) -> document -> window 여기서 button에서 이벤트가 발생하면 window객체까지 전파보통 이벤트 핸들러는 버블링 단계에서 실행 -> 상위 요소에서 하위요소를 한 번에 다룸addEventListener에다가 세번째 인자를 전달하지 않으면 보통 버블링으로 진행됨 ( capture:ture ) -> 캡처링 전환

간단하게 버튼을 눌러 count값을 조정하는 프로그램 작성body {  padding: 20px;}.App {  margin: 0 auto;  width: 400px;}.App > section {  background-color: rgb(245, 245, 245);  border: 1px solid rgb(240, 240, 240);  border-radius: 5px;  padding: 20px;  margin-bottom: 10px;}import "./App.css";import Viewer from "./components/Viewer";import Controller from "./components/Controller";import { useState } from "react";// 카운트 값..