📌Vite로 리액트 앱 배포시 404에러와 함께 빈 화면만 뜨는 문제 해결

📌Vite로 리액트 앱 배포시 404에러와 함께 빈 화면만 뜨는 문제 해결

로컬에서는 잘만 열리는 사이트가 배포했더니 빈화면만 나왔다....!분명 저번 미니 프로젝트때도 똑같이 Vite로 리액트 앱을 배포했으나 문제없던 것 같은데(아닌가?ㅎㅎ;;), 무슨 차이가 있는지를 정확히 모르겠다. 달랐던 점은 정상적으로 됐던 때:1. 최상위 폴더 아래 동일한 이름의 새로운 폴더 안에서부터 npm create vite를 시작했다.2. 원격 저장소를 먼저 생성한 후 첫 커밋은 직접 파일을 업로드하고 중간부터 github desktop에 올려서 빌드했다. 에러가 뜬 이번의 경우:1. 최상위 폴더 바로 아래부터 npm create vite를 통해 앱 생성1. 원격 저장소를 visual studio에서 그냥 바로 생성 Vite로 만든 리액트 앱을 GitHub Pages에 배포했을 때 404 에러..

  • format_list_bulleted Study Notes/React
  • · 2025. 4. 10.
  • textsms
[React] 라이프 사이클과 useEffect

[React] 라이프 사이클과 useEffect

리액트 컴포넌트의 라이프사이클 리액트 컴포넌트 라이프사이클 Mount컴포넌트가 탄생하는 순간화면에 처음 렌더링 되는 순간"A 컴포넌트가 Mount 되었다!" == A 컴포넌트가 화면에 처음으로 렌더링 되었다. Update컴포넌트가 다시 렌더링 되는 순간리렌더링 될 때를 의미"A 컴포넌트가 Update 되었다!" == A 컴포넌트가 렌더링 되었다. UnMount컴포넌트가 화면에서 사라지는 순간렌더링에서 제외 되는 순간을 의"A 컴포넌트가 UnMount 되었다!" == A 컴포넌트가 화면에서 사라졌다. 라이프사이클 제어컴포넌트의 라이프 사이클 단계별로 컴포넌트들이 각각 다른 작업을 하도록 하게 하는 것→ useEffect훅을 통해 손쉽게 구현 가능 useEffect useEffect리액트 컴포넌트의 사..

  • format_list_bulleted Study Notes/React
  • · 2025. 4. 9.
  • textsms
[React] CSS를 적용하는 다양한 방법

[React] CSS를 적용하는 다양한 방법

1. 전역 CSS 적용하는 방법// main.js 또는 App.js에서import './styles.css';function App() { return 전역 스타일 적용됨;} 2. 컴포넌트에만 CSS 적용하는 방법① CSS Modules 사용파일명을 [컴포넌트이름].module.css 형식으로 저장하고 사용 /* Button.module.css */.button { padding: 8px 16px; background-color: blue; color: white;}// Button.jsximport styles from './Button.module.css';function Button() { return 클릭;} ② Styled-components 사용 CSS-in-JS 방식으로, 컴포넌트와..

  • format_list_bulleted Study Notes/React
  • · 2025. 4. 8.
  • textsms
📌React 개발을 위한 VS Code 설정 과정

📌React 개발을 위한 VS Code 설정 과정

VS Code 설정 과정VS Code 설치VS Code 공식 웹사이트에서 운영체제에 맞는 버전을 다운로드하여 설치합니다.필수 확장 프로그램 설치VS Code를 열고 왼쪽 사이드바에서 확장(Extensions) 아이콘을 클릭합니다.다음 확장 프로그램을 검색하여 설치합니다:ESLint: 코드 품질 및 스타일 검사Prettier - Code formatter: 코드 자동 포맷팅ES7+ React/Redux/React-Native snippets: React 관련 코드 스니펫Auto Import: 자동 임포트 기능Path Intellisense: 파일 경로 자동 완성IntelliSense for CSS: CSS 클래스 자동 완성Material Icon Theme: 파일 아이콘 테마(선택 사항)Thunder Cl..

  • format_list_bulleted Study Notes/React
  • · 2025. 4. 8.
  • textsms
[알고리즘] 검색 알고리즘: 선형, 이진, naive 문자열

[알고리즘] 검색 알고리즘: 선형, 이진, naive 문자열

목 차검색 알고리즘학습 목표선형 검색이진 검색naive 문자열 검색 검색 알고리즘ObjectivesDefine what a searching alogorithm isImplement linear search on arrays 선형 검색Implement binary search on sorted arrays 이진 검색Implement a naive string searching algorithm 문자열 검색 알고리즘Implement the KMP string searching algorithm KMP 문자열 검색 알고리즘Linear Search한 번에 하나의 세트를 확인하면서 처음부터 끝까지or끝부터 처음까지 차례대로 탐색하는 방법자바스크립트 속 선형 탐색 methods-indexOf-includes-fi..

  • format_list_bulleted Study Notes/알고리즘
  • · 2025. 4. 7.
  • textsms
[알고리즘] 재귀 Recursion, 재귀 문제 풀기

[알고리즘] 재귀 Recursion, 재귀 문제 풀기

목 차재귀학습 목표재귀란?첫번째 재귀 함수두번째 재귀 함수팩토리얼 구현하기재귀의 잠재적 위험Helper 메소드 재귀 - 디자인 패턴순수 재귀 구현 팁재귀 문제 풀기powerproductOfArrayfib 재귀ObjectivesDefine what recursion is and how it can be usedUnderstand the two essential components of a recursive functionVisualize the call stack to better debug and understand recursive functionsUse helper method recursion and pure recursion to solve more difficult problemsWhat is ..

  • format_list_bulleted Study Notes/알고리즘
  • · 2025. 4. 7.
  • textsms