일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- web vital
- import.meta.env
- 선택자
- CloudFlare
- JavaScript
- svelte
- QUIC
- csr
- Cypress
- CSS
- http3
- custom command
- vue
- vue-cli
- https
- api test
- 비동기
- ts error
- typeScript
- Testing
- rendering
- msw
- TLS
- aws
- SSR
- e2e
- vue3
- devtools
- caching
- ViTE
- Today
- Total
목록FrontEnd (42)
Develop Note by J.S.
Transition (화면전환 효과) 1. 기본 사용법 fade = true }> fade blur = true }> blur fly = true }> fly slide = true }> slide scale = true }> scale fade 예시 blur 예시 fly 예시 slide 예시 scale 예시 2. Transition Options /** transition option delay : 지정시간 이후 효과 실행 duration : 지정시간 동안 효과 실행 easing : 샘플링된 전환 효과 example > https://svelte.dev/examples/easing docs > https://svelte.dev/docs#run-time-svelte-easing **/ 사용할 transi..
Slot이란? - 공통 레이아웃을 가진 Component에 props 데이터 이외에 마크업을 전달해서 렌더링 시켜야할 때 Slot을 사용할 수 있다. - 형태 : 1) 사용법 // Card.svelte // main.svelte import Card from './Card.svelte'; ... // Card 컴포넌트 내부 Slot에 매핑될 Html 형태의 내용을 입력한다. 안녕하세요. 반갑습니다. 2) 이름이 있는 Slot // Card.svelte //name 속성으로 slot에 이름을 지정 // main.svelte import Card from './Card.svelte'; ... // slot 속성으로 매핑할 slot name을 입력 안녕하세요. 반갑습니다. 청첩장 3) $$slots - 슬롯 ..
Store Store란 Svelte에서 상태관리(state management) 기능을 제공하는 저장소 1) 기본사용법 - 수동 구독 및 수동 리소스 해지 The count is {count_value} - 자동 구독 : subscribe(), unsubscribe()의 일련의 기능을 자동화 하는 방법으로, $ 기호 사용 시 자동으로 처리됩니다. * 주의 사항 : store 변수 정의는 + 2) store의 사용자 정의 method로 구현 // store.js import { writable } from 'svelte/store'; // read, write, delete가 가능한 store 모듈 function createCount() { const { subscribe, set, update } = ..
1. 변수선언 스벨트의 반응형 state는 기본 javascript 변수선언 명령어인 let으로 가능하며 methods로 state를 변경하여 변경된 state가 mark up 영역에 즉시 반영이 됩니다. 2. 반응성 $: vue의 computed 속성의 동작과 비슷하며, 대상의 상태 값을 감지하여 동작된다. 클릭 수 {count} {count === 1? 'time' : 'times'} {count} 두배는 {doubled} 3. Component 불러오기 // Main.svelte // 자식 컴포넌트 // 자식 컴포넌트 // 자식 컴포넌트 4. Props (단방향 binding) // Main.svelte // ChildrenComponet.svelte 클릭수 {count} 5. Component E..
1. Keep-Alive 동적 Component 는 컴포넌트의 동적 렌더링이 필요할 때 많이 사용되고 있습니다. 하지만 활성화 된 컴포넌트에서 다른 컴포넌트로 전환 하였을 때 기존 컴포넌트의 Unmount와 동시에 데이터가 모두 소멸되는데, 다시 해당 컴포넌트로 돌아갔을 때, 이전 작업했던 내용을 유지하고자 할 때 Keep-Alive 기능을 사용합니다. 2. Include / Exclude 기본적으로 KeepAlive는 모든 컴포넌트에 대하여 캐시를 생성합니다. Include / Exclude 옵션으로 캐시로 관리할 특정 컴포넌트만 지정할 수 있습니다. 3. Vue-Router에서 Children으로 속한 Path 별 Component의 렌더링 시에는 아래와 같은 방법으로 캐싱이 가능합니다.
배포 시 남아있는 Cache로 인해 각 chunk 파일들이 cache된 파일을 다운받아 즉각적으로 수정내용이 반영되지 않아 보이는 경우에는 Output 파일에 hash값을 추가하면 해결 할 수 있습니다. module.exports = { configureWebpack: (config) => { config.output.filename = 'js/[name].[chunkhash].js'; config.output.chunkFilename = 'js/[name].[chunkhash].js'; }, }
다중 Vue Instance로 여러 페이지 생성 시에는 vue.config.js에서 각 Path별 entry 경로를 설정하여 사용합니다. module.exports = { pages: { index: { entry: 'src/main.ts', template: 'public/index.html', filename: 'index.html', }, separate: { entry: 'src/pages/separate-page/main-separate-page.ts', template: 'public/separate/index.html', filename: 'separate/index.html', }, }, } 여기서 Production 빌드로 배포 시에 각 인스턴스에 쓰인 css파일이 하나의 chunk파일에..
브라우저에서 제공하는 'DevTools' (개발자 도구)는 개발자에게 다양한 기능들을 제공합니다. Network, Console, Vue개발자의 경우 Chrome Extension Vue.js devtools 확장프로그램을 설치하여 개발 테스트 및 디버깅을 합니다. 또한 Console에 노출되는 에러의 경우 에러가 발생된 파일의 경로를 노출하고, 클릭 시 개발자 도구 'source' Tab에서 확인가능합니다. 이를 소스 맵이라고 하는데요, 소스 맵(Source Map)은 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능을 제공합니다. 해당 기능들은 Production 배포 시에는 보안상의 이슈로 자동으로 노출되지 않습니다. // vite.config.ts export default define..