juni

// 문제 1: 문자열 내 각 문자의 개수 반환// 문제 정의:// 주어진 문자열에서 각 문자가 몇 번 등장하는지 세어라. 결과는 객체 형태로 반환한다.// 조건:// 대소문자를 구분한다.// 공백도 하나의 문자로 간주한다.// 빈 문자열이 주어질 수도 있다.// 예시:// 입력: "hello world"// 출력: {'h': 1, 'e': 1, 'l': 3, 'o': 2, ' ': 1, 'w': 1, 'r': 1, 'd': 1}// 입력: "hello World"// 출력: {'h': 1, 'e': 1, 'l': 3, 'o': 2, ' ': 1, 'W': 1, 'r': 1, 'd': 1}function countCharacters(s) {  // 결과를 객체 형태로 반환하기 위해 빈 객체 선언  con..

계산기import { useState } from "react";export default function App() {  const [cr, setCr] = useState(0);  const [newNumber, setNewNumber] = useState("");  const addNumber = () => {    if (newNumber === "") {      setNewNumber("");      alert("값을 입력하세요.");      return;    }    setCr(cr + parseInt(newNumber));    setNewNumber("");  };  const subNumber = () => {    if (newNumber === "") {      setNewN..

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

// 리액트로 개발한 앱은 컴포넌트라는 조각을 구성됨// -> 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",..