일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- es6
- 자바스크립트
- 솔리디티
- CSS
- 이슈
- node.js
- 프론트엔드
- react
- AWS
- 웹
- 백엔드
- TypeScript
- 알고리즘
- k8s
- 타입스크립트
- 파이썬
- 클라우드
- 리액트
- next.js
- BFS
- 백준
- kubernetes
- 블록체인
- docker
- JavaScript
- HTML
- 이더리움
- 쿠버네티스
- 가상화
- 컴퓨터공학
- Today
- Total
목록웹 (18)
즐겁게, 코드
태그를 활용할 때 새 창에서 페이지를 이동하기 위해서는 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 라는 속성은 사전에 약속된 속성이 아니라 우리가 임의로 명명한 속성이므로 사전에 약속된 속성들과 ..
이미지 파일을 다루다 보면 자연스럽게 다양한 확장자들을 만나게 됩니다. gif, png, jpg, raw... 등등 다양한 이미지 포맷은 벡터 이미지냐 래스터 이미지냐 / 무손실 이미지냐 손실 이미지냐로 구분되는데요, 오늘은 다양한 이미지 포맷들 중 PNG와 JPEG 포맷을 비교해 보도록 하겠습니다. 📸 JPEG 포맷 JPEG는 가장 많이 사용되는 이미지 포맷들 중 하나로, 원본 데이터가 손실되는 손실 이미지라는 특징이 있습니다. 물론 가만히 저장해 둔다고 손실이 생기는 것이 아니라, JPEG 이미지를 웹 페이지에 업로드하거나 메일로 전송하면 JPEG 포맷은 사람의 눈이 인식할 수 있는 색상만을 남기고 나머지를 제거하기 때문에 압축 과정에서 *언제나 약간씩 데이터가 소실됩니다. (* JPEG 압축 시에는..