즐겁게, 코드

브라우저 API를 찾아보다 보면 "이런 게 있었어?" 라는 생각이 들 정도로 기상천외한 API가 많은데요, 오늘은 브라우저에서 음성 인식을 구현할 수 있는 Web Speech API에 대해 간략히 소개해보고자 합니다. 음성인식 API는 아직 많은 브라우저에서 지원하지 않지만, 그래도 타 클라우드 서비스와는 달리 무료로 활용할 수 있다는 점이 강점입니다. (* 다만 후술하겠지만 실제 프로덕트에서 활용하기는 아직 쉽지 않아 보입니다.) 🎤 음성인식 체험하기 - MDN 예제 mdn.github.io/web-speech-api/speech-color-changer/ 먼저 간단하게 음성인식 API를 활용하는 예제를 소개해보려 합니다. 위 링크는 사용자가 말한 색으로 배경색을 바꾸는 예제인데요, 화면을 클릭하면 인..

태그를 활용할 때 새 창에서 페이지를 이동하기 위해서는 target="_blank" 라는 속성을 활용합니다. 네이버로 이동! 그런데, 이 속성에 보안 문제가 숨어있다는 사실을 알고 계신가요? Tabnabbing 공격 window.opener 라는 전역 객체는 현재 창을 열었던 이전 창의 참조를 반환합니다. 그런데 해커들이 기가 막힌 방법을 고안해냈는데요, 이 window.opener의 location을 피싱 사이트의 주소로 바꿔치기하는 것입니다. 그러면 원래 사이트는 피싱 사이트로 변하게 되고 사용자는 별 의심 없이 정보를 건네주게 되는 것이죠. 간단 시연 _blank 속성으로 새 탭에서 네이버에 들어간 뒤, 네이버에서 window.opener.location 속성을 조작해 이전 탭을 피싱 사이트로 바꿔..

requestAnimationFrame은 자바스크립트로 *애니메이션 효과를 쉽게 구현할 수 있는 API입니다. (* 이 글에서의 애니메이션이란, 프레임 단위로 픽셀을 재렌더링하는 행위를 의미합니다.) 기존의 자바스크립트 애니메이션은 setInterval 등을 사용해 1.5ms 마다 대상의 위치를 변경하는 등의 방법을 사용했지만, 디스플레이 주사율이 기기마다 다양해짐에 따라 이는 좋지 않은 경험으로 다가올 수도 있었습니다. setInterval을 사용한 애니메이션 position: 0 const car = document.querySelector("#car"); const value = document.querySelector("#value"); let xPos = 0; const render = () =..

자바스크립트는 싱글 스레드 프로그래밍 언어입니다. 이는 곧 싱글 스레드 런타임(실행 환경)을 가지고 있다는 의미로, 한번에 하나의 작업만을 수행할 수 있음을 의미합니다. 그런데 웹 브라우저에서는 음악을 재생하면서 마우스 이벤트를 감지할 수도 있고, 웹 서버에 요청을 보내는 동안 새로운 키보드 입력을 수행할 수도 있는 등 동시에 일어나는 일이 꽤나 많습니다. 자바스크립트는 싱글 스레드에서 동작하는데 어떻게 브라우저에서 동시(병렬) 작업을 구현할 수 있었던 것일까요? 지금부터 찬찬히 알아보도록 하겠습니다. 자바스크립트 엔진과 런타임의 구조 자바스크립트 엔진은 변수와 객체의 메모리를 할당하는 힙 영역과 하나의 콜 스택으로 이루어져 있습니다. 또 자바스크립트가 실제로 실행되는 실행 환경(런타임)인 브라우저나 N..

혹시 페이스북을 사용해 보신 적 있으신가요? 페이스북을 사용해 보신 분들이라면 들어갈 때마다 로그인을 수행하는 대신 항상 로그인 상태가 유지되고 있는 것을 알고 계실 것입니다. 바로 이런 기능이 "쿠키" 를 활용해 구현된 기능인데요, 오늘은 쿠키를 활용하는 방법에 대해 알아보겠습니다. 쿠키(Cookie)란? 쿠키는 키 - 값 쌍으로 이루어진 작은 데이터입니다. 서버는 브라우저에 쿠키를 전달하고, 브라우저는 쿠키를 저장해 두었다가 다음 번 요청부터 보관하고 있던 쿠키를 서버에 전달합니다. 쿠키는 주로 세션 관리나 트래킹 등 용도로 사용되는데요, 트래킹의 예시로 현재 창에서 개발자 도구를 열고 document.cookie 를 입력해 보면 카카오 애드핏과 구글 애널리틱스 등 트래킹 도구에서 여러분의 접속 정보..

일부 커뮤니티나 웹 페이지는 컨텐츠 유출을 방지하고자 마우스 우클릭을 비활성화하거나 복사를 물리적으로 비활성화하기도 합니다. 오늘은 브라우저에서 지원하는 클립보드 API를 활용해 이를 구현해보도록 하겠습니다. copy 이벤트 사용자가 복사를 시도하는 것을 어떻게 알 수 있을까요? window.addEventListener("keydown", (e) => { if ((e.ctrlKey || e.metaKey) && e.key == "c") { alert("복사 수행됨"); } }); keydown 이벤트를 활용하면 컨트롤 키를 비롯한 모든 키의 입력을 감지할 수 있는데요, 위처럼 control(맥에서는 command) 키와 c 키를 같이 누르면 복사가 수행됩니다. 그러나, 키보드 입력을 감지하는 방법으로는..

가끔씩 HTML 코드를 살펴보면 data- 라는 접두사가 붙은 수상한 속성들을 만날 수 있습니다. id과 class는 뭔지 알겠는데 data-clk-prefix는 대체 무슨 속성일까요? HTML 요소의 속성 모든 HTML 요소는 특정한 속성을 가질 수 있습니다. 예를 들어 태그는 이미지의 너비와 높이를 지정하는 width, height 라는 속성을 가질 수 있고, 태그는 입력값의 타입을 정하는 type 이라는 속성을 가질 수 있습니다. 그렇다면 혹시 "author" 처럼 기존에 존재하지 않던 특성을 마음대로 사용할 수도 있을까요? 나스닥 거품, 과연 꺼질 것인가 물론 사용할 수는 있습니다. 다만 author 라는 속성은 사전에 약속된 속성이 아니라 우리가 임의로 명명한 속성이므로 사전에 약속된 속성들과 ..