react 4

채팅창에 "안"이 두 번 찍히는 이유 — 한글 IME와 Enter 키의 오래된 싸움

증상부터 보시죠직접 만든 웹 채팅 UI에서 이런 일이 있었는데요. 한글로 문장을 입력하고 Enter를 눌렀더니, 메시지가 정상적으로 전송된 다음에 마지막 글자 한 개짜리 메시지가 하나 더 전송되는 현상이 생겼습니다.사용자: 다음 주 회의 자료 초안사용자: 안영문으로 입력할 때는 멀쩡하고, 한글로 칠 때만 그렇습니다. 처음엔 이벤트 리스너를 두 번 등록했나 싶어서 코드를 뒤졌는데 그게 아니었구요. 원인은 훨씬 더 근본적인 곳에 있었습니다. 바로 IME(Input Method Editor, 입력기) 입니다.한글 입력은 "조합"이라는 중간 상태를 거칩니다영문은 키를 누르면 그 글자가 곧바로 확정됩니다. a를 누르면 a가 입력되고 끝이구요.그런데 한글은 다릅니다. ㅇ → 아 → 안 처럼 자모가 모여서 하나의 음..

[지식루프 IT공부] 함수와 컴포넌트 차이

1단계: 함수는 계산기 같은 개념입니다.함수는 입력값을 받아서 결과를 계산해주는 도구입니다.function add(a, b) { return a + b;}add(2, 3); // 결과: 5 add 함수는 두 숫자를 받아서 더한 값을 반환합니다.결과는 숫자 5와 같은 값입니다.2단계: 컴포넌트는 화면을 만드는 틀입니다.컴포넌트는 화면에 보여줄 내용을 만드는 React 전용 함수입니다.function Hello() { return 안녕!;}Hello 컴포넌트는 "안녕!"이라는 화면을 보여줍니다.결과는 숫자가 아닌, 화면에 나타나는 HTML 태그 조각입니다.3단계: 함수와 컴포넌트의 비교 표입니다.구분함수컴포넌트생김새function 이름(…) {}function 이름(…) {}반환 결과숫자, 문자열 등 ..

IT공부 2025.04.16

[지식루프 IT공부] 리액트 실행 안될때 해결방법

npm init react-app .  명령어를 실행했으나, 다음과 같은 메시지만 나오고 프로젝트가 생성되지 않았을 때, > npx > create-react-app . You are running create-react-app 5.0.1, which is behind the latest release (5.1.0). We recommend always using the latest version of create-react-app if possible. The latest instructions for creating a new app can be found here: https://create-react-app.dev/docs/getting-started/ Getting Started | Create..

IT공부 2025.04.13

맥북 os 세콰이어 에서 react 프로젝트 생성 실패 시 해결방법

맥북 os 세콰이어에서 node js 를 설치하고 npm run start 를 실행했더니, 이런 에러 메세지가 나왔었습니다. Failed to compile. Module not found: Error: Can't resolve 'web-vitals' in '/Users/danymac/Desktop/hello_react/src' ERROR in ./src/reportWebVitals.js 5:4-24 Module not found: Error: Can't resolve 'web-vitals' in '/Users/danymac/Desktop/hello_react/src' webpack compiled with 1 error One of your dependencies, babel-preset-react-a..

IT공부 2025.02.12