react 구조2 [React] react (vite)project 기본적인 개발 구조 설계 Vite로 새 프로젝트를 생성하면 기본적인 폴더 구조가 제공된다. 실제 개발을 위해서는 페이지와 기능을 효율적으로 관리할 수 있도록 기초적인 뼈대를 만드는 작업이 필요하다.기본 폴더public : 빌드 과정에서 특별한 처리 없이 그대로 유지되는 정적 파일이 위치하는 곳이다. 주로 파비콘(favicon)이나 robots.txt 파일 등이 여기에 해당된다.assets : 컴포넌트 내부에서 직접 불러와 사용하는 이미지, 폰트 등 정적 파일을 모아두는 곳이다. 이곳의 파일들은 빌드 시 최적화 과정을 거치는 것이다. 개발 편의성을 위한 폴더 구조 설계src 폴더 내부에 다음과 같은 폴더들을 추가하여 구조를 설계하면 코드 관리가 용이해진다.components 버튼, 인풋 창, 모달처럼 여러 페이지에서 재사용될 UI.. 2025. 9. 11. [React] vite project 생성 및 구조 가이드 현재 SI 프로젝트 대비 react 공부를 계속계속 하고 있다. 그리고 곧 신입들이 들어온다는 얘기를 들었다. 그래서 그 친구들을 위해 그리고 나를 위해 react 관련 정보들을 정리해둘려고 한다. vite(비트) 프로젝트 기반에서 리액트 애플리케이션을 만들거라 vite에 대해서부터 알아보자. Vite(비트)프론트엔드 빌드 도구빠른 개발 서버미리 번들링 없이 모듈을 바로 로드하여 서버를 즉시 시작함.번들링 : 여러 코드와 프로그램을 묶어 사용자에게 웹 애플리케이션을 제공하는 과정. 최종적으로 번들링된 파일을 브라우저에서 실행하여 웹 애플리케이션을 실행개발 중 번들링 없이 모듈을 직접 로드빠른 빌드 속도환경 변수 지원.env 파일을 통해 환경 변수를 쉽게 관리할 수 있음간단히 말해 vite는 리액트의 빌.. 2025. 9. 10. 이전 1 다음
