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

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

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

와이어프레임을 만들때부터와이어프레임을 만들때부터 기능 요약을 해야한다.ex) 사용자 입력 필드에 텍스트를 입력하면 상태에 저장됨⬇️컴포넌트 구현에 대한 설명도 하면 좋다.ex) 1. 상태관리사용자가 입력 필드에 텍스트를 입력할 때마다 상태가 업데이트 된다. 📝 유저에게 알림을 줄때는 alert()보단 모달 사용하기⬇️사용자 관점에서 동작 과정도 설명하면 좋다 📃 주요 코드 설명import React, { useState } from 'react'const InputFild = ({ setData }) => { const [inputText, setInputText] = useState('') // 태그들에 이벤트 넣고 함수로 만들어놓기 const inputItem = e => { // 한글..

html 구조도는 html 중요도에 따라 작성하면 된다. section이나 article요소에도 h도 쓰인다.최신 자료가 article영역이거나 banner가 section이면 h가 필요하다.  관공서 사이트가 웹 표준을 잘 지킨다.  이런식으로 화면 구성을 나눌 수 있다.  각각의 필요한 이미지를 개발자 도구를 통해서 다운받으면 된다.png는 배경이 투명한 것을 허용한다.  css는 중요도가 높은 것을 밑에 작성해야된다. cdnjs - The #1 free and open source CDN built to make life easier for developers cdnjs - The #1 free and open source CDN built to make life easier for develope..

자바스크립트초기에는 단순한 연산과 시각적인 효과를 주는 스크립트 언어현재는 웹 어플리케이션에 가장 핵심적인 역할슬랙, 아톰, VScode등을 일렉트론으로 개발(자스로 데스크톱 어플리케이션을 만들 수 있는 프레임워크)페이스북, 디스코드, 페이팔 등등하지만 순수 자바스크립트 만으로는 관리하기 어려움순수자바스크립트 문제 해결위해 프레임워크들 등장프레임워크는 항상 발전하고 새롭게 등장 다양한 프레임워크 리액트 점유율 킹왕짱! 다른 프레임워크의 경우 MVC 아키텍쳐를 사용하고 있음.다른 아키텍쳐와 공통점은 모델과 뷰가 있다는 것.모델은 애플리케이션이 사용하는 데이터를 관리뷰는 사용자에게 보여짐애플리케이션 규모가 크면 복잡해지고 관리를 제대로 하지않으면 성능이저하됨   ⭐ ReactMVC, MVW 등과 다르게 오직..

쇼핑몰 만들기 총 정리!Frontindex.html index.jswindow.onload = async () => { // 1.윈도우가 로드되면 이 싱크가 실행됨 // 2. response는 파싱한 채로 온다. let response = await axios.get('http://localhost:8080/getAllProducts'); console.log(response); // response 객체에 들어온 데이터를 확인하기 위해 console.log()사용 let productList = response.data; // 서버 응답 데이터 추출 let productListDiv = ``; // HTML 요소를 담을 변수로 사용 productList.forEach((item) => { ..

중요 정보 처리하기보안 파일을 만들때 이름을 오히려 평범하게 하는 것이 좋다. url에 구조/기능/기술/data가 노출되기에  보안은 정석이 있으면 안된다! 왜? 뚫릴 수 있다.🛒 ProductDao.java 상품 데이터베이스 처리데이터베이스에서 상품 목록을 가져오는 역할package com.shop.cafe.dao; // 이 파일이 'com.shop.cafe.dao'라는 그룹(패키지)에 속해 있어import java.sql.*;import java.util.*;import org.springframework.beans.factory.annotation.Value;import org.springframework.stereotype.Component;import com.shop.cafe.dto.Produ..

select country from customers; -- 모든 나라 나옴          distinct 중복없이 select를 해라 select country from customers; -- 모든 나라 나옴select distinct country from customers; -- 나라 중복 삭제select count(distinct country) from customers; -- 집게 함수select count(*) from (select distinct country from customers) as c; -- 괄호 안은 sub queryselect * from customerswhere country = 'mexico';select * from customerswhere customerid..