VITE2 728x90 Vite 기반 프론트엔드 서비스 Dev 서버와 운영 배포 환경 분리의 아키텍처 Vite dev 모드 vs prod(운영) 환경을 “동작 원리 → 구성/배포 → 보안 관점 → 점검 체크리스트 → 예시”까지 정리합니다.(React+TSX 기준으로 설명하지만 Vue/Svelte도 핵심은 동일합니다.)Vite가 “서비스”하는 대상은 뭔가요?개발 소스(원본)src/**/*.ts, src/**/*.tsxsrc/main.tsx, src/App.tsx, components/* 등Vite가 브라우저에 제공하는 방식은 “모드”에 따라 다릅니다dev 모드: 원본 구조를 유지한 채 모듈(ESM) 단위로 실시간 변환해서 제공prod 모드(build): 원본을 번들/압축/최적화해서 dist/ 정적 파일로 생성 후 제공Vite Dev 모드 (개발 서버) – 동작 원리핵심 컨셉: “번들링 없이 ESM로 바로 .. 2025. 12. 31. 브라우저에서 JSX 안전하게 실행하는 방법, Babel, CRA, Vite 환경 JSX는 왜 바로 실행이 안 되나요?JSX = JavaScript가 아님JSX는 HTML + JS 섞어 쓴 듯한 문법일 뿐, 실제로는 브라우저가 이해 못하는 문법입니다.예const element = Hello JSX!;브라우저는 위 코드를 그대로 실행할 수 없고, 다음처럼 변환된 JS만 이해합니다.const element = React.createElement('h1', null, 'Hello JSX!');그래서 필요한 것: 트랜스파일 과정Babel 같은 도구가 JSX → 순수 JavaScript로 변환합니다.React 개발 환경(CRA, Vite 등)은 이 과정을 “자동으로” 해주는 툴일 뿐입니다.핵심 결론JSX 파일을 그대로 브라우저에서 더블클릭 → 실행 X반드시Babel 같은 트랜스파일러로 미리 변.. 2025. 11. 23. 이전 1 다음 728x90 728x90
