플랫폼 트러블슈팅

한글 이슈

• 한글 조합 키 이벤트: https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent

한글 조합전 텍스트 길이 확인

• input 이벤트에서 event.target.value 사용

한글 조합전 TextArea 높이 조정

• input 이벤트에서 event.target.value 사용

IOS 천지인 키보드 이슈

• IOS 천지인 키보드에서 받침 다음에 가운뎃점(·) 입력 시, 마지막에 입력한 받침의 유니코드가 ㄱ-ㅎ 정규식과 다름
• 유니코드를 작성하는 것으로 해결해야함

기능

• Blur 전에 Click 이벤트 실행
  • Mousedown에서 preventDefault 처리

    <input onblur="">
    <button onmousedown="(event) => event.preventDefault()" onclick="" />

• Textarea 자동 높이 조절
• 개행문자 개행 처리
  • p {white-space: pre-wrap;}
  • p {white-space: pre-line;} : 맨 앞 공백 제거 필요시

IE

카카오 주소검색 기능을 DOM 레이어로 만들었는 데, 검색 이후 input 동작안함

• 원인: iframe 내 input 포커스 해지 전 DOM 제거
• 해결 방법: 로 포커스 해지 후 DOM 제거

TextArea의 scrollHeight 초기값이 두줄로 나옴

• 요구사항: TextArea를 초기에 한줄로 표시하고, 컨텐츠에 따라 가변 처리
• 원인: rows가 기본값이 2임
• 해결방안: rows를 초기에 1로 조정

TextArea의 Wrapper height와 Textarea의 rows가 일치하지 않으면 텍스트만 넘침

• 원인: rows가 클 때, 넘침
• 해결방안: rows 와 height를 일치시킴

IE 대응 시, Cache-Control 설정

22.10.27 휴리스틱 캐싱일듯

IE는 GET Method의 REST API를 캐싱한다. 그래서 Response Header에 Cache-Control: no-cache가 필요하다.

[nuxt v2.12.2] flat 함수 미동작함

• flatMap 또는 spread 문법으로 대체

toString.call({}), toString.call([]) 에러

// Not Cool
const obj = {}
const arr = []
toString.call(obj)
toString.call(arr)

// Cool
const obj = {}
const arr = []
({}).toString.call(obj)
([]).toString.call(arr)

Safari

사파리 Date

// 크롬에서는 되지만, 사파리에서 안됨
new Date('2020-01-01 00:00:00')

// 사파리에서 이렇게 해야 동작됨
new Date('2020-01-01T00:00:00')

IOS

• jest의 watch 옵션 안될 때, brew install watchman으로 해결 (jest --watch 관련)
  • https://stackoverflow.com/questions/58753539/reactjs-test-fsevents-is-not-a-function/59549892#59549892
• IOS Event Delegation
• iOS 10 / Safari / Select Element 삭제 버그
• undo, redo할 때 Command + Z 조합은 keyup에서 체크 못함.
  • (해결 방법) Ctrl + Z는 keyup에서 체크 가능함으로 Hotkey 변경으로 해결