반응형 [macOS] KeyDown 이벤트 한글 입력 관련 문제 원인과 해결 방법(feat. IME) 최근 AI를 활용한 사이드 프로젝트에서 textarea에 입력한 한글만 이상하게 작동하는 걸 발견했다. 한글을 입력한 후 Enter를 누르면 마지막 글자가 포함되어 중복 이벤트가 발생하는 것이다. 왜 이런 문제가 생기는 걸까? 이 글에서는 그 원인을 입력기(IME) 한글 조합 방식과 이벤트 순서의 차이에서 찾고, 이를 React 환경에서 어떻게 해결할 수 있을지 예시 코드와 함께 정리해 보았다.입력기(IME)의 한글 조합한글은 자음 + 모음의 조합형 문자이다. 예를 들어 '한글' 입력 시 'ㅎ → ㅏ → ㄴ → ㄱ → ㅡ → ㄹ' 순서로 입력할 것이다. 이를 'ㅎㅏㄴㄱㅡㄹ'이 아닌 '한글'로 만들어주는 것이 IME(Input Method Editor), 즉 입력기이다. 이처럼 한글 입력에서 자모는 반드시.. 2025. 7. 4. 2025년 React 튜터로 보낸 5개월 회고 작년 12월부터 5월 초까지 진행한 React 기수가 마무리되었다. 역시 많은 인사이트를 얻었고, 가르치는 일에 대한 만족감이 크다는 것을 다시 한번 느낄 수 있었다. 사실 아직 가르친다고 하기엔 조금 부끄러운 수준이다. 수업과 강의를 찍은 대표 튜터님은 따로 있고, 나는 질의응답이나 그때그때 준비하는 라이브 세션이 전부다. 그래도 다행인 건, 하고 싶은 게 있다면 도전해 볼 수 있다는 것이다. 아직은 나도 수업이나 강의를 찍을 경험이 부족하다 생각해서 작은 것부터 다양한 시도를 해보았다. 이전 기수에서는 과정에 필요한 기술 스택을 가르칠 수 있을 정도로 공부하고 함께 성장하는 느낌으로 보냈다면, 이번 기수는 튜터 + 프로젝트 매니저의 느낌이 강했던 것 같다. 하나씩 되짚어보자. 튜터로서, 일반적으로 질.. 2025. 5. 23. 'jsx.intrinsicelements' 형식에... 에러 시 해결 방법 Vite로 React 타입스크립트 프로젝트를 만들었을 때, 컴포넌트 전반에 "jsx.intrinsicelements 형식에..."와 같은 에러 메시지가 뜬다면 타입스크립트 버전 문제일 확률이 높다.타입스크립트 최신 버전으로 설치package.json 타입스크립트 최신 버전으로 명시node_modules 폴더 제거 후 재설치VS Code 재시작위와 같은 방법을 사용해도 에러가 해결되지 않는다면, 다음과 같이 진행하면 해결될 수 있다.1. 명령 팔레트 실행VS Code에서 단축키 또는 왼쪽 하단의 설정 버튼을 통해 명령 팔레트를 실행한다.2. "버전 선택"으로 검색3. 최신 버전의 타입스크립트 선택의도한 버전의 타입스크립트로 선택하면 해결된다. 2025. 3. 6. 당신이 스스로한 생각만이 비로소 당신의 관점이 된다 요즘은 긴 글만 보면 복사해서 바로 ChatGPT한테 요약을 해달라고 한다. 그만큼 긴 글을 천천히 읽고 생각하는 시간 자체가 귀찮은 일이 돼버렸다. ChatGPT가 등장하기 전에는 영어로 된 문서를 천천히 읽어보고 모르는 영어단어는 찾아보고, 스스로 생각하는 시간이 많았다. 이제는 그냥 "아래 내용을 한글로 번역하고, 요약해줘"라고 입력만 하면 어이가 없을 정도로 잘해준다. 얘는 아무 감정도 없는데 고맙다는 표시를 할 정도이다. '정말 좋다'라는 생각이 드는 한편, 너무 편해서 '이해했다'라는 착각이 들어 금방 놔버리기도 한다. 요약을 읽으면 주요 내용을 다 파악한 것만 같지만, 빠르게 파악한 만큼 그 지식은 빠르게 사라진다. 이런 방식이 반복되다 보면 천천히 깊게 생각하는 것 자체가 어려워진다. 직접.. 2025. 1. 28. 프론트엔드 개발자의 부업 퇴근 후 시간을 어떻게 활용하면 좋을지 생각하던 때였다. 결혼식장에서 만난 개발자 지인이 "퇴근 후 몇 시간씩 가르치면 공부도 되고 부수입도 꽤 괜찮아."라고 말했던 게 시작이었다. 좋은 기회라 생각했고, 깊이 고민하지 않고 일단 지원해 보기로 했다. 사실 한 회사에서만 개발을 해왔기 때문에 내 실력이 어느 정도인지 잘 몰랐다. 그런데 단순히 개발 이야기를 하면서 부수입을 만들 수 있다는 점이 마음에 들었다. 그렇게 알 수 없는 자신감 하나로 지원했고, 운이 좋게도 튜터 자리를 얻게 됐다. 처음엔 파트타임으로 가볍게 시작했는데, 시간이 지나면서 점점 더 많은 시간을 투자했다. 결국 다음 React 기수부터는 아예 풀타임으로 전환됐다. 부업이 전업이 되었다. 그동안 재밌게 열심히 해왔지만, 요즘은 이 일을.. 2024. 12. 20. DB 테이블명 똑똑하게 작성하기 최근 Supabase를 사용하면서 여러 시행착오를 겪고 있다. 그중 하나가 바로 DB 테이블명 작성인데, 스스로 명확한 원칙이 없다 보니 꽤나 고생을 했다. 그래서 내 나름대로 명확하고 관리하기 쉬운 테이블명 작성 규칙을 정리해 보았다.왜 테이블명 작성이 중요할까?알아보기 어렵고, 모호한 테이블명은 나뿐만 아니라 프로젝트에 참여한 모두를 힘들게 한다. 테이블이 조금만 늘어나도, 어떤 데이터가 들어가 있는지를 여러 테이블을 확인해 보고 나서야 알 수 있게 된다. 명확하고 직관적인 이름을 사용한다면 불필요한 소통 비용이 줄어들고 유지보수할 때 큰 도움이 된다.명확하고 직관적인 이름을 작성하는 법일관성은 협업과 유지보수의 핵심이다. 테이블명을 작성할 때 데이터의 의미가 직관적으로 드러나야 한다. 예를 들어, .. 2024. 11. 6. Vite + React에서 Kakao Maps API 사용하기 카카오맵 API 사용은 키 발급을 받아야 사용할 수 있다.또한, 키 발급에는 카카오 계정이 필요하다. 아래 과정을 통해 먼저 키를 발급하자.준비하기1. 카카오 개발자사이트 접속 및 로그인2. 내 애플리케이션 클릭3. 애플리케이션 추가하기 클릭4. 앱 이름, 회사명 등 필요한 정보 입력/체크 후 저장5. 플랫폼 - Web 플랫폼 등록 - 저장(Vite dev 서버의 기본 포트는 5173이다.)기본적인 사용 준비는 완료가 되었다. 참고로, 앱 키는 JavaScript 키를 사용한다.아래 "시작하기"부터는 Vite와 React를 사용하여, 웹브라우저에 간단한 지도를 띄워본다.단계별로 하나씩 진행을 해보자.시작하기01. 지도를 담을 영역 만들기가장 먼저, 지도를 담기 위한 영역이 필요하다. 500x400의 크기.. 2024. 9. 16. 이전 1 2 3 4 5 ··· 29 다음 반응형
