React Context컴포넌트 간의 데이터를 전달하는 또 다른 방법, 기존의 Props가 가지고 있던 단점을 해결할 수 있다. Props는 어떤 단점이 있을까? 🧐Props Drilling Props: 부모 → 자식으로만 데이터 전달 가능데이터를 컴포넌트의 이 계층 구조 상에서 한 단계 아래로 전달하는 것은 문제가 없었다. 그 이유는 앱 컴포넌트와 child 컴포넌트가 현재 부모와 자식 관계를 가지조 있기 때문이다. (데이터를 바로 전달 가능했었음) 그렇다면 컴포넌트의 계층 구조가 두 단계 아래로 전달해야할 때는? App 컴포넌트에서 ChildB 컴포넌트에게 데이터를 전달할때 Props를 이용하면다이렌트로 전달 불가능이다. (Props는 부 → 자만 가능했기에) 이를 해결하기 위해서는 App -데이..

📃index.js.env 환경변수 적용import dotenv from 'dotenv';dotenv.config(); 어제는 PORT, JWT_SECRET, MONGODB_URI, FRONTEND_URL 등이 코드에 하드코딩되어 있었는데, 오늘은 .env 파일에서 값을 불러오도록 개선했다. 그 이유는 보안과 유지보수 측면에서 중요한 개선때문이다. .env에 들어간 내용# 서버 설정PORT=3000NODE_ENV=development# 프론트엔드 도메인FRONTEND_URL=http://localhost:5173# MongoDB 설정MONGODB_URI=mongodb+srv://주소MONGODB_DB_NAME=blog# 인증 관련 설정JWT_SECRET=test1234JWT_EXPIRATION=1hBCR..

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

📘 useMemo"메모이제이션" 기법으로 불필요한 연산을 최적화하는 리액트 훅더보기메모이제이션이란? 📝 기억해두기, 메모해도기🧠 메모이제이션 기법이란? 동일한 연산을 반복적으로 수행해야 될 경우 매번 결과 값을 새롭게 만드는 것이 아니라,최초로 한번 계산할때의 결과 값을 어딘가에 보관해둔 다음 이 연산이 필요해지면 저장된 결과값을 바로 돌려주는 기법 최초로 한번 수행해 연산값을 저장하면 다시 수행할 필요x→ 성능 안나빠진다. useMemo를 사용하면 특정 연산값을 기억해 둘 수 있다. ⚠️ Todo 데이터 분석: filter() 메서드의 효율성과 주의점 import React, { useState } from 'react';const List = ({ todos, onUpdate, onDel..

🛜 공공데이터 포털 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..

📘 최적화(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): 애플리케이션의 상태를 보..