일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- vue-cli
- CSS
- https
- web vital
- ts error
- TLS
- caching
- http3
- ViTE
- SSR
- 선택자
- msw
- api test
- e2e
- aws
- Cypress
- import.meta.env
- JavaScript
- rendering
- custom command
- typeScript
- csr
- CloudFlare
- vue
- Testing
- vue3
- 비동기
- QUIC
- devtools
- svelte
- Today
- Total
목록Knowledge (12)
Develop Note by J.S.

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홉 통신..
DB Replication Sync Issue(데이터 정합성) 발생 원인 분석 및 조치 방법입니다. 1. 복제지연 가능성 1) SBR(query기반 복제) 인지 RBR (row기반 복제) 인지 체크 - 한번의 트랜잭션이 영향을 미치는 row의 개수가 적을 수록 RBR이 더 좋음. 2) Write 쿼리량 증가 - master의 Multi-Threaded Replication 설정의 worker 스레드 개수 (16개 이상은 차이가 없다고 함) 3) Slave 로드 증가 - Slave에서 실행되는 Select(조회) 트래픽으로 인해 처리 성능이 지연되면서 복제 지연이 발생하는 경우 2. 조치방법 1) 반동기 복제방식 (Semi-Sync Replication) - Master에 write commit 시 Sla..

1. SEO 과정 1) 크롤링 : 웹 크롤러를 이용하여 웹 페이지 정보를 가져옵니다. 웹 크롤러는 사이트를 방문한 다음 모든 링크를 타고 다니며 새로운 페이지들의 정보를 수집합니다. 텍스트만 읽기 때문에 이미지, 동영상 정보는 읽을 수 없습니다. (alt text요소 추가 필요) 2) 인덱싱 : 웹 크롤러가 수집한 정보를 구글 검색 색인에 저장합니다. 검색엔진에 의해 색인이 완료되면 검색 결과에 노출될 수 있습니다. 3) 랭킹 : 검색엔진은 사용자가 검색하는 키워드를 색인 내에서 가장 일치하는 페이지를 찾아 검색 결과에 노출 시킵니다. 이때 각 검색 엔진의 알고리즘에 따라 페이지들의 순위를 매깁니다. 일반적으로 HTML title, meta description 태그를 사용해야 검색 주제와 콘텐츠에 적합..

웹 브라우저의 렌더링 방식은 SSR, CSR 이 있습니다. 두 방식에 특징 및 장단점에 대한 내용을 정리하였습니다. 1. SSR SSR은 Server Side Rendering의 약자로, 웹 페이지의 내용을 서버에서 모두 구성한 뒤 클라이언트로 보내주는 방식입니다. SSR의 특징은 초기 렌더링이 빠르고 SEO (Search Engine Optimization) 최적화에 대한 장점이 있습니다. 대규모 웹 어플리케이션의 초기 렌더링 속도문제를 SSR로 개선할 수 있습니다. 하지만 추가 페이지를 로드할 경우 서버에 Request를 보내는 Cycle을 반복하여 전환 시 화면 깜빡임 문제, 서버 과부하 문제 및 로드 시간이 소요되는 단점이 있습니다. 2. CSR CSR은 Client Side Rendering의 ..

[속도느림/ 구현단순] 1. 선택정렬 : 0부터 n번째 자리에 순서대로 최솟값을 찾아 앞에 배치 2. 삽입정렬 : 배열의 두번째 index부터 시작하여 앞 index값과 비교해 더 작은 수일 경우 지속적으로 swap하여 앞으로 끌어오는 정렬 3. 버블정렬 : 배열([0,1], [1,2], [2,3])앞뒤 두 index를 비교하며 swap [속도빠름/ 구현복잡] 1. 합병정렬 : 배열 중앙기준 지속적으로 반으로 나눈 후 새로운 배열을 할당한 뒤 기존 나뉜 쌍으로 부분배열의 값 중 작은값을 채워넣는 방식 2. 셀 정렬 : 배열길이/2 만큼의 간격을 늘리고 간격수만큼 배열을 나눈뒤 각 배열을 삽입정렬한다. 이후 기존 간격/2하여 동일하게 반복 3. 퀵 정렬 : 분할, 정복, 결합 3단계로 나뉜다. 0 inde..