그럼에도 불구하고

카메라 기능을 사용하는 웹 페이지를 만들어보자 ● 웹 카메라를 사용해 사이트 내 유저의 카메라 화면을 표시하고 싶을 때 웹 카메라로 영상과 사운드의 사용이 가능하며, 반응형 콘텐츠와 실시간 비디오챗 등에 이용한다. 웹 카메라는 getUserMedia()를 사용한다. video 요소 srcObject 속성에 웹 카메라 스트림을 지정하고, video 요소에는 autoplay 속성을 지정한다. autoplay 속성을 지정하지 않으면 브라우저에 따라 화면의 포기가 지연되는 경우가 있다. HTML HTML 삽입 미리보기할 수 없는 소스 JavaScript HTML 삽입 미리보기할 수 없는 소스

오늘은 DOMContentLoaded과 load의 차이점에 대해 알아보겠습니다. [ HTML 생명주기 ] HTML 문서의 생명주기에는 다음과 같은 3가지 주요 이벤트가 관여합니다. DOMContentLoaded – 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생합니다. 이미지 파일()이나 스타일시트 등의 기타 자원은 기다리지 않습니다. load – HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생합니다. beforeunload/unload – 사용자가 페이지를 떠날 때 발생합니다. 세 이벤트는 다음과 같은 상황에서 활용할 수 있습니다. DOMContentLoaded – DOM이 준비된 것을 확인한 후 원하..

이미지 로딩을 지연시키는 코드를 작성해 보자 ● 이미지 로딩 중인 상태를 표시하고 싶을 때 사용 ● 이미지 로딩 후 이미지 데이터에 액세스 하고 싶을 때 사용 웹 페이지 내 이미지 로딩을 지연시키기 위해서는 DomContentLoaded 이벤트에서 img 요소 data-src 속성의 값을 Map에 보관한 뒤 요소의 속성 값을 비워야 합니다.. src가 아닌 data-src를 사용하는 이유는 src 속성에 공백 값이 들어가면 네트워크 통신이 발생하기 때문입니다. 로딩하고 싶은 시점에 Map에 보관한 값을 src 속성에 넣어 작업을 처리합니다. 해당 작업을 사용하여 버튼 클릭 시 이미지를 로딩하는 샘플을 확인해 보겠습니다. HTML HTML 삽입 미리보기할 수 없는 소스 JavaScript HTML 삽입 미..

오늘은 props에 대해 알아보겠습니다. React에서는 component를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. 개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. "props"라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 react element를 반환합니다. [ 함수 컴포넌트 ( Function Component ) ] component를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것입니다. HTML 삽입 미리보기할 수 없는 소스 이 함수는 데이터를 가진 하나의 "props" (props는 속성을 나타내는 데이터입니다.) 객체 인자를 받은 후 react element를 반환하므로 ..

오늘은 React에 대해 알아봅시다. [ 리액트 React ] 리액트는 UI 자바스크립트 라이브러리로써 싱글 페이지 애플리케이션의 UI(User Interface)를 생성하는데 집중한 라이브러리입니다. 리액트는 자바스크립트에 HTML을 포함하는 JSX(Javascript XML)이라는 간단한 문법과 단방향 데이터 바인딩(One-way Data Binding)을 사용하고 있습니다. 그리고 가상 돔 (Virtual DOM)이라는 개념을 사용하여 웹 애플리케이션의 퍼포먼스를 최적화한 라이브러리입니다. 리액트는 싱글 페이지 애플리케이션에서 UI를 만드는 자바스크립트 라이브러리이다 보니, 싱글 페이지 애플리케이션을 제작을 하는 다른 프레임워크에 비해 부족한 부분이 있습니다. 예를 들어 리액트는 페이지 전환 기능을..

자바스크립트 엔진은 도달 가능한 (그리고 추후 사용될 가능성이 있는) 값을 메모리에 유지합니다. 예시: HTML 삽입 미리보기할 수 없는 소스 자료구조를 구성하는 요소도 자신이 속한 자료구조가 메모리에 남아있는 동안 대개 도달 가능한 값으로 취급되어 메모리에서 삭제되지 않습니다. 객체의 프로퍼티나 배열의 요소, 맵이나 셋을 구성하는 요소들이 이에 해당합니다. 만약 어떤 배열에 객체 하나를 추가한다면, 이때 배열이 메모리에 남아있는 한, 배열의 요소인 이 객체도 메모리에 남아있게 됩니다. 이 객체를 참조하는 것이 아무것도 없어도 남게 됩니다. 예시: HTML 삽입 미리보기할 수 없는 소스 맵에서 객체를 키로 사용한 경우 역시, 맵이 메모리에 있는 한 객체도 메모리에 남습니다. 즉, 가비지 컬렉터의 대상이 ..

ES5에서는 배열 내의 검색을 위해서 indexOf()라는 배열 메서드를 사용했습니다. ES6에서는 좀 더 강력한 배열 검색을 지원하기 위해서 find(), findIndex() 두가지의 새로운 메서드를 지원합니다. 기존에 indexOf가 배열 내의 특정 값을 찾는데에 사용되었다면, find, findIndex는 callback 함수를 통해서 좀 더 복잡한 조건의 검색이 가능합니다. [ Array.prototype.find() ] find() 메소드는 주어진 테스트 함수의 조건을 만족하는 첫 번째 요소 값을 반환합니다. 조건에 맞는 요소를 찾을 수 없다면 undefined를 반환합니다. find()는 호출되는 배열을 변경하지 않습니다. HTML 삽입 미리보기할 수 없는 소스 Parameter Descri..

lodash library에 대해 알아보자 [ lodash ] lodash는 JavaScript의 인기 있는 라이브러리 중 하나입니다. 보통의 경우 array, collection, date 등 데이터의 필수적인 구조를 쉽게 다루기 위해 사용합니다. JavaScript에서 배열 안의 객체들의 값을 handling(배열, 객체 및 문자열 반복 / 복합적인 함수 생성) 할 때 유용합니다. 이런 점으로 인해 JavaScript의 코드를 줄여주고, 빠른 작업에 도움이 됩니다. 특히 frontend 환경에서 많이 쓰입니다. ㅡ. (변수) 이런식으로 작성할 경우 lodash wrapper로 변수를 감싸게 되면서 해당 변수에 대한 chaining을 시작합니다. _라는 기호를 이용해서 사용하기 때문에 명칭 또한 lod..

innerHTML, innerText, textContent 속성은 텍스트를 읽어오고 설정할 수 있다는 점에서 비슷해 보이지만, 조금씩 다른 차이가 있다. 그 차이에 대해 알아보자 :) [ innerHTML ] innerHTML은 'Element'의 속성으로, element내에 포함된 HTML 또는 XML 마크업을 가져오거나 태그와 함께 입력하여 내용을 직접 설정할 수 있다. 즉, innerHTML을 사용하면 내부 HTML 코드를 JavaScript 코드에서 새 내용으로 쉽게 변경할 수 있는 것이다. HTML 삽입 미리보기할 수 없는 소스 innerHTML은 유용한 메서드이고, 자주 사용하지만 치명적인 단점을 가지고 있다. ※ innerHTML의 단점 MDN에 따르면 innerHTML은 XSS(Cross..

Element.closest()에 대해 알아보자 [ Element.closest() ] Element의 closest() 메서드는 주어진 CSS 선택자와 일치하는 요소를 찾을 때까지, 자기 자신을 포함해 위쪽(부모 방향, 문서 루트까지)으로 문서 트리를 순회한다. 구문 closest(selectors) 매개변수 selectors: Element와 그 조상 요소들에 테스트할, 유효한 CSS 선택자 문자열을 말한다. 반환 값 selectors에 일치하는 가장 가까운 조상 Element 또는 자기 자신, 일치하는 요소가 없으면 null을 발생 예제 HTML Here is div-01 Here is div-02 Here is div-03 JavaScript const el = document.getElement..

요소의 밝기와 채도를 조절해 보자 [ 요소 밝기 조절하기 ] ● 밝기를 조절하여 요소를 눈에 띄게 만들고 싶을 때 ● 포커스 상태 효과를 주고 싶을 때 밝기 조절은 CSS의 filter 속성에 brightness() 메서드를 사용하여, brightness(100%)가 기본 상태다. 인수가 100% 보다 크면 밝아지고 작으면 어두워진다 CSS Transitions와 Web Animations API의 샘플을 확인해 보자 ※ CSS Transitions를 사용한 샘플 HTML HTML 삽입 미리보기할 수 없는 소스 CSS HTML 삽입 미리보기할 수 없는 소스 JavaScript HTML 삽입 미리보기할 수 없는 소스 클릭 전 클릭 후 ※ Web Animations API를 이용한 샘플 참고 :) https..

importNode()에 대해 알아보자 [ importNode() ] 현재 문서가 아닌 외부 문서의 노드를 복사하여 현재 문서에 넣을 수 있도록 해준다. var node = document.importNode(externalNode, deep); ● node : 문서에 추가될 새로운 노드를 말한다. 새로운 노드가 문서 트리에 추가되기 전까지, 새로운 노드의 parentNode는 null이다. ● externalNode : 다른 문서에서 가져올 노드를 말한다. ● deep : 불리언 타입을 가지며, 다른 문서에서 노드를 가져올 때 노드의 자식 요소들을 포함하여 가져올 것인지에 대한 여부를 결정한다. 실제 사용한 예제를 보자 index.html HTML 삽입 미리보기할 수 없는 소스 app.css HTML ..