크롬 브라우저에서 한글 입력시 버그와 isComposing 속성

문제상황input(또는 textarea)에서 Enter 키를 눌러 메세지를 보내는 코드를 작성했습니다. 그런데 한글을 입력하고 Enter를 누르면 마지막 글자가 남는 버그가 발생했습니다. 그런데, 기묘하게도 영어나 숫자를 입력했을 때는 이러한 버그가 발생하지 않았고, 제출 버튼을 눌러서 제출했을때도 버그가 발생하지 않았습니다. 따라서, 한글입력과 키보드 이벤트와 관련한 이슈로 파악할 수 있었습니다.또한 이러한 이슈는 크롬 브라우저를 사용중인 경우에만 발생하였습니다.구글 검색을 통해 관련 이슈를 찾을 수 있었습니다.코드 수정수정전const handleKeyDown = (e: KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.prev..

• format_list_bulleted 트러블슈팅
• · 2025. 3. 27.

Next.js에서 MSW 도입하기... 그런데 dynamic import를 곁들인

Next.js의 이중환경Next.js에서 작성된 코드는 서버(Node.js)와 브라우저라는 두 가지 다른 환경에서 실행됩니다. SSR(또는 SSG)단계에서는 Node.js 환경에서 코드가 실행되고, CSR단계에서는 브라우저 환경에서 코드가 실행됩니다. 따라서, alert()나 localStorage같은 브라우저 전용 API는 브라우저 환경에서만, fs같은 Node.js 전용 API는 서버환경에서만 호출 가능합니다.MSWMock Service Worker는 자바스크립트 API 모킹 라이브러리입니다. 모킹 API를 이용하면 API가 준비되지 않은 상태에서도 프론트 엔드 개발이 가능하기 때문에 실제 개발에서 유용합니다. 다른 모킹 라이브러리리들은 주로 코드 레벨에서 요청을 가로채는 반면 MSW는 브라우저 전용..

• format_list_bulleted 트러블슈팅
• · 2025. 3. 10.

구글 시트 CORS 에러 해결 삽질기

배경빠르고 간단하게 데이터를 관리할 때 구글 시트는 정말 유용한 도구입니다. 간단하게 공유할 수 있고 여러 부가기능으로 활용도도 높습니다. 유튜브에 나온 맛집들을 한눈에 볼 수 있는 간단한 토이프로젝트 먹튜브를 개발하면서 구글 시트를 데이터베이스로 활용하는 과정에서 CORS 에러를 해결한 경험을 공유하고자 합니다.참고자료 1 : 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕구글 시트에서 확장 프로그램 - App Script를 선택하여 새로운 .gs 파일을 만들고, 다음과 같이 코드를 작성했습니다. doGet 함수를 작성하면 GET 메서드 요청을 처리하는 핸들러 역할을 하게됩니다. 작성 후 배포 버튼을 눌러 웹 앱으로 배포했습니다. 조회 권한을 모든 사용자에게 부여하기 위해, 실행 컨텍스트는 "웹 앱..

• format_list_bulleted 트러블슈팅
• · 2025. 3. 6.

Error: The edge runtime does not support Node.js 'crypto' module. : Next.js 미들웨어의 엣지 런타임 환경

문제상황Next.js에서 페이지 인증 인가 기능 구현을 위해 미들웨어에서 jsonwebtoken 모듈을 사용하려고 했다.Error: The edge runtime does not support Node.js 'crypto' module.Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime원인Next.js 에서 미들웨어는 Node.js환경이 아닌 엣지 런타임 환경에서 돌아간다. 엣지 런타임 환경이란 Next.js에서 제공하는 경량화된 실행 환경이며, 일부 Node.js API만을 지원한다. 이는 미들웨어가 모든 요청을 가로채고 처리하는 만큼, 가능한 빠르고 가벼워야 함을 고려한 것이다.jsonwebtoken 모듈은 Node.js의..

• format_list_bulleted 트러블슈팅
• · 2025. 2. 18.