새로 알게된 내용

원티드 인턴쉽 2주차 사전과제를 진행하면서 다양한 이슈를 발견하고 팀원들과 함께 해결했습니다. 이 과정에서 배운 내용을 정리했습니다.

1. 검색 창에 한글 입력 후 keyDown 이벤트 진행시, 중복으로 발생하는 이슈 처리 방법

  • 원인 : 한글과 같은 조합 문자는 문자를 변환하는 IME(Input Method Editor) 과정에서 OS와 브라우저 모두 이벤트를 처리하기 때문에 keyDown 이벤트가 중복으로 발생됨

  • 해결 : 글자가 변환 중인지 알려주는 KeyboardEvent의 isComposing 값을 이용하여 이벤트 핸들러가 한 번만 호출되도록 개선 가능

    const handleKeyDown = useCallback(
...
if(e.isComposing) return;
);

  • 추가 설명

    • IME composition

      • IME는 영어가 아닌 언어들을 다양한 브라우저에서 지원하도록 언어를 변환시켜주기 위한 OS 단계의 APP
      • IME 과정에서 keyDown 이벤트가 발생하면, OS와 브라우저에서 해당 이벤트를 모두 처리하기 때문에 이벤트가 중복으로 발생

    • isComposing

      • 한글과 같이 자음과 모음의 조합으로 한 음절을 이루는 조합 문자는 변환하는 과정에서 글자가 조합 중인지 끝난 상태인지를 알 수 없음
      • KeyboardEvent.isComposing 값을 이용하면 글자 조합 중에 이벤트가 발생했는지를 알 수 있음

2. 브라우저에서 제공하는 스토리지 비교

  1. 로컬 스토리지

    • 탭이 닫혀도 데이터가 유지 됨
    • 동기 방식으로 동작하며 메인 스레드 연산을 중단시킴
    • 용량 제한은 5MB이며 문자열만 저장할 수 있음

  2. 세션 스토리지

    • 탭 안에서만 유효하며 탭이 닫히면 스토리지도 종료 함
    • 현재 탭에서만 사용하는 IndexedDB 키를 잠시 저장하는 것과 같이 작은 용량 데이터를 저장할 때는 좋음
    • 동기(synchronous) 방식으로 동작하기 때문에 메인 스레드 연산을 중단시킴
    • 용량 제한은 5MB이며 문자열만 저장할 수 있음

  3. 캐시 스토리지

    • 요청 및 응답에는 HTTP를 통해 전송할 수 있는 모든 종류의 데이터가 포함
    • 비동기 방식으로 동작하며 메인 스레드 연산을 중단하지 않음
    • 많이 저장할 수 있으며 적어도 수백 MB, 경우에 따라 수 GB 이상까지도 될 수 있습니다. (브라우저 구현은 다를 수 있지만 사용 가능한 저장 공간의 양은 일반적으로 장치에서 사용 가능한 저장 공간의 양에 따라 결정)

한 주 회고

5월이 시작하면서 마음 가짐을 새로 잡고 싶었습니다. 무언가를 하더라도 차분히 이해를 바탕으로 쌓아가고 싶었습니다. 아주 사소한 행동이더라도 이유를 생각할려고 노력했습니다. 쉽지는 않았습니다. 그래도 앞으로 당연하게 여겼던 생각과 행동에 대해서 ‘왜’를 곱씹으면서 앞으로 살아가고 싶습니다.


참고