일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- api test
- typeScript
- CSS
- ViTE
- import.meta.env
- aws
- https
- 선택자
- 비동기
- rendering
- svelte
- web vital
- vue
- Cypress
- TLS
- http3
- JavaScript
- SSR
- devtools
- Testing
- ts error
- caching
- CloudFlare
- e2e
- custom command
- vue3
- msw
- QUIC
- csr
- vue-cli
- Today
- Total
목록분류 전체보기 (82)
Develop Note by J.S.
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. 무한 Pending 상태 Async Await 함수를 이용하여 비동기 로직을 구현할 때 도중에 한 Api 가 무한 pending 상태에 빠진다면 어떻게 빠져나올 것인지에 대한 고민이 필요할 것 입니다. async function initComponent() { try { await testApi1(); //만약 pending에서 빠져나오지 않는다면 initComponent()는 영원히 종료되지 않는다. await testApi2(); } catch (e) { console.err(e); } } 2. AbortSignal 사용 - 이런 문제가 발생했을 때 AbortSignal은 async await를 취소할 수 있는 방법 중 하나일 수 있습니다. 다만 취소 Trigger를 직접 지정해야함에 있어 완벽..
1. Javascript의 동작 자바스크립트는 Single Thread기반이며 *Non-Blocking 방식으로 동작됩니다. 하지만 콜 스택, 이벤트 루프, 콜백 큐가 독립적으로 동작되는 것이 아니며 웹 브라우저, Node.js 와 같은 Multi Thread 환경에서 실행되고 각 기능이 적절하게 사용됨으로써 Multi Thread와 같은 사용이 가능합니다. * Non-Blocking : A함수가 B함수를 호출할 때 제어권을 잃지 않음 (블로킹 되지 않음) 2. Javascript Event Loop JS Engine에서 제공하는 Memory Heap과 Call Stack은 각 변수와 참조를 저장하고, 콜스택에 저장된 실행 컨텍스트를 통해 자바스크립트 코드가 실행 됩니다. 추가적으로 코드를 실행시키기 위..
Memory Leak, GC에 이어 GC에서 걸러지지 않은 Memory Leak의 유형 및 식별 방법에 대하여 알아보겠습니다. 1. Memory Leak 유형 1) 선언되지 않은 변수의 참조 또는 참조가 없는 변수를 생성 - 선언되지 않은 변수를 참조한 경우에는 컴파일 과정에서 전역 객체(Root)에서 새 변수를 생성합니다. function foo(){ this.message = 'I am accidental variable'; } foo(); Mark-and-Sheep 알고리즘에서는 Root를 가리키는 변수는 항상 active 상태이기 때문에 GC가 이를 제거할 수 없어 메모리 누수가 발생합니다. - 코딩 시점에 사용되지 않거나 선언없이 참조한 코드를 삭제하거나, 자바스크립트의 use strict Mo..
Window와 Mac OS의 Default 개행문자 차이로 Build 시 linebreak Erorr가 발생됩니다. 아래는 해당 이슈에 대한 두 가지 해결방법입니다. 1. IDE 및 Git Config Setting Ex. Webstorm IDE git config --global core.eol lf // mac LF 기준 git config --global core.autocrlf input // LF를 line ending 으로 사용 -> 이후 Local Repository 삭제 후 다시 git clone 시 오류 해결 2. eslint Option 설정 // .eslintrc.js module.exports = { ... rules : { 'linebreak-style' : 0 } }
1. Memory Leak - 개발자가 의도하지 않은 메모리가 더 이상 사용되지 않음에도 해제되지 않고 지속적으로 메모리를 점유하고 있는 현상을 말하며, 이로 인한 버그발생 및 서비스장애를 발생시킵니다. - 대표적인 메모리 관련 이슈는 3가지 유형으로 나타납니다. 1) 페이지가 시간이 지남에 따라 느려지는 현상 - 주요원인 : Memory Leak 2) 페이지가 처음부터 일관적으로 느리거나, 급작스럽게 느려지는 현상 - 주요원인 : Memory Bloat(메모리 팽창)으로 볼수 있으며 메모리 소비의 급작스런 증가로 발생 3) 페이지가 끊키는 현상 - 주요원인 : GC가 너무 자주 발생되는 경우 2. Memory Lifecycle 메모리 생명주기 : 할당 -> 사용 -> 해제 3. 메모리 구조(V8 Eng..
1. OSI 7계층 국제 표준화 기구(ISO)에서 네트워크 통신을 7단계로 나누어 정의한 네트워크 표준 모델을 OSI 7 Layer 라고 합니다. 네트워크 계층은 1계층인 물리 계층부터 7계층인 응용 계층까지 구성되어 있습니다. 1) 물리 계층 (Physical Layer) - 전기적, 기계적 특성을 이용하여 네트워크 데이터가 전송되는 물리적인 매체입니다. 연결을 설정 및 종료하고 통신 자원을 공유하는 수단을 제공합니다. - Device : 허브, 리피터 - 단위 : Bit - Protocol : RS-232, 10BASE-T, ISDN, wired, wireless 등 2) 데이터링크 계층 (DataLink Layer) - 물리계층을 통해 송수신 되는 정보의 오류와 흐름을 관리하느 계층으로, 1홉 통신..