Advanced/JavaScript
[TypeScript] type과 interface 비교
[TypeScript] type과 interface 비교
2021.05.08TypeScript에서 type과 interface에 대한 차이를 살펴보겠습니다. 기본적인 사용 방법 기본적으로 type과 interface을 사용해 타입을 정의하고 지정하는 방법은 같습니다. interface IStudent { id: number; name: string; } type TStudent = { id: number; name: string; }; const interfaceStudent: IStudent = { id: 0, name: 'name', }; const typeStudent: TStudent = { id: 0, name: 'name', }; 타입을 확장하는 방법 type과 interface는 타입을 확장하는 방법에 차이가 있습니다. type은 & 연산자, interface는 e..
[JavaScript] 함수를 콜백으로 전달할 때
[JavaScript] 함수를 콜백으로 전달할 때
2021.02.12메일로 한 통의 미디엄 글을 받았습니다. 해당 글의 경우 parseInt를 map에 전달했을 때 이상한 값이 나온다는 내용이었는데 코드는 다음과 같습니다. ['1', '7', '11'].map(parseInt); // [1, NaN, 3] ['1', '7', '11'].map(Number); // [1, 7, 11] 위와 같이 나오는 이유에 대한 글인데, parseInt와 Number의 매개변수는 각각 다음과 같습니다. parseInt: string, radix Number: value Number에서는 잘 동작하지만 parseInt에서는 값의 결과가 깨지는 이유는 array.map의 콜백으로 parseInt를 사용하는 것이 함수 설계에 맞지 않기 때문입니다. 무엇이 문제일까? const numList ..
[JavaScript] Virtual DOM 만들기
[JavaScript] Virtual DOM 만들기
2021.01.26React 공식 홈페이지에서는 Virtual DOM을 'UI로 표현될 객체를 가상 메모리에 저장하여 라이브러리에 의해 실제 DOM으로 동기화 하는 개념'으로 표현하고 있습니다. 여기서 UI로 표현될 객체는 DOM을 의미하며, 라이브러리는 VirtualDOM을 렌더링해주는 라이브러리를 의미합니다. TLDR 리액트는 두 가지 전략을 사용해 diff 알고리즘을 기존의 O(n^3)에서 O(n)으로 성능 개선을 하였습니다. 리액트에서 사용하는 Virtual DOM을 바닐라 자바스크립트로 충분히 구현 가능하다는 것을 알 수 있습니다(본 게시글의 Virtual DOM 코드는 리액트의 Virtual DOM diff 알고리즘과 많이 다릅니다). 리액트를 사용할 때 데이터의 변화에 따른 화면 변화의 흐름을 이해한다면 Vi..
[JavaScript] 바닐라 자바스크립트로 웹 컴포넌트 만들기
[JavaScript] 바닐라 자바스크립트로 웹 컴포넌트 만들기
2021.01.25자바스크립트만 사용해서(제이쿼리, 리액트, 뷰 등을 사용하지 않고) 웹 컴포넌트를 만드는 방법에 대해 알아보겠습니다. 바닐라 자바스크립트란? 프레임워크나 라이브러리가 포함되지 않은 순수한 자바스크립트를 의미합니다. 웹 컴포넌트 HTML 엘리먼트를 위해 만들어진 재사용 가능한 자바스크립트 코드를 의미합니다. 재사용이 가능하다는 것은 코드가 함수 등으로 작성되어 언제든 임의의 HTML 엘리먼트에 적용할 수 있다는 것을 의미합니다. TLDR; 함수를 이용해 만드는 방법은 쉽고 빠르게 작성할 수 있어 웹 컴포넌트를 구현할 때 가장 많이 쓰이는 방식 MutationOvserver는 IE11 이하 버전을 지원하지 않으며, 모든 엘리먼트의 추가 / 제거를 감시해 성능 문제를 일으킬 수 있음 커스텀 엘리먼트를 만드는 ..
[JavaScript] Element를 저장 및 불러오기
[JavaScript] Element를 저장 및 불러오기
2021.01.04[JavaScript] Element를 저장 및 불러오기 이 글은 Range 값을 저장하기 위해 코드를 작성하다가 localStorage에 Element 정보가 저장되지 않아서 이를 해결하기 위한 트러블 슈팅을 정리한 글입니다. TLDR; Range 값을 저장 후 불러오고 싶은데, Element 값을 저장할 수 없었습니다. JSON.stringify를 사용해서 Element를 문자열 값으로 수정하려 하더라도 빈 객체가 반환되었습니다. 이를 해결하기 위한 방법을 알아보던 중, 페이지의 Element에 data-key를 모두 설정한 뒤, 해당 data-key를 저장하는 방법도 있었습니다. 하지만, 이 방법의 경우 페이지 내에서 변경이 일어난다면 data-key 값이 이전과 같을 것이라 보장할 수 없습니다. ..
[JavaScript] Selection과 Range
[JavaScript] Selection과 Range
2020.12.29[JavaScript] Selection과 Range JavaScript를 사용해 document 내의 선택된 항목에 접근해서 DOM 노드의 전체 또는 선택된 부분을 가져오는 등의 작업을 할 수 있습니다. Selection과 Range는 WYSIWYG 에디터, 리치 에디터 등을 구현할 때 매우 중요하게 사용됩니다. TLDR document 내의 선택된 콘텐츠의 정보를 가져오기 위해 Selection과 Range 객체를 사용할 수 있습니다. input, textarea 엘리먼트의 경우, element.selectionStart 및 element.selectionEnd 값을 설정해 조작할 수 있습니다. Selection 및 Range 가져오기 const selection = document.getSelect..
[JavaScript] 캘린더 만들기 - 한 주 구하기
[JavaScript] 캘린더 만들기 - 한 주 구하기
2020.12.20[JavaScript] 캘린더 만들기 - 한 주 구하기 얼마 전, 사이드 프로젝트를 진행하면서 달력이 필요한 적이 있었습니다. 기존의 캘린더 라이브러리의 경우 커스텀이 어렵고, 원하지 않는 기능까지 포함하고 있어서 간단하고 커스텀에도 용이한 달력을 직접 만들게 되었습니다. 이번 포스팅에서는 프로젟트를 진행하면서 만들었던 달력의 핵심 기능에 대해서 정리 후, 공유해보려 합니다. typscript를 이용해 작업했으며, arrow function 등과 같은 es6 문법을 사용했으며. date-fns 라이브러리를 사용해 Date를 관리하고 있습니다. 달력을 커스텀해서 작업해야 하는 분들에게 도움이 되었으면 합니다. 달력의 구조 달력의 가장 기본적인 형태는 한 달의 전체 일자를 표시하며, 한 달은 대게 5주~6주..
[JavaScript] 가변 인자 함수
[JavaScript] 가변 인자 함수
2020.11.16가변 인자 함수 가변 인자 함수는 매개변수의 최대 갯수가 지정되지 않은 함수를 의미합니다. sum(10, 20, 30, ...); 가변 인자 함수를 이용해 위와 같이 인자의 갯수 제한이 없는 함수를 작성할 수 있습니다. arguments 객체 가변 인자 함수를 작성하는 가장 기본적인 방법은 arguments 객체를 사용하는 것입니다. function sum() { console.log('length: ', arguments.length); console.log('index 1: ', arguments[1]); } sum(10, 20); 위 코드의 실행 결과는 다음과 같습니다. length: 2 index 1: 20 arguments 객체에 대하여 arguments 객체는 function 함수에서 접근 가..
자바스크립트 이벤트 델리게이션 패턴
자바스크립트 이벤트 델리게이션 패턴
2020.11.12자바스크립트 이벤트 델리게이션 패턴 이벤트 델리게이션 패턴은 자바스크립트의 대표적인 디자인 패턴 중 하나입니다. 최근 HTML, CSS를 조작하는 웹에서 사용자의 '클릭', '호버' 등과 같은 동적인 이벤트를 관리하기 위해서 DOM에 이벤트를 작성하는 '이벤트 리스너(Event Listener)'가 있습니다. 이벤트 델리게이션 패턴은 이 이벤트 리스너를 보다 더 효율적으로 관리하기 위한 디자인 패턴입니다. 자바스크립트 이벤트 리스너 먼저, 자바스크립트의 이벤트 리스너에 대해 알아보겠습니다. 이벤트 리스너의 말 그대로 이벤트가 발생하기까지 대기하고 있습니다. 여기에서 이벤트란, 사용자가 브라우저에 하는 행동을 의미합니다. 이벤트 리스너가 엘리먼트에 추가되어 있다면 엘리먼트가 클릭되거나 마우스가 호버되고 더..
JavaScript 이벤트 전파 중단 방법 (IE 대응 추가)
JavaScript 이벤트 전파 중단 방법 (IE 대응 추가)
2020.11.10JavaScript 이벤트 전파 중단 방법 (IE 대응 추가) 자바스크립트에서 이벤트 처리를 할 때 계층적으로 이벤트가 실행되는 경우가 있습니다. 이를 이벤트 버블링이라 합니다. 또한, 이벤트 버블링으로 인해 예상하지 못한 결과를 겪을 때가 있습니다. 이에 따른 해결 방법은 다음과 같습니다. 이벤트 수행을 막는 방법 자바스크립트에서 이벤트 수행을 막기 위해서 제공하는 메소드가 몇 가지 있습니다. event.preventDefault() event.stopPropagation() event.stopImmediatePropagation() 각각 어느 상황에 사용되는지에 대해 알아보겠습니다. 부모에게 이벤트가 전파되는 것을 막기 클릭 $parentDiv = document.querySelector('#..
자바스크립트 이벤트 버블링과 캡쳐
자바스크립트 이벤트 버블링과 캡쳐
2020.11.03자바스크립트 이벤트 버블링과 캡쳐 HTML DOM API에서 이벤트를 전파하는 방법에는 이벤트 캡쳐링과 이벤트 버블링이 있습니다. 이를 간단하게 소개해보겠습니다. 이벤트 캡쳐링 위 사진에서 Capture Phase (1)에 해당하는 부분이 이벤트 캡쳐링에 해당합니다. 이벤트가 가장 바깥쪽 요소부터 안쪽 요소로 즉, Target Phase (2)까지 전파가 됩니다. Click Me 위의 코드에서 'Click Me'를 감싸고 있는 DOM 엘리먼트를 클릭하면 'click parent div', 'click child div' 순서대로 2개의 Alert를 확인할 수 있습니다. addEventListener의 useCapture 인자 이는 addEventListener의 3번째 인자 useCapture를 true..
JavaScript child element mouseout 이슈
JavaScript child element mouseout 이슈
2020.10.29JavaScript child element mouseout 이슈 자바스크립트에서 mouseover 또는 mouseout을 지정할 때 이벤트가 지정된 엘리먼트가 child element를 포함하고 있다면 문제가 발생합니다. Text 위 코드에서 MyFuncOut 함수의 호출은 div#parent 엘리먼트를 벗어났을 때 되어야 합니다. 하지만, span 태그로 마우스를 이동하면 MyFuncOut 함수가 호출됩니다. 이는 마우스가 span 엘리먼트를 가르킴으로서 div 엘리먼트를 벗어났다고 인식해서 발생하는 것이지만, 대부분의 경우에는 MyFuncOut 함수가 호출되지 않는 것을 바랄 것입니다. 이를 해결할 수 있는 방법은 다음과 같습니다. 해결법 pointer-events: none Text 첫 번째 방법..