본문 바로가기
반응형

프로젝트8

AWS Spring/React/Next.js/React Native 배포 가이드 (A to Z) AWS Spring/React/Next.js/React Native 배포 가이드 (A to Z)이 문서는 다양한 유형의 애플리케이션을 AWS(Amazon Web Services)에 배포하는 전체적인 과정을 안내합니다. 각 프로젝트의 특성에 맞는 최적의 배포 전략을 A부터 Z까지 상세히 다룹니다.목차사전 준비 사항AWS 계정 생성AWS CLI 설치 및 구성각 프로젝트별 빌드 도구 준비 (JDK, Node.js, etc.)Part 1: Spring Boot 프로젝트 배포Option A: AWS Elastic Beanstalk (가장 쉬운 방법)RDS (데이터베이스) 연동 포함Option B: Amazon EC2 + Docker (유연한 방법)ECR (컨테이너 레지스트리) 사용Nginx (리버스 프록시) 설정.. 2025. 11. 21.
[React] 기타 컴포넌트 : 한국어 교육 웹 서비스 '재밌는한국어' 프로젝트 7. 기타 컴포넌트 및 라우팅 분석이 문서는 관리자 페이지의 시작점 역할을 하는 AdminHome.jsx와 공통 네비게이션 메뉴인 AdminNav.jsx를 분석하고, 이 컴포넌트들이 react-router-dom을 통해 어떻게 연결되는지 설명합니다.7.1. AdminHome.jsx: 관리자 홈 페이지이 컴포넌트는 관리자가 로그인 후 처음 마주하는 대시보드 페이지입니다. 주요 기능으로 바로 갈 수 있는 버튼들을 제공합니다.코드 전문 (주석 포함)// react-router-dom에서 useNavigate 훅을 가져옵니다.import { useNavigate } from "react-router-dom"export default function AdminHome(props) { // useNavigat.. 2025. 10. 16.
[React] 수정 컴포넌트 : 한국어 교육 웹 서비스 '재밌는한국어' 프로젝트 6. 컴포넌트 분석 (3): AdminStudyEdit.jsx이 컴포넌트는 AdminStudyCreate의 확장판으로, 기존 교육 콘텐츠를 수정하는 기능을 담당합니다. 새로운 데이터를 입력받는 것뿐만 아니라, 기존 데이터를 불러와서 보여주고, 개별 항목을 수정, 추가, 삭제하는 훨씬 복잡한 로직을 포함하고 있습니다.6.1. 코드 전문 (주석 포함)// 필요한 훅과 API, Redux 액션들을 모두 가져옵니다.import { useDispatch, useSelector } from "react-redux";import { useNavigate, useParams } from "react-router-dom"import { genreApi, studyApi, examApi, audioApi } from "... 2025. 10. 16.
[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.
반응형

티스토리툴바