전체 글123 useParams vs useNavigate useParams vs useNavigateuseParams와 useNavigate는 React Router에서 제공하는 Hook들이다.이 둘은 라우팅 관련 기능을 사용할 때 아주 자주 사용한다.useParams – URL의 파라미터를 가져오는 Hook라우트(URL 경로) 안에 동적 파라미터가 있을 때, 그 값을 컴포넌트에서 꺼내서 사용하고 싶을 때 사용한다.// App.jsimport { BrowserRouter, Routes, Route } from 'react-router-dom';import UserPage from './UserPage';function App() { return ( } /> );} // UserPage.jsimport { us.. 2025. 4. 6. useState vs useEffect useState vs useEffect useState와 useEffect는 React의 함수형 컴포넌트에서 가장 자주 사용하는 Hook 중 하나다.useStateuseState는 컴포넌트의 상태(state)를 저장하고 관리할 수 있도록 해주는 Hook이다. const [state, setState] = useState(initialValue); state: 현재 상태 값setState: 상태를 업데이트하는 함수initialValue: 초기 상태 값 import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( 현재 카운트: {count} se.. 2025. 4. 6. React 스타일링 방식 비교 (CSS Modules, styled-components, 일반 CSS) React 스타일링 방식 비교 (CSS Modules, styled-components, 일반 CSS) 방식모듈화클래스 충돌 방지동적 스타일가독성/유지보수CSS Modules✅✅❌✅styled-components✅✅✅✅일반 CSS❌❌❌❌ (규모 커지면) 1. CSS Modules파일 확장자: MyComponent.module.css클래스 이름 자동 고유화 → 충돌 걱정 없음정적인 스타일에 아주 좋고, 유지보수도 용이함📁 디렉토리 구조src/├── components/│ └── Button/│ ├── Button.jsx│ └── Button.module.css└── App.jsxButton.module.css.button { background-color: #4caf50; c.. 2025. 4. 5. Vite 기본 폴더 구조 Vite 기본 폴더 구조 npm create vite@latest 명령어로 Vite 프로젝트를 생성하면 기본적으로 다음과 같은 폴더 구조가 생성됩니다.my-vite-project/├── node_modules/├── public/│ ├── favicon.ico├── src/│ ├── assets/│ │ ├── logo.svg│ ├── App.jsx (또는 App.tsx, App.vue 등)│ ├── main.jsx (또는 main.tsx, main.js 등)├── .gitignore├── index.html├── package.json├── package-lock.json (또는 yarn.lock, pnpm-lock.yaml)├── README.md├── vite.config.js .. 2025. 3. 29. Vite vs 프레임워크 Vite vs 프레임워크 Vite와 프레임워크의 차이점은 그 목적과 역할에서 크게 다릅니다. 두 가지를 비교하면서 설명하겠습니다.1. Vite (빌드 도구 및 개발 서버)목적: Vite는 개발 도구로, 애플리케이션을 개발하고 빌드하는 과정을 돕습니다. Vite는 빠른 빌드와 **빠른 모듈 핫 리플레이스먼트(HMR)**를 제공하며, 애플리케이션의 개발 속도를 크게 향상시키는 데 초점을 맞춥니다. 웹팩을 사용할 때보다 훨씬 더 빠르게 개발하고 배포 개발 서버: Vite는 개발 중에 코드가 변경될 때마다 자동으로 결과를 브라우저에 반영할 수 있도록 도와주는 개발 서버를 제공합니다.빌드 최적화: Vite는 Rollup을 기반으로 프로덕션 빌드를 생성하여 최적화된 번들을 만들고, 애플리케이션을 효율적으로 배포할 .. 2025. 3. 29. getter setter getter settergetter와 setter는 클래스에서 객체의 속성 값을 안전하게 가져오거나 설정할 수 있도록 도와주는 메서드입니다. 이를 통해 데이터의 무결성을 유지하고, 속성에 대한 추가적인 로직(예: 검증, 변환 등)을 적용할 수 있습니다.getter와 setter의 기본 개념getter: 클래스 속성 값을 가져올 때 사용하는 메서드입니다.setter: 클래스 속성 값을 설정할 때 사용하는 메서드입니다.JavaScript에서 get과 set 키워드를 사용하여 정의합니다.기본 예제class Person { constructor(name, age) { this._name = name; // 언더스코어(_)를 붙여 직접 접근을 방지 this._age = age; .. 2025. 2. 2. 이전 1 2 3 4 ··· 21 다음