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 ..

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

인코딩 / 디코딩 인코딩 (encoding) 사람이 읽을 수 있는 데이터를 컴퓨터가 읽을 수 있는 부호로 변환 디코딩 (decoding) 컴퓨터가 읽을 수 있는 데이터를 사람이 읽을 수 있도록 변환 Charset (문자셋) 아스키코드 가장 처음 생성된 문자셋 128개의 문자 조합을 제공하는 7비트 부호 한글은 지원하지 않음 유니코드 기존에 아스키코드에서 담을 수 없는 문자를 정의하기 위해 탄생 2byte 한글도 가능 UTF-8 가변 길이 유니코드 인코딩 시스템 메모리 낭비 방지 영어권: 0 ~ 127 사이의 코드 포인트들은 1byte로 저장 (기존의 유니코드는 2byte로 저장함) 이 외: 128 이상은 모두 2byte or 3byte로 저장 (한글은 3byte) 메타 태그 사용 는 meta 태그의 ch..

OG (Open Graph)란? 웹 사이트를 공유할 때 보통 URL을 사용한다. 이때 미리 보기 화면으로 노출되는 부분은 오픈 그래프 태그로 마크업 한다. 페이스북에서 만든 프로토콜로 항상 같은 메타 정보를 표시하도록 한다. 예를 들면 네이버 또는 카카오톡 등에서 링크를 공유할 때, og 태그에 작성된 정보로 노출된다. 많은 사람들을 서비스로 유입시킬 수 있도록 open graph 태그를 작성하는 것은 중요하다! https://ogp.me/ Open Graph protocol The Open Graph protocol enables any web page to become a rich object in a social graph. ogp.me 태그 작성 방법 이 외에도 Open Graph 사이트에 들어가..

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