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. [React] 개발 단계에서 렌더링 두 번 발생 원인 및 방지 방법 (참고:해당 설명은 Vitrual Studio 프로그램 기준으로 설명합니다.) 다들 리액트로 개발하면서, 웹 콘솔창에 이유 없이 두 번의 상태값을 보신 적이 있을 겁니다. 어? 나는 아무것도 안 했는데? 이게 왜 뜨지라는 생각을 하였을 겁니다. 렌더링이 무엇이고, 개발 단계에서 두 번 발생하는지도 알아보겠습니다.목록렌더링이란?렌더링 발생 두 번 그 이유는?렌더링 발생 두 번 방지 1. 렌더링이란?웹 개발 관점에서의 렌더링은 웹 개발에서는 주로 "웹 페이지 UI를 생성"하고 "표시하는 과정"을 "렌더링"이라고 합니다. 사용자가 웹 페이지에 접속하거나 상호작용할 때, 브라우저는 웹 페이지의 구조와 스타일을 기반으로 화면에 내용을 그리는 렌더링 과정을 거칩니다.간다히 말씀드리자면, 우리가 웹 브라우저를 열어 .. 2023. 8. 30. [React] 오디오 이퀄라이저"EQ(Equalizer)"구현하기(@dschoon/react-waves라이브러리) - Vitrual Studio기준 목차 1. 이퀄라이저 (EQ)란?2. 구현 예시.3. React Wave 사용 과정.React Wave 설치.React Wave 컴포넌트 사용. 1. 이퀄라이저 (EQ)란? "EQ"는 "이퀄라이저"의 줄임말로, 음악이나 오디오의 주파수 대역별로 음량을 조절하는 기술입니다. 이를 시각화한 것을 "음악 시각화 EQ"라고 합니다. 주로 음악 시각화 프로그램이나 앱에서 사용되며, 음악의 주파수 구성을 시각적으로 확인하거나 변화를 보여줄 때 활용합니다. 2. 구현 예시 이 프로젝트에서는 React 라이브러리를 사용하여 오디오 주파수를 시각화하는 과정을 구현할 것입니다. 이것은 음악의 주파수 대역을 시각적으로 표현하는 것입니다. 여기서는 DB와의 연동 등 다양한 추가 기능은 고려하지 않습니다. 컴포넌트의 개수는 적.. 2023. 8. 30. 이전 1 다음
