ruriruriya

Vite는 빠르고 가벼운 프론트엔드 빌드 도구로, 기존의 create-react-app보다 훨씬 빠르게 React 프로젝트를 설정할 수 있다. 1️⃣ Vite로 React 프로젝트 생성하기📌Vite 설치 및 프로젝트 생성Vite를 사용하려면 아래 명령어를 실행- my-project 는 프로젝트 폴더명이다. 원하는 이름으로 변경npm create vite@latest my-project --template react 설치가 완료되면 아래 명령어로 프로젝트 폴더로 이동한다.cd my-project 📌 의존성 설치설치가 끝나면 Vite 개발 서버를 실행할 준비가 완료된다.npm install 2️⃣ 개발 서버 실행하기Vite의 가장 큰 장점 중 하나는 빠른 개발 서버 실행 속도이다.(추천 이유)npm ru..

React를 사용하다 보면 DOM(Document Object Model)이라는 개념이 자주 등장한다.React는 일반 DOM과 다르게 가상 DOM(Virtual DOM)을 사용한다.그렇다면 일반 DOM과 가상 DOM의 차이점, 그리고 React에서 DOM이 어떻게 동작하는지 정리해보자. 1️⃣ DOM이란? ✅ DOM (문서 객체 모델, Document Object Model)HTML 문서를 브라우저가 이해할 수 있도록 객체 트리 구조로 변환한 것이다.즉, 웹페이지의 구조를 나타내는 프로그래밍 인터페이스라고 할 수 있다.📌 DOM의 예시HTML이 다음과 같다고 가정하자. 안녕, React! 클릭➡️ 브라우저는 이 HTML을 DOM 트리 구조로 변환한다.Document ├── ├── ..

React에서 **객체(Object)**는 상태(state)나 props를 관리할 때 자주 사용된다. 객체는 여러 개의 속성을 포함할 수 있으며, 불변성을 유지하는 것이 중요하다. React에서 객체를 다룰 때 주의해야 할 점과 올바른 사용법을 정리해본다.1️⃣ 객체(Object)란?객체는 여러 개의 값을 하나의 구조로 묶어 관리할 수 있는 자료형이다. JavaScript에서는 {}(중괄호)를 사용하여 객체를 생성할 수 있다.const user = { name: "철수", age: 25, isAdmin: false};user라는 객체를 생성하고, name, age, isAdmin이라는 속성을 가진다.속성 값은 문자열, 숫자, 불리언 등 다양한 데이터 타입이 될 수 있다. 2️⃣ React에서 객체를..

스프링 부트에서 신규 프로젝트를 생성하고 환경설정하는 방법을 알아보자.0. Tool 준비IDE는 STS(Spring Tool Suite)로 사용했다. 이유는 회사에서 실무로 IntelliJ는 비싸고 vscode는 써봤지만 그렇게 편리하단 생각이 안들었기 때문에 STS를 선택했다.1. 신규 프로젝트 생성하기Package Explorer -> Create new Spring Starter Project 클릭 New Spring Starter Project 창이 뜨면 아래처럼 작성하고 Next > 버튼 클릭Name : 프로젝트 명을 작성Location : 프로젝트 저장할 디렉토리 위치 작성Type : Gradle (실무에서는 Maven일 수도 있음..)Packaging : JarJava Version : 17..

BrowserRouter, Routes, Route는 react-router-dom 라이브러리의 주요 컴포넌트로, React 애플리케이션에서 클라이언트 사이드 라우팅을 쉽게 구현할 수 있도록 도와준다.쉽고 심플한 코드로 헤더와 푸터를 고정해보자.1. BrowserRouter, Routes, Route1-1. BrowserRouter BrowserRouter는 HTML5의 History API를 사용하여 UI를 업데이트하고 URL을 동기화하는 라우터로 애플리케이션의 최상위 컴포넌트로 감싸져야 하며, 이를 통해 하위 컴포넌트들이 라우팅 기능을 사용할 수 있게 된다.import { BrowserRouter as Router } from 'react-router-dom';const App = () => ( ..

react에서는 네비게이션 바를 어떻게 만들까?react-router 라이브러리로 모듈화 시키고 간편하게 라우팅 설정을 할 수 있다. react-router 주요 기능동적 라우팅( Dynamic Routing) : 사용자가 특정  URL에 접근할 때 해당 URL에 필요한 컴포넌트를 렌더링라우트 가드(Route Guards) : 사용자 인증 상태 등에 따라 특정 라우트를 제한할 수 있음.레이아웃 관리 : 'Outlet'과 같은 기능을 통해 페이지 레이아웃을 쉽게 관리데이터 로딩 전략 : 로딩과 페칭을 효율적으로 처리하기 위한 'Loader' 기능이 제공코드 스플리팅(Code Splitting) :  'React.lazy'와 'Suspense'를 이용하여 필요한 라우트만 로드하고, 다른 페이지로 이동할 때 ..

React의 props는 한마디로 얘기하면 '속성'이다.실제로 properties의 줄임말! props는 컴포넌트로 전달되는 매개변수로, 컴포넌트의 재사용성을 높이고 데이터를 효과적으로 관리할 수 있도록 도와준다.주로 부모 컴포넌트에서 자식 컴포넌트로 ㅗ데이터를 전달할 때 주로 사용된다.1. props 사용방법  props 전달하기부모 컴포넌트에서 자식 컴포넌트로 props를 전달할 때,HTML 태그 속성을 설정하는 것과 유사한 방식으로 작성한다. props 사용하기자식 컴포넌트에서는 전달받은 props를 이용하여다양한 데이터를 표시하거나 로직에 사용할 수 있다.// 부모 컴포넌트function App() { return ( 사용자 정보 );}// 자식 컴포넌트fun..

React에서 컴포넌트를 함수로 정의하고 사용자 정의 태그로 컴포넌트를 사용해보자.그리고 리액트에서 함수를 정의할 땐 반드시 대문자로 시작해야 한다.import './App.css';// 컴포넌트 정의 1function Header() { return WEB }// 컴포넌트 정의 2function Nav() { return html css js }// 컴포넌트 정의 3function Article() { return Welcome Hello, WEB}function App() { return ( // 컴포넌트를 사용하기 위한 태그 );}expo..