📍Frontend🖋️ReactQuill이란https://quilljs.com/ Quill - Your powerful rich text editorBuilt for Developers Granular access to the editor's content, changes and events through a simple API. Works consistently and deterministically with JSON as both input and output.quilljs.comReact에서 사용하는 글쓰기 에디터 컴포넌트이다. 사용자는 블로그 글을 작성하듯이 텍스트를 입력하거나 이미지를 첨부할 수 있다. QuillEditor.jsx는 Quill이라는 오픈소스 리치 텍스트 에디터를 기반으로 구현된..

MongoDB란?MongoDB는 문서 기반(Document-based) NoSQL 데이터베이스이다. 관계형 데이터베이스(RDBMS)와 달리 테이블과 행 대신 컬렉션과 문서 형태로 데이터를 저장한다.MongoDB의 주요 특징문서 지향적: JSON과 유사한 BSON(Binary JSON) 형식으로 데이터 저장스키마 자유: 미리 정의된 스키마 없이 문서마다 다른 구조 가능분산 확장성: 수평적 확장(Sharding)을 통해 대용량 데이터 처리유연한 쿼리: 강력한 쿼리 기능과 인덱싱 지원높은 가용성: 복제(Replication)을 통한 데이터 백업 및 고가용성몽구스를 이용해 개발을 해보겠다.https://mongoosejs.com/docs/guide.html Mongoose v8.13.3: SchemasIf yo..

🛜 공공데이터 포털 OpenApi 이용하기https://www.data.go.kr/ 공공데이터 포털국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Datasewww.data.go.kr공공데이터 포털도 회원가입을 통해서 원하는 api를 가져올 수 있다. 구현은 어제 만들어놓은 페이지에 공공데이터 api를 추가해서 작업을 하겠다. 이번 실습에서는 한국관광공사 전국 야영장 등록 현황 데이터를 이용했다. 1. 원하는 데이터의 api신청을 한다.2. 홈 > 마이페이지 > 데이터 활용 > Open API > 활용신청 현황일반 인증키(Decoding) 인증키를 복사해서 인증키 설정으..

🔒 .env 파일에서 Key 관리1. .env 파일 생성프로젝트 루트 디렉토리에 .env 파일을 생성VITE_API_KEY=your_api_key_hereVITE_API_URL=https://api.example.com 2. 네이밍 규칙Vite에서 환경 변수를 클라이언트 코드에서 사용하려면 반드시 VITE_ 접두사를 붙여야 한다.VITE_API_KEY=abcdef123456 (O)API_KEY=abcdef123456 (X - 클라이언트 코드에서 접근 불가)3. 환경 별 .env 파일다양한 환경에 따라 다른 .env 파일을 사용할 수 있다..env - 기본 파일, 모든 환경에서 로드.env.local - 로컬 환경 변수, git에서 무시해야 함.env.development - 개발 환경.env.produ..

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

📘 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 (상태)컴포넌트 내부에서 관리하는 값이다.값이 변경되면 컴포넌트가 리렌더링된다..

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

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