일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- rendering
- 비동기
- http3
- vue
- web vital
- JavaScript
- ts error
- aws
- csr
- custom command
- QUIC
- api test
- Cypress
- TLS
- import.meta.env
- Testing
- typeScript
- ViTE
- CloudFlare
- CSS
- caching
- msw
- svelte
- 선택자
- e2e
- SSR
- vue3
- vue-cli
- devtools
- https
- Today
- Total
목록FrontEnd (42)
Develop Note by J.S.
import.meta.env 객체의 값은 Vite 개발 서버가 런타임 환경에서 동적으로 생성합니다. import.meta.env로 생성된 객체는 빌드 시점에 포함되지 않으며, 브라우저에서 접근 가능한 코드에서만 사용할 수 있습니다. build 시점에는 환경변수의 할당된 값이 번들링에 포함됩니다. import.meta.env는 브라우저 환경에서 개발 중에 환경 변수 값을 확인하고 활용하기 위한 목적을 위한 기능이기 때문에 보안적인 측면은 고려되지 않았습니다. 또한 VITE_ 접두사로 정의한 환경 변수만 노출 되기 때문에 그 외 다른 환경변수는 노출되지 않습니다. process.env는 Node.js 환경에서 사용되는 환경 변수 객체입니다. Node.js 환경은 서버 사이드에서 실행되며, 런타임 환경에서는 ..
npm trends https://npmtrends.com/ag-grid-community-vs-datatables.net-vs-handsontable-vs-jsgrid-vs-tui-grid 비교 Datagrid 대상은 npm download 횟수 기준으로 선정하였습니다. 1. ag-grid - https://www.ag-grid.com/ 유연하고 고성능의 다양한 기능을 제공합니다. (정렬, 필터링, 페이징 및, 차트, 그룹화, 열고정, 체커보드 테이블 등) Vue3, typescript 개발 환경의 가이드를 제공합니다. 유/무료 라이선스가 제공 됩니다. (community는 상용에도 무료, enterprise는 Trial용도만 무료로 가능) 대량 데이터 처리, 빠른 렌더링 및 고급 기능 필요 시 적합합..
프론트엔드 개발자가 가장 많이 번거롭다고 느끼는 부분은 개발 과정에서의 테스트라고 생각합니다. 사용자의 액션이 너무 다양하고 예측 불가능한 상황이 발생되기에 언제든 예외상황이 발생 할 수 있기 때문에 다양한 테스트 케이스를 수행할 필요합니다. 또한 중복코드의 리팩토링으로 인하여 모듈화 된 코드의 수정 사항 발생 시 해당 모듈을 사용하고 있는 전체 코드의 테스트가 필요해집니다. 이때 사용자 입장에서 개발된 서비스를 테스트 하는 것을 E2E(end to end) Test 라고 합니다. 소개 드릴 Cypress는 WEb Testing Tools이며, Vite + Vue3 개발에 적용하여 소개 드리고자 합니다. 1. Vite로 Cypress 설치 $npm init vue@latest vite 초기화 시 Add ..
Datagrid 기능을 제공하는 모듈 중 ag-grid의 소개 및 사용법입니다. Datagrid란? 데이터를 가져와 그리드에 배열하도록 하는 JavaScript UI 컴포넌트입니다. 데이터 그리드를 사용하면 정렬, 필터링, 페이징 및 스크롤과 같이 데이터 또는 데이터 표시 속성을 조작하는 기능을 추가할 수 있습니다. 또한 Datagrid의 큰 장점으로는 Keyboard Interaction 이 가능합니다. undo, redo, copy & paste, 화살표 이동, page up & down 등 Datagrid에 포커스만 있다면 키보드 조작으로 Excel과 동일한 액션이 가능합니다. ag-grid는 Javascript 기반 오픈소스 Datagrid입니다. 다양한 옵션들을 활성/비활성화 하며 컨트롤 할 수..
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) 기반 개발 서버 구동방식으로 브라우저 실행 ..
SPA(Single Page Application)로 개발을 하다보면 여러 조건들과 권한에 따라 로직을 구분해야하는 상황이 발생합니다. 성격이 다른 페이지들을 단일 Vue Instance에서 구현하다보면 물리적으로 분리를 시키는 것이 더 효율적일 때가 있습니다. 이때 다중 Instance를 생성하여 해결 할 수 있습니다. File 분리 Vue Instance를 생성할 파일의 경로를 분리하여 각각의 Instance를 생성합니다. // vueInstance1/main.ts import { router } from './router' import { createApp } from 'vue' import App from './App1.vue' const app = createApp(App); app.use(ro..