🎨 디자인 시안 초안으로 받은 디자인을 내 스타일에 맞춰 새롭게 리디자인 했다.리디자인을 하면서 Header, Balance, Add, List 컴포넌트 구성도 나눠봤다.전반적으로 디자인 작업을 먼저 진행한 뒤, 디자인이 완료되면 기능을 구현하는 방식으로 개발을 진행했다.디자인을 구현할 때는 각 컴포넌트의 역할에 따라 border 값을 설정해, 작업 중인 영역을 시각적으로 구분하며 작업을 이어갔다.🧩 주요 컴포넌트 및 코드 설명 1. components/ [컴포넌트 파일들이 들어 있는 폴더 (각 UI 요소를 나눠서 관리)]Add.jsx : 수입/지출 내역을 추가하는 입력 폼 컴포넌트Balance.jsx : 현재 잔액(balance) 을 보여주는 컴포넌트Header.jsx : 프로젝트 이름List.j..

📘 최적화(Optimization)웹 서비스의 성능을 개선하는 모든 행위를 일컫는다.아주 단순한 것부터 아주 어려운 방법까지 다양하다. 일반적인 웹 서비스 최적화 방법서버의 응답 속도 개선이미지, 폰트, 코드 파일 등의 정적 파일 로딩 개선불필요한 네트워크 요청 줄임React App 내부의 최적화 방법컴포넌트 내부의 불필요한 연산방지컴포넌트 내부의 불필요한 함수 재생성 방지컴포넌트의 불필요한 리렌더링 방지

📘 Redux란?JavaScript 애플리케이션의 상태(state)를 관리하기 위한 라이브러리애플리케이션의 상태를 하나의 스토어(store)에서 관리하고, 상태 변경은 액션(action)이라는 이벤트를 통해서만 이루진다.Redux의 핵심 원칙단일 스토어(Single Source of Truth): 애플리케이션의 모든 상태는 하나의 스토어에 저장상태는 읽기 전용(State is Read-Only): 상태를 직접 변경할 수 없으며, 액션을 통해서만 변경 가능변경은 순수 함수로만(Changes are made with Pure Functions): **리듀서(Reducer)**라는 순수 함수가 이전 상태와 액션을 받아 새로운 상태를 반환Redux의 핵심 구성 요소스토어(Store): 애플리케이션의 상태를 보..

React란 무엇인가React는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리이다. Facebook에서 개발하였으며, 컴포넌트 기반 구조와 Virtual DOM 개념을 통해 효율적인 화면 업데이트를 가능하게 한다.React의 핵심 개념컴포넌트(Component)하나의 UI 단위를 뜻한다.함수형 컴포넌트가 주로 사용되며, JSX(JavaScript XML)를 통해 마크업을 작성한다.JSXJavaScript와 HTML을 섞은 문법이다.class 대신 className, for 대신 htmlFor를 사용한다.Props (속성)부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용한다.읽기 전용이다.State (상태)컴포넌트 내부에서 관리하는 값이다.값이 변경되면 컴포넌트가 리렌더링된다..

📘 useReducer컴포넌트 내부에 새로운 State를 생성하는 React Hook모든 useState는 useReducer로 대체 가능 useReducer를 이용하면 어떤 차이점이 있냐?상태 관리 코드를 컴포넌트 외부로 분리 가능 React Components의 주된 역할은 무엇일까요?👨🏻‍🏫 UI를 관리하는 것 ✨ 동작 순서더보기1. 사용하고자 하는 상태관리를 import를 통해서 불러온다.2. 컴포넌트 안에서 변수로 Hook을 불러와준다.3. 컴포넌트 내부에서 dispatch함수를 호출한다.4. UseReducer()가 상태 변화를 실제로 처리하게될 함수를 호출하며 작동한다.5. 처리할 함수를 직접 만들기 🔍 dispatchimport React, { useReducer } from ..

1. 맥북 코드 블럭 스타일로 변경하기블로그 테마 업데이트를 했다!!기존에 코드블럭을 맥북 스타일로 바꿔놨는데 테마를 업데이트하면서 다시 맥북 스타일로 바꿔줘야한다!code.hljs부분을 찾아서 드래그한 부분을 "기존 코드"로 주석 처리 해준다./* 기존 코드 블록 *//* #content .contents_style pre code.hljs { --tw-bg-opacity: 1; background-color: rgb(244 244 246 / var(--tw-bg-opacity))}.dark #content .contents_style pre code.hljs { --tw-bg-opacity: 1; background-color: rgb(41 42 45 / var(--tw-bg-opacity))..

URLURL 객체는 웹 주소(URL)를 파싱하고 조작하기 위한 JavaScript의 내장 APIURL 객체를 사용하면 URL의 각 구성 요소(프로토콜, 호스트, 경로, 쿼리 매개변수 등)에 쉽게 접근하고 수정 가능https://www.example.com:8080/path/to/page?name=value&search=test#section└─┬─┘ └─────┬─────┘ └─┬──┘└─────┬─────┘└───────┬─────────────┘└──┬──┘프로토콜 호스트 포트 경로 쿼리 매개변수 해시(프래그먼트) URLSearchParamsURLSearchParams 객체는 URL의 쿼리 문자열(query string)을 쉽게 처리하기 위한 APIURL의..

🔍 재귀란 무엇인가?자기자신을 호출하는 과정(= 자기자신을 호출하는 함수) 재귀는 스스로를 호출한다. 한가지 문제를 가지고, 어떤 종료점(end point)에 도달할 때까지 더 작은 부분이나 변경되는 부분에서 반복적으로 수행하는 것을 의미한다. 그 종료점을 종료 조건이라고 부른다. 재귀는 무엇인가, 어떻게 유용한지를 정의하는가재귀함수 작성의 두 가지 핵심 구성요소를 이해하자왜 재귀를 알아야하는가? 🤔재귀는 어디에나 있어!JSON.parse / JSON.stringify 사용할 때DOM을 탐색할 때 (getElementById 등)객체 안을 순회할 때복잡한 알고리즘에서 흔하게 사용돼반복문보다 재귀를 사용하는게 코드가 깔끔해지는 경우도 많다😲 자바스크립트에서 함수를 호출할 때 보이지 않는 곳에서 무..

📃CartPage 코드import React, { useState } from 'react'import { useLoaderData } from 'react-router-dom'import css from './CartPage.module.css'import { formmatCurrency } from '@/utils/features'import { updateCartItemCount, removeFromCart } from '@/api/cartApi'const CartPage = () => { const cartList = useLoaderData() const [items, setItems] = useState(Array.isArray(cartList) ? cartList : []) conso..