즐겁게, 코드

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

넥스트(Next.js)는 기본적으로 모든 페이지를 미리 렌더링합니다. 미리 렌더링을 해두면 SEO에도 유리하고 더 나은 성능을 얻을 수 있는데요, 넥스트에는 두 가지 사전 렌더링 방법이 존재합니다. 1. 정적 생성 - HTML 페이지를 미리 렌더링해두고 요청에 따라 제공합니다. 2. 서버 사이드 렌더링 - 페이지가 요청되는 시점에 서버에서 렌더링을 수행하고 결과물을 제공합니다. 별도의 외부 데이터가 필요하지 않다면 정적 생성 방식으로 미리 렌더링된 페이지를 제공합니다. 그러나 외부 데이터를 필요로 하는 경우에는 서버 사이드 렌더링을 통해 페이지를 제공하는데요, 오늘은 넥스트에서 어떻게 외부 데이터를 다룰 수 있는지 알아보도록 하겠습니다. getServerSideProps getServerSideProps..

최근 깃허브 스타 1k를 돌파한 hook-flow 라는 프로젝트가 있습니다. 리액트 훅의 모호한 실행 순서가 보기좋게 정리되어 있어 저도 이미지를 저장해서 보고 있습니다. 😁 그런데 이상하게도, LayoutEffects라는 낯선 이름이 하나 보이네요. 오늘은 useLayoutEffect 라는 생소한 훅을 소개해 보겠습니다. useLayoutEffect useLayoutEffect(() => { effect return () => { cleanup }; }, [input]) useLayoutEffect를 인텔리센스가 자동으로 완성한 모습입니다. 그런데 어디서 많이 본 형태 아닌가요? useEffect(() => { effect return () => { cleanup } }, [input]) 맞습니다! u..

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

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

이미지나 외부 파일을 불러오기 위한 HTTP 요청은 페이지 로딩 시간에 많은 영향을 미치게 됩니다. 만약 페이지에서 불러와야 할 이미지가 50개라면 HTTP 요청을 최소 50번 이상 보내야 할텐데요, 이러면 3G나 네트워크 환경이 좋지 않은 환경에서는 세월아 네월아 로딩되는 페이지를 보면서 분을 삭혀야 합니다. 오늘은 이미지 파일 요청을 최소화하기 위한 CSS 스프라이트 라는 기법을 알아보겠습니다. CSS 스프라이트 CSS 스프라이트는 여러 이미지를 한 장으로 묶은 후 CSS의 배경 포지셔닝을 통해 처리하는 기법입니다. 위 사진은 여러 서비스에서 CSS 스프라이트를 사용한 예시인데요, 버튼과 로고 이미지를 일일히 HTTP 요청을 통해 불러온다면 용량이 아무리 작다 해도 브라우저의 최대 동시 요청수 제한*..

HTML, CSS, 자바스크립트. 과연 셋의 조합이 어떻게 웹 페이지를 만들어내는 걸까요? 오늘은 브라우저가 웹 페이지를 렌더링하는 과정에 대해 알아보도록 하겠습니다. Critical Rendering Path (CRP) 이름이 크리티컬하다고 겁먹지 마세요. CRP는 HTML 코드를 실제 페이지로 만드는 일련의 과정입니다. 전체적인 순서는 위 도식과 같은데요, 이제부터는 각 단계에서 일어나는 일을 소개하겠습니다. (※ 이번 글은 페이지 렌더링 프로세스에 관한 글로써 자바스크립트 실행 및 처리 과정은 제외했습니다.) 1. HTML을 DOM으로 변환하기 우리가 열심히 짠 HTML 코드를 브라우저가 받아들면 제일 먼저 DOM 트리를 생성합니다. 트리라... 우리가 알고 있는 그 트리가 맞나요? 맞습니다! , ..