즐겁게, 코드

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

기존 리액트 어플리케이션은 크게 두 가지 방법으로 스타일을 꾸밀 수 있었습니다. 하나는 CSS나 SASS 등 별도의 스타일 파일을 생성해 관리하는 방식이고, 다른 하나는 컴포넌트 안에서 스타일을 작성하는 CSS-in-Js 라는 방식입니다. 이중 넥스트(Next.js)에서는 CSS-in-js 방식을 권장하며, styled-component와 유사한 styled-jsx 라는 도구를 활용합니다. styled-jsx styled-jsx는 넥스트 프로젝트에 기본적으로 포함되어 있습니다. 이를 활용하기 위해서는 jsx 라는 값을 속성으로 갖는 style 태그를 컴포넌트 본문에 위치시킨 후, 적용할 CSS 스타일을 *문자열로 작성하면 됩니다. (* 상태에 따른 조건부 스타일을 활용할 수 있다는 장점을 살리기 위해 주..

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

깃과 커밋은 뗄래야 뗄 수 없는 관계인데, 가슴에 손을 얹고 제 깃허브를 되돌아보면 커밋 메시지가 제대로 적힌 내용이 드뭅니다. 😅 물론 갈수록 의식하고는 있지만 아직도 정확한 기준을 잡지 못하고 있었는데 이번 기회에 커밋 메시지에 대해 정리해보기로 했습니다. 🤔 왜 좋은 커밋 메시지를 남겨야 하는가? 거창하게 소제목을 뽑았지만 사실 좋은 질문은 아닌 것 같습니다. 깃이 뭔지 모르는 사람이라도 '좋은' 무언가를 남겨야 한다는 데에는 동의할 것이기 때문인데요, 그렇다면 질문을 조금 바꿔서 왜 우리는 좋은 커밋 메시지를 남기지 못하는 걸까요? 아마 가장 솔직한 대답은 "귀찮아서" 또는 "어차피 혼자 진행할 프로젝트니까" 정도가 될 것 같네요. 하지만 한편으로는 "제대로 남기고 싶어도 어떻게 남겨야 할지 몰라..

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

리액트에서는 react-router-dom 라이브러리를 통해 페이지간 라우팅을 구현할 수 있었습니다. 그러나 넥스트(Next.js) 에서는 pages 폴더 안에 컴포넌트를 생성하면 자동으로 경로가 설정되게 됩니다. /.next /pages ㄴ-- index.jsx ㄴ-- tomato.jsx /public /styles 이렇게 pages 폴더 안에 index 와 tomato 라는 컴포넌트가 있으면 별도의 라우팅 없이 /tomato 라는 경로를 사용할 수 있게 됩니다. (* 경로명은 export되는 컴포넌트 이름이 아닌 파일명을 기준으로 합니다.) 정적 라우팅 정적 라우팅은 사전에 지정된 주소로 이동하는 방법입니다. react-router-dom 처럼 넥스트에서도 Link 컴포넌트를 사용해 주소를 이동할 수..

로직을 작성하다 보면 배열 안에서 특정 조건을 만족하는 값을 찾아야 하는 때가 자주 있습니다. 배열을 순회하는 forEach 메서드를 활용해 배열에 5보다 큰 원소가 있는지 검사하는 코드를 작성해 보겠습니다. const array = [2, 4, 6, 8, 10]; const biggerThanFive = false; array.forEach((el) => { if (el > 5) { biggerThanFive = true; } }); console.log(biggerThanFive); // true 제대로 작동합니다! 다만, 이를 위해 변수를 따로 할당하고 3줄이 넘는 코드를 작성해야 한다는 것은 어딘가 찝찝합니다. 오늘은 특정 조건을 만족하는 값을 찾는 더 나은 방법을 소개하겠습니다. Array.pr..