반응형 프론트엔드/리액트14 [React] Axios로 Spring과 동기화하는 가이드 Axios를 이용한 Spring Boot와 React 연동 가이드1. Axios란?Axios는 브라우저와 Node.js 환경 모두에서 사용할 수 있는 Promise 기반의 HTTP 클라이언트 라이브러리입니다. 비동기적으로 HTTP 통신을 쉽게 할 수 있도록 도와주며, 대표적인 경쟁 기술로는 JavaScript에 내장된 fetch() API와 jQuery의 ajax()가 있습니다.Axios의 주요 특징자동 JSON 데이터 변환: 요청 시 JavaScript 객체를 자동으로 JSON으로 변환하고, 응답 시 JSON 데이터를 자동으로 JavaScript 객체로 변환해 줍니다. fetch()는 이 과정을 수동(JSON.stringify(), res.json())으로 처리해야 합니다.Promise 기반: asyn.. 2025. 10. 16. [React] 키오스크 미니 프로젝트 피드백 리액트의 라우터(컴포넌트 관리)와 리덕스(전역함수), 퍼시스턴스(스토리지)를 활용하는 실습 중에 AI에게 도움받은 마크다운 파일들입니다. 첫 번째 문제점 : 메뉴페이지에서 함수가 정상 작동하지 않음미니 키오스크 개선 가이드안녕하세요! 미니 키오스크 프로젝트의 장바구니 기능 구현에 어려움을 겪고 계신 부분을 도와드리겠습니다. MenuPage.jsx의 addCart 함수와 cartSlice.jsx의 리듀서 로직을 중심으로 개선 방안을 제안합니다.1. MenuPage.jsx 개선현재 MenuPage.jsx는 useRef와 여러 개의 을 사용하여 클릭된 메뉴를 식별하려고 하고 있어 비효율적이고 정상적으로 작동하지 않습니다. 각 버튼이 클릭될 때 해당 메뉴 정보를 직접 addCart 함수로 넘겨주는 방식으로 간.. 2025. 9. 24. [React] 12장: 최종 프로젝트 - 미니 블로그 만들기 12장: 최종 프로젝트 - 미니 블로그 만들기지금까지 배운 모든 기술(컴포넌트, Props, State, React Router, Zustand)을 총동원하여 간단한 CRUD(Create, Read, Update, Delete) 기능이 있는 블로그 애플리케이션을 만듭니다.1. 프로젝트 개요만들 기능글 목록 보기 (Read): 모든 게시글의 제목을 리스트 형태로 보여줍니다.글 상세 보기 (Read): 특정 게시글의 제목과 내용을 상세하게 보여줍니다.새 글 작성 (Create): 제목과 내용을 입력하여 새로운 글을 추가합니다.글 수정 (Update): 기존 글의 제목과 내용을 수정합니다.글 삭제 (Delete): 특정 글을 삭제합니다.사용할 기술 스택UI: React라우팅: React Router (reac.. 2025. 9. 16. [React] 11장: 전역 상태 관리 (Zustand) - 컴포넌트의 벽 허물기 11장: 전역 상태 관리 (Zustand) - 컴포넌트의 벽 허물기애플리케이션의 규모가 커지면, 여러 컴포넌트가 공유해야 하는 상태(예: 사용자 정보, 테마, 장바구니 등)가 생깁니다. Props drilling 없이 이러한 전역 상태를 효율적으로 관리하는 방법을 배웁니다. 여기서는 간단하고 강력한 라이브러리인 Zustand를 사용합니다.1. 핵심 개념전역 상태(Global State): 여러 컴포넌트가 공통으로 접근하고 수정해야 하는 상태.상태 관리 라이브러리: 전역 상태를 컴포넌트 트리 바깥의 한 곳(스토어)에서 관리하고, 어떤 컴포넌트에서든 쉽게 접근할 수 있도록 도와주는 도구. (예: Redux, Recoil, Zustand 등)Zustand:간단함: 몇 줄의 코드로 스토어를 만들고 바로 사용할 .. 2025. 9. 16. [React] 10장: React Router - 페이지 이동과 목차 만들기 10장: React Router - 페이지 이동과 목차 만들기React는 기본적으로 단일 페이지 애플리케이션(SPA)이므로, 여러 페이지를 가진 것처럼 보이게 하려면 "라우팅" 라이브러리가 필요합니다. 가장 널리 사용되는 react-router-dom을 사용하여 페이지 간 이동을 구현하는 방법을 배웁니다.1. 핵심 개념SPA (Single Page Application): 최초에 하나의 HTML 페이지만 불러오고, 이후에는 서버와 데이터를 교환하며 동적으로 페이지 내용을 갱신하는 방식의 웹 애플리케이션입니다. 페이지를 이동할 때 전체 페이지를 새로고침하지 않아 사용자 경험이 부드럽습니다.react-router-dom: React 기반 SPA를 위한 클라이언트 사이드 라우팅 라이브러리입니다. (npm in.. 2025. 9. 16. [React] 9장: 스타일링 - 컴포넌트에 옷 입히기 9장: 스타일링 - 컴포넌트에 옷 입히기React 컴포넌트의 스타일을 꾸미는 다양한 방법을 배웁니다. 일반 CSS 파일부터, 컴포넌트 스코프를 지원하는 CSS Modules, 그리고 JavaScript 내에서 스타일을 정의하는 CSS-in-JS까지 알아봅니다.1. 핵심 개념일반 CSS 파일 임포트:import './App.css'; 와 같이 CSS 파일을 JavaScript 파일에서 직접 임포트하여 사용합니다.가장 간단한 방법이지만, 클래스 이름이 전역(global)으로 적용되기 때문에 다른 컴포넌트의 스타일과 충돌할 위험이 있습니다. (예: A 컴포넌트의 .title 스타일이 B 컴포넌트의 .title에 영향을 줌)인라인 스타일(Inline Styles):JSX 엘리먼트의 style 속성에 JavaSc.. 2025. 9. 16. 이전 1 2 3 다음 반응형