내가 보려고 만든 개발 공부 일지

자바스크립트 공부를 하면서 유사배열이 어쩌고 이터러블이 어쩌고 하는 말을 종종 들었었다. 그런데 실제로 개발할땐 그냥 배열만 잘 다룰줄 알아도 전혀 문제가 없었기에 굳이 찾아보거나 하진 않았다. 그래서 이번에 배열, 이터러블, 유사배열 이 세가지 녀석들에 대해 공부한 내용을 정리해 본다. 1. 배열 배열은 우리에게 너무나도 친숙한 녀석이다. 배열은 자바스크립트 내장 함수인 Array에 의해 만들어지는 객체 타입의 자료형이다. let a = new Array(); // (1) let b = []; // (2) 배열 선언은 위와 같이 할 수 있는데, (1) 과 (2) 는 같은 뜻이다. (1)을 단축해서 쓴것이 (2)이다. new 키워드를 통해 반환된 값이기 때문에 당연히 배열의 타입도 객체이다. let a ..

HTML 요소 포커싱 HTLM 요소의 포커싱 관련 이벤트로 onfocus 와 onblur 가 있다. 이 두 이벤트는 서로 짝꿍이다. 이름 그대로 HTML 요소가 포커싱 되었을땐 onfocus 이벤트가 발생하고, 반대로 포커싱 해제 되었을땐 onblur 이벤트가 발생하게된다. 여기서 '포커싱' 이란 HTML 요소가 마우스 클릭 혹은 Tab키로 선택이 가능한 것을 의미한다. 모든 HTML 요소가 다 포커싱 가능한것은 아니다. 기본적으로 포커싱 가능한 HTML 요소로는 a, button, details, input, select, textarea 가 있고 이 요소들을 대화형 요소 라고 부른다. 위 6개 요소들을 제외한 HTML 요소들은 비대화형 요소 라고 부르며 (div, span, ul ... 등 같은 나머..

React로 카카오톡과 같은 채팅 컴포넌트를 만들던 중 발견한 버그와 해결한 방법을 기록해봅니다. 위 이미지는 내가 만들고있던 Chatting.tsx 컴포넌트다. 기록된 메시지들이 보이는 부분이 ChattingList.tsx 이고, 메시지를 입력하는 아랫부분이 ChattingInput.tsx 이다. ChattingInput 에 텍스트를 입력하고 Enter를 누르거나 전송을 클릭하면 입력된 텍스트가 ChattingList에 추가되는 기능을 구현했다. 그런데, 영문을 입력하면 정상적으로 ChattingList에 잘 추가가 되었지만 이상하게 한글만 입력하면 입력된 텍스트와 그 텍스트의 마지막 부분이 잘려서 두번 이벤트가 발생하는 것이었다... 위 이미지와 같은 현상이 발생했다. 그래서 개발자도구에서 break..

webpack 이 뭐고 왜쓰는지에 대해 간단히 적어봅니다. 웹팩은 웹개발을 도와주는 많은 기능들을 가지고 있는 자바스크립트 모듈 번들러이다. 기본적으로 import, export 를 통해 서로 의존관계에 있는 html, js, img, css 같은 모든 리소스들을(= 모듈) 모두 찾아서 연결해주고 하나의 파일로 만들어준다. 웹팩을 쓰지 않고 그냥 import 구문을 쓰게되면 브라우져에서 실행 시 에러가 난다. 브라우저가 import, export 를 못알아먹기 때문인데, 그래서 스크립트 태그에 이런식으로 타입=모듈 을 명시해줘서 '이 스크립트는 모듈이다' 하고 브라우저에게 알려줘야 import export 를 쓸 수 있다. 그치만 웹팩을 사용하면 파일들을 하나의 결과물 파일로 만들어주기 때문에 위처럼 일..