React6 [트러블 슈팅]Vite + React 프로젝트를 GitHub Pages에 배포했는데 흰 화면만 나오는 문제 [문제사항]Vite + React로 만든 프로젝트를 GitHub Pages에 올렸는데, 로컬에서는 npm run dev로 잘 실행되는데 정작 깃 페이지 주소 URL에 들어가면 배경이 흰 화면만 나오는 문제가 발생했다.빌드도 에러 없이 끝났고, GitHub Pages 설정도 main 브랜치로 되어 있었는데 페이지에 들어가면 제목만 나오고 아무 내용도 안 보였다. 원인 분석 처음엔 “빌드가 잘못된 건가?” 하고 생각했지만,Vite 프로젝트는 로컬(localhost:3000)에서는 기본 경로(/) 기준으로 파일을 불러온다.하지만 GitHub Pages는 리포지터리 이름이 포함된 하위 경로(/@@@_Dev/) 에서 페이지를 호스팅한다. 즉,로컬 실행 시 http://localhost:3000/ GitHub P.. 2025. 10. 18. [React] 나만 기억하고 싶은 용어 정리 State리액트 컴포넌트 내부에서 관리되는 상태로, 값이 변경되면 해당 컴포넌트가 다시 렌더링됨Props상위(부모) 컴포넌트에서 하위(자식) 컴포넌트로 전달되는 읽기 전용 데이터Context여러 컴포넌트가 전역적으로 데이터를 공유할 수 있게 하는 React의 기능 (useContext, Context.Provider 등 사용)JSX자바스크립트에 XML 문법을 결합한 문법 확장으로, React.createElement()로 변환되어 실제 DOM 생성에 사용됨useState함수형 컴포넌트에서 상태를 선언하고 사용할 수 있게 해주는 리액트 훅(Hook)useEffect컴포넌트가 렌더링된 후 실행되는 부수 효과(side effect)를 처리하기 위한 리액트 훅타입 추론타입스크립트가 코드에서 변수의 타입을 명시하.. 2025. 6. 19. [React] React 상태 관리 Hook 정리 1. useStateuseState는 가장 기본적인 상태 관리 Hook으로, 컴포넌트 내에서 상태를 저장하고 업데이트하는 데 사용됩니다.import { useState } from "react";const MemoPad = () => { const [count, setCount] = useState(0); return ( Count: {count} setCount(count + 1)}>카운트 );};export default MemoPad;2. useEffectuseEffect는 컴포넌트가 렌더링될 때 특정 로직을 실행하고자 할 때 사용됩니다. 예를 들면 API 호출, 구독(subscription), DOM 업데이트 등의 작업이 가능합니다.import { useSt.. 2025. 3. 4. [React] JavaScript와 Express의 웹 서버 구축 및 get, post방식의 통신(VScode) JavaScript와 Express를 사용하여 웹 서버를 구축하고, React와의 통신을 통해 GET과 POST 요청을 처리하는 방법입니다.해당 프로젝트는 웹 서버와 클라이언트(React)를 분리하여 구성하며, 각 요청에 대한 응답 처리를 구축합니다.1. 프로젝트 설정먼저, Express 모듈을 사용하여 서버를 만들고 React 클라이언트와 통신할 준비를 합니다.const express = require('express'); const app = express(); const port = 3000; const path = require('path'); const cors = require('cors'); // CORS 정책을 해결하기 위한 패키지app.use(cors()); //cors활성화express.. 2024. 9. 27. 이전 1 2 다음
