본문 바로가기
반응형

분류 전체보기166

[React] 관리자단 슬라이스 : 한국어 교육 웹 서비스 '재밌는한국어' 프로젝트 3. 전역 상태 관리 분석: adminSlice.jsx이 파일은 Redux Toolkit의 createSlice 기능을 사용하여 관리자 페이지에서 공통으로 사용되는 모든 데이터를 관리합니다. 이를 '전역 상태 관리'라고 하며, 여러 컴포넌트가 동일한 데이터에 접근하고 수정할 수 있게 해줍니다.3.1. 코드 전문 (주석 포함)// Redux Toolkit에서 createSlice 함수를 가져옵니다.// createSlice는 리듀서와 액션을 한 번에 만드는 편리한 함수입니다.import { createSlice } from "@reduxjs/toolkit";// [1] 이 슬라이스(slice)에서 관리할 상태의 초기값을 정의합니다.// 앱이 처음 시작될 때 이 값들로 상태가 채워집니다.const initi.. 2025. 10. 16.
[React] API 계층 분석 : 한국어 교육 웹 서비스 '재밌는한국어' 프로젝트 2. API 계층 분석: adminApi.js이 파일은 백엔드 서버와 통신하는 모든 API 요청을 중앙에서 관리하는 역할을 합니다. axios 라이브러리를 사용하여 HTTP 요청을 생성하고, 기능별로 모듈화하여 내보냅니다.2.1. 코드 전문 (주석 포함)// axios 라이브러리를 가져옵니다. HTTP 통신을 쉽게 할 수 있게 도와주는 도구입니다.import axios from "axios";// API 요청의 기본 URL을 상수로 정의합니다. 이렇게 하면 서버 주소가 변경될 때 여기만 수정하면 됩니다.const BASE_URL = "http://localhost:8080/saykorean/admin";// JSON 데이터를 전송하기 위한 axios 인스턴스(객체)를 생성합니다.// 대부분의 텍스트 기반.. 2025. 10. 16.
[React] 프로젝트 구조 : 한국어 교육 웹 서비스 '재밌는한국어' 프로젝트 1. 프로젝트 구조 및 핵심 개념 이해이 문서는 프로젝트의 전반적인 구조와 React, React Router, Redux(Redux Toolkit)의 역할에 대해 설명하여 코드 이해의 기초를 다집니다.1.1. 폴더 및 파일 구조제공된 파일들을 통해 이 프로젝트의 관리자 페이지 구조를 유추할 수 있습니다.src/api/adminApi.js: 관리자 기능과 관련된 모든 서버 API 요청을 모아둔 파일. (백엔드와의 통신 담당)components/AdminNav.jsx: 관리자 페이지에서 공통으로 사용되는 네비게이션 메뉴 컴포넌트.store/adminSlice.jsx: Redux Toolkit을 사용하여 관리자 페이지의 전역 상태(데이터)를 관리하는 파일.adminPages/AdminHome.jsx: 관리자.. 2025. 10. 16.
[MySQL] Alter, 서브쿼리, 트랜잭션, 뷰 개념 및 연습문제 SQL 심화 문법 가이드이 문서는 ALTER, 서브쿼리(Subquery), 트랜잭션(Transaction), 뷰(View) 등 SQL 심화 개념을 다룹니다. 각 주제별로 개념 정리, 예제 코드, 그리고 이해를 돕기 위한 연습문제로 구성되어 있습니다.1. ALTER : 테이블 구조 변경ALTER는 이미 생성된 테이블의 구조를 변경하기 위해 사용하는 DDL(데이터 정의어)입니다.1.1. 개념 정리ADD COLUMN: 새로운 열(필드)을 추가합니다.MODIFY COLUMN: 기존 열의 데이터 타입이나 제약 조건을 수정합니다.CHANGE COLUMN: 기존 열의 이름을 변경하면서 타입도 함께 수정할 수 있습니다.DROP COLUMN: 특정 열을 삭제합니다.ADD/DROP CONSTRAINT: 기본 키(PK), .. 2025. 10. 16.
[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.
[MySQL] 실습 3~5 가이드라인 실습 3: 도서 대출 및 반납 트랜잭션실습 3은 Spring의 @Transactional을 사용하여 여러 SQL 작업을 하나의 트랜잭션으로 묶는 것입니다. Mapper에서는 각 SQL 쿼리를 정의합니다.BookMapper.java (MyBatis Annotation)import org.apache.ibatis.annotations.Mapper;import org.apache.ibatis.annotations.Param;import org.apache.ibatis.annotations.Update;import org.apache.ibatis.annotations.Insert;@Mapperpublic interface BookMapper { // 1. 책 재고 감소 (대출용) @Update("UP.. 2025. 10. 15.
반응형

티스토리툴바