2025/07/14 2

React 기본 사용법

React의 기본적인 동작 방식, React Router를 이용한 페이지 라우팅, 그리고 Redux Toolkit을 활용한 상태 관리 방법에 대해 상세히 설명합니다. 각 파일이 어떤 역할을 하는지 이해하시면 React 프로젝트의 구조와 흐름을 파악하는 데 도움이 될 것입니다.1. index.js 파일 : React 앱의 시작점index.js는 React 애플리케이션의 가장 첫 번째 진입점입니다. 웹 페이지의 HTML과 React 컴포넌트를 연결하고, 전역적으로 필요한 설정(라우터, 상태 관리 등)을 적용하는 역할을 합니다.import React from 'react'; // React 라이브러리를 가져옵니다. JSX 문법을 사용하기 위해 필수적입니다.import ReactDOM from 'react-do..

AWS EC2에 프론트엔드 배포하기

1단계: build 폴더 내용 확인 및 재업로드 (필요시)build 폴더가 로컬에서 완벽하게 빌드된 상태로 EC2에 전송되었는지 확인하는 것이 중요합니다.로컬에서 build 폴더 재빌드:로컬 컴퓨터에서 프론트엔드 프로젝트 디렉토리로 이동하여 다시 빌드합니다.Bash npm run build# 또는yarn build빌드가 성공적으로 완료되었는지 확인합니다.EC2의 기존 build 폴더 삭제:AWS EC2 인스턴스 터미널에서 front 디렉토리로 이동합니다.Bash cd /home/ec2-user/frontsudo rm -rf build # 기존 build 폴더를 완전히 삭제합니다.build 폴더 재업로드:로컬 컴퓨터에서 새로 빌드된 build 폴더를 EC2 인스턴스의 /home/ec2-user/front/..