일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- caching
- rendering
- 선택자
- e2e
- JavaScript
- SSR
- CSS
- vue
- http3
- vue3
- Testing
- CloudFlare
- ts error
- custom command
- typeScript
- ViTE
- QUIC
- api test
- import.meta.env
- devtools
- https
- csr
- svelte
- 비동기
- web vital
- msw
- aws
- TLS
- Cypress
- vue-cli
- Today
- Total
목록FrontEnd (42)
Develop Note by J.S.
Props로 데이터를 하위컴포넌트에 전달할 때, 하위 Component -> 하위 Component .... 등 전달해야하는 end 컴포넌트까지의 루트가 복잡해지면 props전달이 반복되는 비효율적인 데이터 전달을 prop 드릴링이라고 합니다. vuex, pinia 등의 상태관리 라이브러리를 사용하여 해결 할 수도 있지만, 특정 범위내에서만 유효한 데이터 전송 루트가 필요할 경우 Provide(데이터 제공)/ Inject(데이터 주입)을 이용할 수 있습니다. // 제공 컴포넌트 // 주입 컴포넌트 {{ location }} 또한 컴포넌트의 트리가 깊고 넓을 때, 다수의 개발자가 참여한 대규모 앱 개발 시에는 일반적인 provide 키워드 사용으로 인한 충돌 가능성이 있습니다. 이때 Symbol()을 사용..
v-model은 컴포넌트 또는 Form 입력에서 데이터의 양방향 바인딩을 구현하기 위해 사용하는 디렉티브입니다. Form입력 1. input text // v-bind, event listener 사용 시 메세지: {{ text }} // v-model 사용으로 코드의 단순화 메세지: {{ text }} 2. checkbox // checkbox 단일 체크 {{ checked }} // boolean 값을 사용 // checkbox 다중 체크 체크된 이름: {{ checkedNames }} // Array 값을 사용 젝 존 3. radio button // radio Button 선택한 것: {{ picked }} 하나 둘 4. select // 단일 셀렉트 선택됨: {{ selected }} // 단일..
Web Worker Web Worker는 Service worker와 마찬가지로 브라우저 영역 외 백그라운드 영역에서 별개의 스레드로 동작되는 프로세스 입니다. 기존 Dom의 UI 스레드에 영향을 주지 않기 때문에 오랜 시간이 걸리거나 복잡한 수학계산 영역, 이미지, 애니메이션 등 브라우저의 메인 스레드 하나로 처리하기에 영향을 주는 기능들을 Web Worker에서 동작시킬 수 있습니다. Web Worker vs Service Worker Service worker의 주 기능으로 네트워크 프록시 역할을 수행하여 Fetch와 같은 api 요청을 가로채서 커스텀한 Handling을 할 수 있습니다. 또한 브라우저가 닫히더라도 백그라운드에 남아 있기 때문에 PWA(Progressive Web App)의 Pus..
MSW(Mock Service Worker) Service Worker의 네트워크 Proxy 기능을 활용하여 API 테스트를 위한 API 모킹(Mocking) 라이브러리 입니다. Front-end 개발 시 Back-end 개발 완료까지 기다리지 않고 API 명세서만 있다면 가상의 API 응답을 구성하여 Front-end 개발 및 API 테스트와 Back-end 개발을 동시에 진행하여 프로젝트 개발 소요 시간을 단축 시킬 수 있게 도와줍니다. MSW 라이브러리 설치 npm install -D msw 1. Service Worker 구성 먼저 제 게시글 중 Service Worker 구성에 대한 게시글을 꼭 먼저 보신 후 진행해주세요 이후 registerServiceWorker.ts에서 아래와 같은 코드를 ..
Service Worker - 웹 페이지 외에서 브라우저 내 스크립트와는 다른 쓰레드로 동작되는 기능입니다. http 요청을 catch하는 네트워크 프록시 기능을 구현할 수 있습니다. - 리소스 caching 처리 기능 구현이 가능하고 Push 알림(PWA)이 가능하여 개발 단계에서 MSW(mocking service worker)를 사용한 API Testing 기능 구현이 가능합니다. - Service Work는 페이지의 DOM과의 직접적인 상호작용은 할수 없지만 Message를 통하여 통신합니다. - Service Worker 생명주기 : 설치중 -> 설치완료/대기 -> 활성화중 -> 활성화완료 -> 중복(설치실패 및 교체) 설치 npm install register-service-worker 1. ..
Watch는 Obverving 상태의 값이 변경 될 경우 동작시키는 logic을 사전에 정의하여 사용 할 수 있습니다. watch(question, async (newQuestion, oldQuestion) => { if (newQuestion.indexOf('?') > -1) { answer.value = '생각 중...' try { const res = await fetch('https://yesno.wtf/api') answer.value = (await res.json()).answer === 'yes' ? '네' : '아니오' } catch (error) { answer.value = '에러! API에 연결할 수 없습니다. ' + error } } }) 또한 단일 변수가 아닌 getter 등 여..
Methods로 변화가 적고 간단한 계산식을 구현 할 경우 상태가 변하지 않더라도 매번 연산작업이 수행되어 효율성이 떨어지는 상황에 대체할 수 있는 기능으로 Computed를 사용합니다. 만약 이전 계산식에서 Observing하고있는 상태값이 변하지 않을 경우 재연산 하지 않고 cache data를 그대로 사용하여 효율적으로 결과값을 가져올 수 있습니다. 책을 가지고 있다: {{ publishedBooksMessage }} 참조 : https://v3-docs.vuejs-korea.org/guide/essentials/computed.html
1. LifeCycle Hook 상기 이미지는 vue의 LifeCycle입니다. 기존의 Vue2에서 사용했던 LifeCylcle Hook의 사용법 또한 약간 차이점이 있습니다. 앞선 게시글에서 말씀드렸듯이, created대신 setup함수로 대체되었다는 부분 외에는 거의 비슷하지만 호출 방식의 경우 setup 함수 내에서는 composition api 방식으로 호출 할 수 도 있고, setup함수 외부에서는 기존의 option api 방식으로 LifeCycle Hook을 사용할 수 있습니다. import { onMounted, ref, reative } from 'vue' export default { setup() { const _ref = ref(3); const _reactive = reactive..