개발 팁
프로젝트와 상관없이 다시 쓸 수 있는 요령을 문제·원인·해법·코드 예시로 짧게 적습니다.
- touch-action: none을 주면 브라우저 제스처를 직접 만들어야 한다 →그리기 캔버스에 touch-action: none을 주면 손가락 스크롤까지 막힌다. 한 손가락은 그리기, 두 손가락은 스크롤로 직접 나눈다.
- 드래그·그리기 계산은 화면 좌표가 아니라 대상 좌표계에서 한다 →드래그 중에도 스크롤과 확대가 일어난다. 포인터를 대상 좌표로 바꾼 뒤 차이를 구하고, 스크롤 때 다시 계산한다.
- 팝오버·드롭다운·툴팁은 body 포털로 렌더한다 →부모의 overflow·transform·z-index 쌓임 맥락에 갇히면 팝오버가 잘리거나 다른 요소에 가려진다. body에 렌더하고 위치는 직접 계산한다.
- sticky·fixed 위치는 헤더의 실제 높이를 CSS 변수로 받아 쓴다 →top: 64px처럼 숫자를 박으면 모바일에서 헤더가 높아질 때 아래 툴바가 헤더 뒤로 숨는다. 헤더가 제 높이를 재서 CSS 변수로 알린다.
- 잘라야 하는 컨테이너는 overflow: hidden 대신 clip →overflow: hidden은 스크롤 컨테이너라 편집기·focus·scrollIntoView가 몰래 스크롤할 수 있다. 자르기만 하려면 overflow: clip을 쓴다.
- 캔버스 크기에는 픽셀 수 상한을 둔다(iOS Safari) →확대·고배율 화면에서 캔버스 픽셀 수가 브라우저 한도를 넘으면 캔버스가 빈 화면이 된다. 상한을 넘으면 배율을 그만큼 줄여 그린다.
- SPA는 새 버전을 스스로 감지해 새로고침을 권한다 →배포 뒤에도 열려 있는 탭은 새로고침 전까지 옛 번들로 돈다. 탭으로 돌아오거나 다시 연결될 때 index.html의 번들 이름을 비교해 새로고침 버튼을 보여 준다.
- flex·grid 안의 input과 긴 텍스트에는 min-width: 0을 준다 →flex·grid 항목의 기본 min-width: auto 때문에 내용보다 작게 줄어들지 못하고 가로로 넘친다. 모바일 가로 넘침의 가장 흔한 원인이다.