즐겁게, 코드

토스의 첫 개발 컨퍼런스, SLASH21이 막을 올렸습니다! 저는 이런 컨퍼런스 홍보 페이지를 보면 항상 개발자 도구에 먼저 손이 가곤 하는데, 이번에는 특이하게도 페이지가 리액트로 제작되어 있어 컴포넌트를 구경하던 중 처음 보는 forwardRef 성분에 대해 궁금증을 갖게 되었습니다. 🤔 🛠 HTML 노드를 커스텀 컴포넌트로 교체하기 import { useEffect, useRef } from "react"; import Input from "./components/Input"; function App() { const nameRef = useRef(null); const submitRef = useRef(null); useEffect(() => { alert("페이지 로딩됨"); nameRef.cu..

사용자는 주로 클릭이나 스크롤 등의 이벤트를 통해 웹과 상호작용하는데요, 특정 상황에서는 이런 이벤트를 비활성화해야할 때가 있습니다. 버튼의 경우에는 disabled 속성 등을 활용할 수 있지만, 일반적인 div 등의 태그에서는 어떻게 이벤트 실행을 방지할까요? 🖱 pointer-events 활용하기 물론 자바스크립트를 통해 이벤트 수행을 제어할 수도 있겠지만 훨씬 더 간단한 방법이 있습니다. 바로 CSS의 pointer-events라는 속성을 활용하는 것인데요, pointer-events 속성을 none 으로 지정하면 마우스 커서가 이벤트를 발생시킬 수 없게 됩니다. 당연히 리액트의 스타일 객체에서도 사용할 수 있으며, pointer-events 대신 pointerEvents 라는 속성명으로 사용하면 ..

변수명을 잘 짓는 것이 좋은 코드와 나쁜 코드를 판가름하는 중요한 요소라는 점에는 이견이 없을 것입니다! const a = "chanmin"; // BAD const userName = "chanmin"; // GOOD 그런데 CSS를 적용하기 위해 클래스명을 지을 때도 좋은 이름을 붙이고 계신가요? 저는 최근까지 그러지 못하고 있었다고 느껴서, 이번 기회에 CSS 클래스명 컨벤션을 정리해보고자 합니다. 😄 🙆🏻‍♂️ BEM (Block - Element - Modifier) 회사와 팀에 따라 컨벤션이 다를 수 있겠지만 가장 범용적으로 사용되는 규칙 중 하나가 바로 BEM으로, BEM의 Block, Element, Modifier는 각각 다음과 같은 의미를 가집니다. Block : 재사용 가능한 컴포넌트..

제작중인 앱에서 사용할 컬러 팔레트 패키지를 살펴보던 중, 의아한 점이 하나 생겼습니다. Controlled 컴포넌트에서 selectedColor 라는 변수를 갖는 것만 제외하면 둘은 거의 동일해 보이는데, 왜 Controlled - Uncontrolled 라는 이름으로 컴포넌트를 분리한 걸까요? 실제 사용할 때는 Uncontrolled 컴포넌트를 사용해도 아무 문제가 없었지만, 애매한건 확실히 짚고 넘어가야겠다는 생각에 시간을 내어 둘의 차이를 찾아보게 되었습니다. Controlled Component (제어 컴포넌트) 제어 컴포넌트는 컴포넌트의 상태나 속성(props)으로 주어진 값을 활용하는 컴포넌트입니다. 태그를 제어 컴포넌트로 사용하는 예를 들어보면, value 값을 useState로 관리하는 ..

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

일부 커뮤니티나 웹 페이지는 컨텐츠 유출을 방지하고자 마우스 우클릭을 비활성화하거나 복사를 물리적으로 비활성화하기도 합니다. 오늘은 브라우저에서 지원하는 클립보드 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 라는 속성은 사전에 약속된 속성이 아니라 우리가 임의로 명명한 속성이므로 사전에 약속된 속성들과 ..