반응형 전체 글166 [React] 등록 컴포넌트 : 한국어 교육 웹 서비스 '재밌는한국어' 프로젝트 5. 컴포넌트 분석 (2): AdminStudyCreate.jsx이 컴포넌트는 새로운 교육 콘텐츠(장르, 주제, 여러 개의 예문, 파일 등)를 한 번에 등록하기 위한 복잡한 폼(Form) 페이지입니다. 여러 종류의 입력(텍스트, 선택, 파일)과 동적으로 추가/삭제되는 필드들을 관리하는 방법을 보여주는 좋은 예시입니다.5.1. 코드 전문 (주석 포함)// React 훅들을 가져옵니다.import { useEffect, useState } from "react";// React Router와 Redux 훅들을 가져옵니다.import { useNavigate } from "react-router-dom"import { useDispatch, useSelector } from "react-redux"// API.. 2025. 10. 16. [React] 전체 목록 컴포넌트 : 한국어 교육 웹 서비스 '재밌는한국어' 프로젝트 4. 컴포넌트 분석 (1): AdminStudyList.jsx이 컴포넌트는 관리자 페이지의 핵심 기능 중 하나로, 서버에 저장된 모든 교육 데이터(장르, 주제, 예문, 음성)를 불러와 계층 구조(아코디언 UI)로 보여주고, 각 항목을 삭제할 수 있는 기능을 제공합니다.4.1. 코드 전문 (주석 포함)// React에서 필요한 훅(hook)들을 가져옵니다.import { useEffect, useState } from "react"// Redux와 상호작용하기 위한 훅들을 가져옵니다.import { useDispatch, useSelector } from "react-redux";// 페이지 이동을 위한 훅을 가져옵니다.import { useNavigate } from "react-router-dom";/.. 2025. 10. 16. [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. 이전 1 2 3 4 5 6 ··· 21 다음 반응형