발단 서비스를 운영하던 도중 CPU/Memory 사용량은 낮은데 사용자 응답이 매우 느려지는 상황이 발생하였다. 서비스는 쿠버네티스로 띄워져있었고, HPA metric으로 CPU와 memory가 걸려있었는데, CPU와 memory가 올라가지 않으니 scale-out도 발생하지 않아 적은 pod으로 계속 서비스 되고 있었다. 수동으로 pod을 3~...
next.js caching
next.js app router의 caching에 관해 공부한 내용입니다. Overview next.js 에서 제공하는 caching mechanism에는 다음과 같은 것들이 있다. Mechanism What Where Purpose Duration ...
next.js props drilling
Data sharing (Solving props drilling) next.js 13.4 이상 App router 기준으로 작성하였습니다. props drilling 예시 next.js에서 주로 발생하는 props drilling 형태는 다음과 같습니다. 먼저 필요한 데이터를 서버컴포넌트에서 fetch 합니다. API 노출 방지, 최적화...
React 새로고침/뒤로가기 막기
웹페이지에서 사용자가 무언가를 입력하고 뒤로가기를 눌렀을때 다음과 같은 경고창을 띄우는 걸 본적이 있다. 이러한 스펙을 개발하기위해서는 다음과 같이 두가지 상황으로 나누어야한다. 새로고침/창닫기/링크이동(외부페이지 이동 or 링크 버튼 클릭) 뒤로가기 그렇다면 리액트에서는 구체적으로 어떻게 이 스펙을 구현할 수 있을지 알아보자 ...
IOS 16.5에서 video가 크기 변경이 적용되지 않는 이슈
Spec Swiper (ver 4.5.1) 안에 <video> 태그가 slide로 포함되어있음. 현재 가장 가운데 있는 slide 안의 video는 크기를 키우고, slide가 옆으로 이동하면 다시 원래 사이즈로 돌아가도록 함 Issue IOS 16.5 safari에서는 다음과 같...
es6에서 도입된 문법
let, const 키워드를 통한 변수선언 기존 자바스크립트에서는 var 키워드로만 변수선언이 가능했다. 하지만, let const 키워드를 추가하여 보다 예측가능한 코드를 작성할 수 있게 됐다. // es6 이전. // var는 재선언 가능 var a = "This is string"; var a = 1234; // ES6 이후 // let은 ...
영상이 자동재생되지 않는 문제
다음과 같은 요구사항을 가지는 웹페이지를 개발하고 있었다. swiper로 여러 슬라이드를 띄움 슬라이드 내에는 영상이 존재하고, 각 영상은 자동으로 재생되어야함. 단순히 swiper를 연동하고 video 태그에 autoplay 속성을 주면 될거라 생각하여 다음과 같이 코드를 작성했었다. <li className="swiper-sl...
DB index
## 인덱스란? DBMS에서 데이터베이스 테이블의 모든 데이터를 검색하여 데이터를 찾기에는 시간이 오래 걸리기에, 데이터의 칼럼의 값과 그 데이터가 저장된 레코드의 주소를 키와 값의 쌍으로 만든 것. DBMS의 인덱스는 항상 정렬된 상태를 유지하기 때문에, 원하는 값을 탐색하는데는 빠르지만, 추가/삭제/수정에는 쿼리문 실행 속도가 느려진다.(작업...
딥링크
딥링크는 웹사이트에서 사용자 기기에 설치된 앱을 URI로 실행시킬 수 있도록하는 기술이다. 딥링크의 세가지 유형 이러한 딥링크에는 세가지 유형이 있다. URI Scheme (초기 형태) 보완 Universal Link (IOS) App Link (Android) URI Scheme 앱...
bfcache
BFCache 사용자가 브라우저 내에서 뒤로가기/앞으로가기를 할 때 이전 페이지를 자바스크립트 heap 영역까지 전체 캐싱하여 메모리에 저장하는 것 HTTP 캐시는 리소스만을 캐시하고 JS 작업까지 캐시하지 않기에 BFCache보다 빠르지 않다. BFCache 작동을 판단할 수 있는 API pageshow, pagehide pag...