dev-hpk 님의 블로그

XSS(Cross Site Scripting)는 웹 해킹 공격 중 하나입니다. 웹 서버 사용자에 대한 입력값 검증이 미흡할 때 발생하는 취약점으로, 주로 여러 사용자가 보는 게시판이나 메일 등을 통해 악성 스크립트(JavaScript 같은 스크립트 코드)를 삽입하는 공격 기법입니다. XSS는 대부분 웹 해킹 공격과 다르게 사용자(클라이언트)를 대상으로 하는 공격 기법입니다. 일반적으로 사용자 쿠키/세션 값 탈취, 키보드 입력값 탈취 등이 가능하며, 피싱 사이트와 같은 악성 사이트로의 접근 유도가 가능해 사용자에게 직접적인 피해를 줄 수 있습니다.   💣 XSS의 공격 유형XSS는 공격 방법에 따라 유형이 크게 3가지로 나뉩니다. Reflected XSS (반사형 크로스사이트스크립트)웹 응용 프로그램의 ..

최근 프로젝트에서 모달 컴포넌트를 사용하는데 많은 불편함을 느껴 React Portal을 사용하게 되었습니다. 제가 프로젝트를 진행하면서 겪은 불편함을 간단하게 정리했으니 필요하신 분들은 아래 예시를 확인해 주세요😊더보기어떤 불편함이 있었냐구요🤔아래 사진은 chrome의 개발자 도구를 통해 확인한 모달입니다. 단순히 detph가 깊어지는데 무슨 불편함이 있는지 궁금하실 수 있겠네요❗ 위 예시를 보시면 DOM의 계층 구조에 의해 모달의 z-index에 문제가 생긴 경우입니다.import styled from "styled-components";function PortalExample() { const Title = styled.h1` position: fixed; top: 0; lef..

Emotion🤔Emotion은 리액트에서 스타일을 관리하기 위한 CSS-in-JS 라이브러리로, 자바스크립트 코드 내에서 직접 CSS를 작성하고 적용할 수 있게 해 줍니다. Emotion 외에도 Styled-Components가 주로 사용됩니다. 2024 css-in-js 사용 추세 지난 2년간 npm 다운로드 기록Styled-Components 대신 Emotion을 선택한 이유🤔Emotion을 선택한 첫 번째 이유는 styled-components는 이전 미션과 프로젝트를 통해 많이 경험해봤기 때문에 새로운 라이브러리를 경험해 보고 싶어서입니다. 트렌드를 따라가는 것도 좋지만 여러 라이브러리를 사용해 보면 왜 특정 라이브러리가 많이 사용되는지 비교해 볼 수 있을 것 같습니다😊 두 번째 이유는 자주..

자바스크립트에서 try - catch - finally 구문은 예외 처리를 위한 강력한 도구입니다. 이 구문에서 finally 블록은 예외 발생 여부와 관계없이 항상 실행되는 코드 블록으로, 주로 리소스 정리나 마무리 작업에 사용됩니다. finally? finally는 일반적으로 try나 catch 뒤에 붙으면서, try나 catch 문의 동작이 모두 완료되었을 때 무조건 실행되는 코드를 작성하기 위해 사용합니다. finally 블록은 선택 사항이기 때문에 생략하는 경우가 많습니다. finally가 어떻게 동작하는지 간단하게 짚고 넘어가겠습니다.지금부터 주목해야할 점은 무조건 실행되는 코드입니다. 예시로 확인해보겠습니다.예시 (1)try { console.log('Try');} catch(error) ..