juni

📦src ┣ 📂api ┃ ┗ 📜supabaseClient.js ┣ 📂assets ┃ ┣ 📜back.png ┃ ┣ 📜ddabong.png ┃ ┣ 📜Dragonlogo3.png ┃ ┣ 📜github.png ┃ ┣ 📜loginbtn.png ┃ ┣ 📜nabc.png ┃ ┣ 📜notion.png ┃ ┣ 📜password.png ┃ ┗ 📜seach.png ┣ 📂components ┃ ┣ 📜Footer.jsx ┃ ┗ 📜Header.jsx ┣ 📂layouts ┃ ┣ 📜GlobalStyle.jsx ┃ ┗ 📜Layout.jsx ┣ 📂pages ┃ ┣ 📂AuthPage ┃ ┃ ┗ 📜AuthPage.jsx ┃ ┣ 📂DetailPage ┃ ┃ ┣ 📜DetailPage.jsx ┃ ┃ ┗..

import { createSlice } from "@reduxjs/toolkit";const initMonthData = Array.from({ length: 12 }, (_, i) => ({  id: i + 1,  month: `${i + 1}월`,  texts: [],}));const initialState = {  monthData: initMonthData,  selectedMonth: 1,};const accountBookSlice = createSlice({  initialState,  name: "accountBook",  reducers: {    updatedMonthData: (state, action) => {      const { monthId, text } = action.pa..

📦src ┣ 📂assets ┃ ┗ 📜react.svg ┣ 📂components ┃ ┣ 📜AccountBookForm.jsx ┃ ┣ 📜Box.jsx ┃ ┣ 📜BoxContainer.jsx ┃ ┣ 📜GlobalStyle.jsx ┃ ┗ 📜TextBox.jsx ┣ 📂context ┃ ┗ 📜AccountBookContext.jsx ┣ 📂pages ┃ ┣ 📜Detail.jsx ┃ ┗ 📜Home.jsx ┣ 📂redux ┃ ┣ 📂config ┃ ┃ ┗ 📜configStore.js ┃ ┗ 📂slices ┃ ┃ ┗ 📜accountBookSlice.js ┣ 📜App.jsx ┗ 📜main.jsx import { createSlice } from "@reduxjs/toolkit";const..

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 { 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..