hr0513 님의 블로그

주소에 맞게 적절한 페이지를 로드하는 Routing에 대해 정리해 보겠습니다. https://reactrouter.com/home React Router Home | React Router reactrouter.com1. React Router 설치React 프로젝트에서 React Router를 사용하려면 react-router-dom 패키지를 설치해야 합니다.npm install react-router-dom2. 기본 설정 [main.jsx 또는 index.js]애플리케이션에서 React Router를 사용하려면, 최상위 컴포넌트에서 BrowserRouter를 감싸야 합니다.import { StrictMode } from 'react';import { createRoot } from 'react-dom..

전역 상태 관리 라이브러리인 Redux에 대해 설명해 보려고 해요 Redux의 3가지 원칙1. 신뢰 가능한 단일 출처상태는 하나의 store에서만 관리됩니다. 상태를 여러 곳에 분산시키지 않고, 하나의 중앙 저장소에서 모든 상태를 관리합니다.2. 상태는 읽기 전용Redux에서 상태는 직접 수정할 수 없습니다.상태를 변경하려면 액션을 통해서만 가능하며, 리듀서가 그 변화를 처리합니다.3. 리듀서는 순수 함수주어진 입력값에 대해 예측 가능한 결과를 반환해야 합니다.https://redux.js.org/introduction/getting-started Getting Started: Resources to get started learning and using Redux" data-og-host="redux...

전역 상태 관리 라이브러리 중 하나인 Recoil에 대해 정리해 보려고 해요 http://recoiljs.org/ko/docs/introduction/getting-started Recoil 시작하기 | RecoilReact 애플리케이션 생성하기recoiljs.org1. 초기 설정import { StrictMode } from "react";import { createRoot } from "react-dom/client";import "./index.css";import App from "./App.jsx";import { RecoilRoot } from "recoil";createRoot(document.getElementById("root")).render( );  2...

함수형 컴포넌트 Lifecycle 렌더링 과정에 대해 정리해 보려구 해요React의 useEffect 훅을 활용하여컴포넌트가 마운트(mount), 업데이트(update), 언마운트(unmount) 될 때 실행되는 코드를 정의할 수 있어요.  [콘솔 창] 1. 컴포넌트가 처음 렌더링 될 때 (Mounting)useEffect(() => {...}, [])는 의존성 배열이 빈 배열 ([]) 이므로,컴포넌트가 처음 마운트될 때 한 번만 실행됩니다.2. 상태 변경으로 컴포넌트가 업데이트될 때 (Update)컴포넌트의 상태(state)가 변경되면 리렌더링(Rerendering) 이 발생합니다. ✅ 리렌더링이란?상태(state) 또는 속성(props)이 변경되면 화면이 다시 그려지는 과정을 의미합니다. 상태(val..

안녕하세요, hr0513입니다! 🥰React, MySQL, node.js 연동 방법에 대해 소개해드리겠습니다 ✔️ 진행할 내용:MySQL 설치 및 실행데이터베이스 및 사용자 생성테이블 생성 및 데이터 추가Node.js에서 MySQL 연결React에서 MySQL 데이터 가져오기1. MySQL 설치 및 실행WindowsMySQL 공식 사이트에서 다운로드 및 설치MySQL Workbench 또는 명령 프롬프트에서 실행2. 데이터베이스 및 사용자 생성터미널에서 MySQL에 접속한 후, 데이터베이스와 사용자를 생성합니다.-- 1. 데이터베이스 생성CREATE DATABASE myappdb;-- 2. 새로운 사용자 생성CREATE USER 'appuser'@'localhost' IDENTIFIED BY 'mypa..

안녕하세요, hr0513입니다!제가 직접 사용하고 있는 라이브러리들을 소개해드리려구 해요1. react-router-domnpmnpm install react-router-dom yarnyarn add react-router-dom@6 App.jsimport { Routes, Route } from "react-router-dom";import Home from "./pages/Home";import MainLayout from "./layouts/MainLayout";function App() { return ( }> } /> );}export default App; index.jsimport { StrictMode } ..

안녕하세요, hr0513입니다!npx 설치 시 오류 해결방법에 대해 알려드리겠습니다1. npx 설치 시 버전 맞추기 (2025년 기준)npx create-react-app ./ 명령어 실행 시, 최신 버전과의 충돌로 인해 오류가 발생할 수 있습니다. 이를 해결하려면 React 및 관련 라이브러리를 수동으로 설치해주는 것이 좋습니다.해결 방법프로젝트를 생성할 디렉터리에서 다음 명령어를 실행합니다.npx create-react-app ./React 및 React DOM을 특정 버전으로 설치합니다.npm install --save react@^18.0.0 react-dom@18.0.0@testing-library/react도 버전을 맞춰 설치합니다.npm install @testing-library/react..

스타일드 컴포넌트에서 색상 미표시와 자동 완성 문제 해결법! ✨혹시 styled-components 사용할 때 색상이 안 나오고 IntelliSense(자동 완성)도 안 돼서 일일이 코드 치고 계셨던 분 계신가요? 저도 얼마 전까지 그런 상황이었어요... 하지만 이제 해결 방법을 알아냈습니다!필수 플러그인: vscode-styled-componentsVS Code를 사용 중이라면 vscode-styled-components 플러그인을 설치해 보세요! ✅ 이 플러그인을 설치하면:CSS 문법 강조가 템플릿 리터럴 안에서도 제대로 표시돼요IntelliSense(자동 완성) 기능이 활성화돼요설치 방법VS Code의 Extensions(확장 프로그램) 메뉴로 이동검색창에 vscode-styled-component..

SurveyPie 기술스택 라이브러리설명recoil전역 상태 관리axiosAPI 연동react-router라우팅styled-components스타일링immer데이터 불변성 유지 SurveyPie Admin 기술스택라이브러리설명redux전역 상태 관리useSWR, axiosAPI 연동react-router라우팅styled-components스타일링immer데이터 불변성 유지amtdUI 라이브러리

React를 깃허브에 배포하는 방법에 대해 알려드리려고 해요 1. 필수 패키지 설치yarn add gh-pages --dev 2. package.json 수정package.json 파일에 다음 내용을 추가합니다: 1. 홈페이지 URL 추가저장소 이름에 따라 URL을 설정합니다:"homepage": "https://your-username.github.io/your-repo-name" 2. 스크립트 추가기존 스크립트 아래에 배포 스크립트를 추가합니다:"scripts": { "predeploy": "yarn build", "deploy": "gh-pages -d build"} 3. 배포 실행yarn run deploy 4. 배포 확인배포가 완료되면 저장소의 GitHub Pages 설정에서 배포된 사이트를..