훈돌라

과제 해설을 보며 모든 기능을 추가했으나, redux 는 끝내 리팩토링 하지 못했다. 과제를 완성시키지 못하고 제출한건 처음이라 자존감이 많이 떨어지기도 하지만 지금 내가 익힐 수 있는 것들에 집중하려고 한다. 지금까지 구현한것들도 다시 해보라고 하면 버벅거릴 것이 분명하기 때문에.   const filteredExpenses = expense.filter(    (expenses) => expenses.date.split("-")[1] === month  ); 월별 조회 리스트를 구현하며 알게 된 정보 나는 date input type 을 text 가 아닌 date 로 했기 때문에 과제 해설과는 달라 조금 당황을 했었지만, 주위 자문을 구해 해결할 수 있었다. 해결 방법은, date 로 가져온 정보들은..

import { useState } from "react";function App() {  const [email, setEmail] = useState("");  const handleEmailChange = (event) => {    setEmail(event.target.value);  };  const [password, setPassword] = useState("");  const handlePasswordChange = (event) => {    setPassword(event.target.value);  };  const [passwordcheck, setPasswordCheck] = useState("");  const PasswordCheckChange = (event) => {  ..

지출 CRUD 구현 (작성, 조회, 수정, 삭제)월별 지출 조회 기능 구현 (Home - Read)월별 지출 항목 등록 구현 (Home - Create)지출 상세 화면 구현 (Detail - Read)상세화면에서 지출 항목 수정 구현 (Detail - Update)상세화면에서 지출 항목 삭제 구현 (Detail - Delete)  지출 항목 등록, 지출 항목 상세 페이지 까지 구현했고 월별 조회 및 삭제와 수정은 구현하지 못했다. 상세 페이지로 넘어가서 기존 home.jsx 에 있는 데이터들을 가져오는 것만 해도 너무 힘들었다. 아직 프롭스 드릴링, 라우터 돔에 미숙한 것 같고, 이해하기 어렵다..

카운트 앱 숫자 증가, 감소 시키기function App() {  const [count, setCount] = useState(0);  const addCount = () => {    setCount(count + 1);  }  const disCount =() => {    setCount(count -1);  }  return (          Count: {count}      div>      button onClick={addCount}>+button>      button onClick={disCount}>-button>      div>      );}export default App;  다크모드function App() {  const [isDark, setIsDark] = useSt..

const numbers = [1, 2, 3, 4, 5]const double = numbers.map(number => number * 2);console.log(double)const users = [ { name: 'Alice', age: 22 }, { name: 'Bob', age: 24 }, { name: 'Carol', age: 23 } ]const usersName = users.map(user => user.name);console.log(usersName); const users = [ { name: 'Alice', age: 30, city: 'Seoul' }, { name: 'Bob', age: 25, city: 'New York' }, { name: 'Charlie', age: 35,..

import './App.css'import styled from 'styled-components';const StBox = styled.div`  width: 100px;  height: 100px;  border: 1px solid ${(props) => props.borderColor};  margin: 20px;`const boxList = ["red", "green", "blue"];const getBoxName = (color) => {  switch (color) {    case "red":      return "빨간 박스";    case "green":      return "초록 박스";    case "blue":      return "파랑 박스";    default:    ..