juni

import { useSelector, useDispatch } from "react-redux";import { addNumber, removeNumber } from "./redux/slices/counterSlice";import { useState } from "react";const App = () => {  const [count, setCount] = useState(0);  const counterReducer = useSelector((state) => state.counter);  const dispatch = useDispatch();  return (    div>      {counterReducer.number} br />      input        type="number"..

import { BrowserRouter, Route, Routes } from "react-router-dom";import Home from "./pages/Home";import Detail from "./pages/Detail";import GlobalStyle from "./components/GlobalStyle.jsx";import { AccountBookProvider } from "./context/AccountBookContext.jsx";function App() {  return (    AccountBookProvider>      BrowserRouter>        GlobalStyle />        Routes>          Route path="/" element=..

import { BrowserRouter, Route, Routes } from "react-router-dom";import Home from "./pages/Home";import Detail from "./pages/Detail";import GlobalStyle from "./components/GlobalStyle.jsx";function App() {  return (    BrowserRouter>      GlobalStyle />      Routes>        Route path="/" element={Home />} />        Route path="/detail/:id" element={Detail />} />      Routes>    BrowserRouter>  );}..

import "./App.css";import { BrowserRouter, Route, Routes } from "react-router-dom";import Home from "./pages/Home";import Detail from "./pages/Detail";function App() {  /**   * TODO: 아래와 같은 구조로 컴포넌트를 만들고 Browser Router 설정하세요. UI는 신경쓰지 않습니다. 별도의 Router 컴포넌트 생성 여부는 자유입니다.   * Home 컴포넌트는 컴포넌트를 사용해서 Detail 컴포넌트로 이동하도록 하세요.   * Detail 컴포넌트를 path parameter 로 id 를 받도록 하세요.   * Detail 컴포넌트는 path parame..

// 문자열에서 가장 많이 등장한 문자 찾기// 문제 정의:// 주어진 문자열에서 가장 많이 등장하는 문자를 반환하라. 만약 여러 개라면 그 중 아무거나 반환하라.// 조건:// 대소문자를 구분한다.// 공백도 하나의 문자로 간주한다.// 예시:// 입력: "banana"// 출력: 'a' (혹은 'n')function mostFrequentChar(s) {  // 문자와 갯수를 키:값 으로 저장하기위해 빈 객체 선언  const count = {};  // 가장 큰 값을 저장 할 숫자형 변수 선언  let maxCount = 0;  // 가장 큰 값의 키를 저장 할 문자형 변수 선언  let mostChar = "";  // 입력 받은 문자열의 문자를 활용하기위해 순회  for (let i = 0; i..

// 문제 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 = ..