input tag의 event 중 onKeyDown, onKeyPress, onKeyUp, onInput, onChange에 대해 정리를 하려고 한다. 이번에 몰랐던 사실들을 많이 알게 되었다 🤔 🤔 그럼 각 이벤트에 대해 먼저 알아보자! onKeyDown 키보드에서 키가 눌렸을 때의 그 시점이다. 다른 이벤트와의 차이점은 onKeyDown만 눌렀을 때, 계속 실행이 된다는 것이다. onKeyPress onKeyDown과 마찬가지로 키보드에서 키가 눌렸을 때의 그 시점이다. 다른 이벤트와의 차이점은 KeyCode 값이 아닌 ASCII 값이기에 한글을 포함해 shift, ctrl, backspace, tab, 한/영 등의 키를 인식하지 못한다는 것이다. 아래의 사진을 보면, 한글을 입력했을 때 해당 이벤트..

안녕와 같이 HTML 텍스트를 그대로 렌더링 하기 위해선 dangerouslySetInnerHTML를 사용할 수 있다. dangerouslySetInnerHTML란? HTML 텍스트를 동적으로 렌더링할 수 있는 리액트의 속성이다. 리액트 컴포넌트에 직접적으로 HTML 코드를 삽입할 수 있다. __html이라는 key를 가지고 있으며, 이를 통해 렌더링 할 HTML 코드를 문자열 형식으로 전달한다. 사용법 import React from 'react'; function Component(){ const markup = { __html: "contains HTML!!" }; return ; } 주의점 이름에서도 dangerous라고 나타나듯이, 위험하게 설정된 HTML을 뜻한다. XSS(Cross-site ..

javascript:void(0)에서 javascript: 와 void(0)로 나눌 수 있다. 각각의 부분에 대해 알아보자. 링크 javascript: 태그의 href 값으로 javascript:를 받을 때, 이는 경로로 취급하지 않고 쌍점(:) 뒤에 오는 것을 자바스크립트 코드로 해석한다. 주로 href에는 경로를 넣기 때문에, 클릭 시 페이지 이동이 일어난다. 하지만 이 경우에는 이동이 일어나지 않는다. 링크 '링크'를 누르면 콘솔 창에 '클릭'이 출력된다. void(0) void는 아무것도 반환하지 않는 것을 말한다. 함수에서도 void는 아무런 결괏값도 반환하지 않는 것으로. 호출 시 undefined를 반환한다. const sum = void(5+5); console.log(sum); // un..

HTML에서 태그는 또는 영역에 넣을 수 있다. 그 차이를 알아보고 어떤 상황일 때 어디에 넣어야 할지를 알아보겠다. script 태그는 1. 다운로드(fetching) 2. 실행(executing)의 두 과정을 거친다. HTML은 구문 분석을 하는 파싱을 하다가, script 태그를 만나면 파싱을 멈추고 script 태그를 다운로드하여 실행한다. 파일의 크기가 클 경우, 로드하는 과정이 오래 걸릴 수 있다. head 태그에 script 태그가 들어간 경우, HTML 파싱이 완료되기 전에 scipt 태그를 실행한다. 따라서 DOM 요소를 조작해야 한다면, 해당 시점에서 존재하지 않는 DOM 요소에 접근하는 문제가 발생할 수 있다. 태그가 파싱되기 전이기에 js 파일이 null을 가지고 작업한다. 이에 따..

HTML은 Hyper Text Markup Language의 약자로 웹 페이지를 다루는 마크업 언어이다. HTML 기본 구조 HTML 문서는 로 시작하여 로 끝난다. 영역에는 내용과 같이 웹 문서의 제목을 입력해 줄 수 있으며 제목이 필요하지 않을 시에는 생략하면 된 다. ,, 이곳에 미리 입력해 주면 안에 적용이 된다. body {}는 body 전체 공간이며 c01은 c01으로 지정한 곳에만 해당이 된다. c01으로 지정한 부분이다. 가나다 가나다 c01에 글자색을 파란색으로 지정했으므로 첫 번째 줄과 두 번째 줄 모두 글자색이 파란색으로 나온다.