Develop Note by J.S.

브라우저에서 제공하는 'DevTools' (개발자 도구)는 개발자에게 다양한 기능들을 제공합니다. Network, Console, Vue개발자의 경우 Chrome Extension Vue.js devtools 확장프로그램을 설치하여 개발 테스트 및 디버깅을 합니다. 또한 Console에 노출되는 에러의 경우 에러가 발생된 파일의 경로를 노출하고, 클릭 시 개발자 도구 'source' Tab에서 확인가능합니다. 이를 소스 맵이라고 하는데요, 소스 맵(Source Map)은 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능을 제공합니다. 해당 기능들은 Production 배포 시에는 보안상의 이슈로 자동으로 노출되지 않습니다. // vite.config.ts export default define..

import.meta.env 객체의 값은 Vite 개발 서버가 런타임 환경에서 동적으로 생성합니다. import.meta.env로 생성된 객체는 빌드 시점에 포함되지 않으며, 브라우저에서 접근 가능한 코드에서만 사용할 수 있습니다. build 시점에는 환경변수의 할당된 값이 번들링에 포함됩니다. import.meta.env는 브라우저 환경에서 개발 중에 환경 변수 값을 확인하고 활용하기 위한 목적을 위한 기능이기 때문에 보안적인 측면은 고려되지 않았습니다. 또한 VITE_ 접두사로 정의한 환경 변수만 노출 되기 때문에 그 외 다른 환경변수는 노출되지 않습니다. process.env는 Node.js 환경에서 사용되는 환경 변수 객체입니다. Node.js 환경은 서버 사이드에서 실행되며, 런타임 환경에서는 ..

Vite에서 .env[mode] 파일에 설정한 환경변수를 가져오는 키워드는 import.meta.env입니다. 1. 환경변수 파일 생성 .env.[mode] 환경변수 파일을 프로젝트 root경로에 생성합니다. //vue-cli .env.dev VUE_APP_IMG_URL = 'https://img-url/' VUE_APP_API_URL = 'https://vue-cli-api-url' VUE_APP_DOMAIN = 'https://domain.net' //vite .env.dev VITE_IMG_URL = 'https://img-url/' VITE_API_URL = 'https://vite-api-url' VITE_DOMAIN = 'https://domain.net' vue-cli에서는 환경변수에 pre..

Vite Tool을 이용하여 Vue3 + Typescript 프로젝트 생성 및 초기 Config File에 대한 설명 입니다. 1. vue 프로젝트 생성 $npm init vue@latest 프로젝트에서 사용할 기능들을 체크하여 생성합니다. 테스트는 Typescript, Vue Router, Pinia, ESLint, Prettier를 선택하여 프로젝트를 생성하였습니다. 모듈 설치 $npm install DevServer 실행 $npm run dev Build $npm run build 2. Vite.config.ts import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitej..

Vite(프랑스어로 "빠른", 발음: /vit/)는 Module Bundling, DevServer, HMR 등의 기능을 지원하는 프론트엔드 개발자를 위한 Tools 입니다. Vite를 사용해야하는 이유 1. 번들링(Bundling) .js, .html, .vue, .jsx 등 여러 종류의 파일로 이루어신 소스를 브라우저에서 실행할 수 있도록 하나로 모아주는 Bundling 기능을 제공합니다. 2. 개발 서버 구동속도 향상 이전 번들링 기반 개발서버 구동 방식에는 모든 소스코드의 크롤링 및 빌드작업이 완료되어야 페이지 접속이 가능했습니다. 소스내에 포함된 Require 모듈들의 번들링 완료 후 서버가 구동되었던 방식에서 Native ESM(ES Modules) 기반 개발 서버 구동방식으로 브라우저 실행 ..