반응형 Programming/React10 Vite 기본 설정 및 실무 예제 + App.jsx 구조 분석 + useState 심화 개념 정리 🔍 Vite 기본 설정 및 실무 예제 + App.jsx 구조 분석 + useState 심화 개념 정리프론트엔드 개발에서 빠른 개발 환경과 직관적인 설정으로 각광받는 Vite. 이 글에서는 Vite의 핵심 설정 파일인 vite.config.js를 중심으로 기본 개념부터 실무 예제까지, 그리고 React의 진입점인 App.jsx 구조와 React Hook인 useState의 심화 개념까지 함께 정리합니다.📁 1. vite.config.js 기본 설정 해설vite.config.js는 Vite 프로젝트의 핵심 설정 파일로, 다음과 같은 역할을 합니다: 번들링 대상 정의 (plugins) 개발 서버 설정 (server) 별칭(alias) 등 모듈 해석 방식 설정 (resolve) 빌드 옵션 (build.. 2025. 5. 2. [React] Vite 설치 및 기본 개념 이해 Vite로 React 앱 만들기1. Vite 설치 및 프로젝트 생성절차터미널을 onebite-react 폴더로 이동합니다.다음 명령어를 입력합니다:npm create vite@latest프로젝트 이름을 묻는 창이 나오면 원하는 이름을 입력합니다.(예시: section_custom)"Select a framework" 질문에서는 방향키로 React를 선택합니다."Select a variant" 질문에서는 JavaScript를 선택합니다.프로젝트 폴더(section_custom)로 이동한 후, 의존성 설치를 위해 다음 명령어를 실행합니다:npm install설치가 완료되면 node_modules 폴더와 다수의 라이브러리들이 추가됩니다.Tip: 직접 React 설정을 구성하려면 번거로운 작업(webpack 설.. 2025. 4. 29. [React] React 기초부터 모듈 시스템까지 1. React란?Meta(Facebook) 에서 개발한 오픈소스 JavaScript 라이브러리입니다.대규모 웹 서비스의 UI를 더 편리하고 효율적으로 개발하기 위해 만들어졌습니다.핵심 포인트대규모 UI를 작은 단위로 쪼개어 관리 (컴포넌트)데이터 변화에 따라 UI 자동 업데이트빠른 렌더링 성능 제공(* 렌더링 : 웹페이지 화면에 UI요소를 그려내는 것을 말함)2. React의 기술적 특징2-1. 컴포넌트 기반 UI 구성컴포넌트(Component) = 화면을 구성하는 하나의 독립적인 단위입니다.예시 구조:- Header.js- Main.js- Footer.js이렇게 나누면 중복 코드 없이, 유지보수와 확장성이 좋아집니다.📌 실제 React 코드 예시// Header.jsxexport default fu.. 2025. 4. 29. [React] npm이란?(npx와 간단 비교) npm(Node Package Manager)이란 ? node.js 기술을 이용해서 만들어진 여러 앱들을 명령어 환경에서 손쉽게 설치할 수 있도록 도와주는 것이 npm이다.(node.js 계의 google play)npx(Node Package eXecute)란?npm의 5.2.0버전부터 추가된 도구로 간편하게 npm 패키지를 일회성으로 사용/실행하는 실행도구이다. 즉, 임시로 패키지를 설치하여 사용 후 제거된다고 생각하면 된다. npm과 npx를 비교?굳이 둘을 비교하자면npm은 전역으로 패키지를 설치하여 의존성 라이브러리들을 전체적으로 관리 또는 특정 프로젝트에만 의존성 라이브러리를 설치하여 사용한다.그러다 보니 업데이트가 있을 때 각 각 업데이트 관리를 해줘야 되는 번거로움이 있을 수 있다. npx.. 2024. 9. 12. [생활코딩] React 06. state state란? 컴포넌트 함수를 다시 실행해서 새로운 return 값을 만드는 것을 state라 한다. * Prop과 State 차이점 - Prop은 컴포넌트를 사용하는 외부자를 위한 데이터 - State는 컴포넌트를 만드는 내부자를 위한 데이터 State의 값이 변경되면 새로운 리턴 값을 만들어서 UI가 업데이트되며, 새로운 리턴 값을 화면에 출력하게 된다. 즉, 동적인 페이지를 구성할 수 있는 것이다. 지금부터 만들 예제는 링크가 걸린 특정 단어를 클릭했을 때 화면 body에 특정 단어 안에 가지고 있는 문구들을 출력할 것이다. 코드 정리 화면 출력을 하는 app() 함수에서 작성을 해보겠다. 우선 태그를 클릭할 경우 body 영역에 Hello, WEB 이 생성되게 하고 태그를 클릭했을 시 body영역.. 2024. 1. 31. [생활코딩] React 05. 이벤트 event html 에서는 이벤트를 발생시키는 onClick이 있다. React 컴포넌트에는 이러한 이벤트를 발생시킬 수 있는 방법이 뭐가 있을까? 우리는 컴포넌트 안에 이벤트를 설정하여 웹 화면에서 "WEB" 글자를 눌렀을 때 이벤트를 발생시켜보겠다. onChangeMode 위와 같이 props에 onChangeMode를 추가하여 해당 태그를 클릭할 때 alert 화면이 뜨도록 할 예정이다. 함수의 태그 안에 onClick 속성을 넣은 다음 리로드되는 것을 방지하는 event.preventDefault()를 호출 후 props에 onChangeMode()를 호출하도록 설정한다. 추가적으로 태그에 있는 html/css/js 내용도 클릭했을 시 각 각에 해당하는 id값이 뜨도록 설정해보자. 태그에 id값을 onCha.. 2024. 1. 23. 이전 1 2 다음 반응형
