Headless란? Headless를 그대로 번역하면 ‘머리가 없는’이라는 뜻이다. 구글에 Headless를 검색 시, 가장 많이 나오는 단어는 Headless browser로 ‘창이 없는’ 브라우저를 뜻한다. 주로 크롤링할 때 실제로 브라우저 창을 띄우지 않고 화면을 가상으로 렌더링하여 실제 브라우저와 동일하게 동작하는 방식을 뜻한다. 그렇다면 프론트엔…
JavaScript 관련하여 궁금한 점이 있을 때 이것저것 찾다보면 그 종착지는 언제나 ECMAScript였다. 그러나 엄청난 길이의 스크롤을 보고 주눅이 들었고, 차분히 읽어보기로 마음 먹었을 때는 처음 보거나 정의를 알 수 없는 것들이 많이 있었다. 그러다 참조 링크를 계속 타고 들어가서 이해할때 쯔음, 처음에 무엇때문에 이걸 찾아봤는지 까먹는 나를 …
웹 브라우저는 오늘날 우리들이 사용하고 있는 크롬, 사파리, 파이어폭스, IE 등처럼 웹 페이지를 볼 수 있는 프로그램이다. (해당 글에서는 웹 브라우저만 다루며, 이하 ‘브라우저’라 칭한다) 지금의 웹 페이지는 상당히 많은 정보를 담고 있다. 쇼핑몰일 경우, 우리가 사고 싶은 물건을 장바구니에 담고 결제하는 등 다양한 조작이 가능하지만, 최초의 브라우저…
웹 접근성은 매우 중요하며, 시맨틱 마크업을 준수해야 한다. 웹 개발을 했다면 많이 들어봤을 말이다. 그렇다보니 필자는 이를 단순하게 웹 접근성 = 시맨틱 마크업, 시맨틱 마크업은 곧 적절한 곳에 올바른 HTML 태그를 작성하는 것이라고만 인지하고 있었다. 그러나 생각했던 것과는 달리 더 상세하고 복잡한 규정이 존재했다. 웹 접근성(Web Accessib…
개발하다 보면 string을 number로, number를 string으로 혹은 boolean으로 형 변환을 해야 할 때가 존재한다. 형 변환을 하는 방법에는 여러 개가 있는데 각각의 차이점이 무엇인지 궁금해서 찾아보았다. string으로 변환 가장 간단한 방법으로는 가 있다. 하지만 나 , 같은 값들도 그대로 문자열로 반환하여 따로 예외 처리가 필요하…
WebXR 관련 북마크 모음 Open source WebGL API WebXR Device API three.js Babylon.js A-Frame 관련 자료 OpenGL / WebGL / GLSL Learn OpenGL Coordinate Systems The Book of Shaders (한글 有) WebGL 기초 GLSL Noise Algorithm…
위키피디아에 따르면, 메모이제이션(memoization)은 컴퓨터가 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로서 동일한 계산을 하지 않도록 하여, 속도를 높이는 기술이다. 보통 애플리케이션의 최적화를 위해 사용된다. React에서 컴포넌트가 렌더링하는 규칙에는 크게 세 가지가 존재한다. state나 props가 변경되었을 때 …
최근 들어 자바스크립트에서 비동기를 잘 다루는게 얼마나 중요한지 더 절실하게 느낀다. 필자가 마주한 대부분의 골치 아픈 에러는 비동기로 인한 것이며, 왜 이때 실행되는지 혹은 왜 이렇게 늦게 실행되는지 등 원인 파악이 어려워 늘 애를 먹는다. 개발 공부를 막 시작했을 무렵 Node.js란?과 자바스크립트 비동기 함수 알아보기 글을 작성했었다. 당시에 내가…
디바운스(Debounce)와 쓰로틀(Throttle)은 예전부터 들어왔지만, 실무에서는 직접 구현하기 보다 lodash를 사용했기 때문에 정확히 어떻게 동작 되는지 몰랐다. 해당 글에서는 간단하게 와 hooks를 만들어서 설명해보려 한다. 언제 사용하는가? debounce와 throttle 모두 특정 함수의 호출 횟수를 줄여서, 웹 성능이 저하 되는 것…
현 회사의 메인 프로젝트가 Angular로 개발되어 있다보니 자연스럽게 RxJS를 접하게 되었다. 그러나 Observable이 어떻게 그 객체의 변화를 감지하는지 모른채 사용했다. 그래서 조금이나마 이해하기 위해 Observer 패턴에 대해 찾아봤다. GoF 디자인 패턴이란? 간략하게 ‘패턴’이란 무엇인지 알아보자. 개발자라면 이게 무엇인지는 몰라도 한 …