dev-hpk 님의 블로그

프로젝트를 진행하면서 Git Flow 전략을 토대로 개발을 하기 위해 각 Issue 별로 develop 브랜치에서 feature 브랜치를 따서 사용했습니다. 매번 Issue 생성 → 브랜치 생성의 과정을 반복하다 보니 번거롭다는 생각이 들어 자동화해 보자는 생각에 구글링 하던 중 Jira와 Github Action을 찾게 되었습니다. Jira와 Github을 연동하면 Jira Issue에서 바로 Github branch를 생성하고 Issue와 관련된 코드 변경 사항을 추적할 수 있다고 합니다.  그런데 최대 10명의 사용자와  2GB 저장소 제공이라는 제한 사항이 있네요🤔저의 경우 주로 소규모 프로젝트를 진행해하기 때문에, 복잡한 프로젝트 관리보다는 간단한 이슈 관리 목적으로 Create Issue B..

SQL Injection(SQL 삽입)🤔SQL Injection은 공격자가 애플리케이션의 데이터베이스를 악용하기 위해 SQL 쿼리를 조작하는 보안 취약점입니다.공격자가 입력 필드나 URL 매개변수를 통해 악의적인 SQL 코드를 삽입하여 데이터베이스의 민감한 정보를 탈취하거나, 데이터를 삭제 및 수정하며, 심지어 시스템을 제어하는 행위로 이어질 수 있습니다. SQL🤔SQL(Structured Query Language)은 관계형 데이터베이스 시스템에서 자료를 관리 및 처리하기 위해 설계된 언어입니다. SQL은 데이터베이스의 데이터를 조회, 삽입, 수정, 삭제하는 데 사용되며, 관계형 데이터베이스 관리 시스템(RDBMS)에서 핵심적인 역할을 합니다. 💥SQL Injection 유형 및 동작 원리SQL ..

CSRF (Cross-Site Request Forgrey)🤔CSRF(Cross-Site Request Forgery)는 공격자가 사용자의 권한을 도용하여 웹 애플리케이션에 비정상적인 요청을 보내는 공격 기법입니다. 사용자(희생자)는 자신의 의지와는 무관하게 공격자가 의도한 행위(수정, 삭제, 등록 등)를 특정 웹 사이트에 요청하게 됩니다.  송금이나, 비밀번호 변경, 권한이 필요한 작업 등의 요청을 악의적으로 보내겠죠!XSS(Cross-Site-Scripting)와 어떻게 다른가🤔CSRF와 XSS는 웹 애플리케이션의 보안 취약점을 이용하는 공격 기법입니다.그럼 둘은 어떤 차이가 있을까요?공격 목적XSS : 사용자 PC에서 스크립트를 실행해 사용자의 정보를 탈취CSRF : 요청을 위조해 사용자(희생자..

반사형 XSS (Reflected Cross-Site-Scripting)🤔악성 사용자가 악성 스크립트가 담긴 URL을 만들어 일반 사용자에게 전달하는 패턴입니다. 악성 사용자는 URL 주소 뒤에 붙은 쿼리에 악성 스크립트를 작성하여 전달합니다. 반사형 XSS는 URL 주소에 포함된 코드를 응답 HTML에 그대로 출력하기 때문에 반사형 XSS라고 합니다. URL 주소에 악성 스크립트가 포함된 경우에만 발생하기 때문에 지속성이 없어 비지속성 XSS라고도 합니다. 반사형 XSS  공격 시나리오악성 사용자가 보안이 취약한 사이트에서 사용자 정보를 빼돌릴 수 있는 스크립트가 담긴 URL을 만들어 일반 사용자에게 메일로 전달합니다.사용자는 메일을 통해 전달받은 URL 링크를 클릭합니다. 사용자 브라우저에서 보안이..

저장형 XSS (Stored Cross-Site-Scripting)🤔저장형 XSS는 공격자가 악성 스크립트를 포함한 데이터를 서버에 보내 저장하고, 이후 사용자가 해당 데이터를 요청하면 서버에 저장된 악성 스크립트가 사용자 측에서 동작하는 패턴입니다.악성 스크립트를 포함하는 데이터가 서버에 저장되므로 저장형 XSS라고 합니다. 저장형 XSS는 반사형 XSS와 달리 한 번의 공격으로 끝나는 것이 아니라 정상적인 요청을 하는 사용자에게도 피해를 줄 수 있어 지속형 XSS라고도 합니다.서버에서 악성 스크립트를 제거하지 않으면 지속적인 공격이 발생하기 때문에 3가지 XSS 공격 패턴 중 가장 위험한 패턴이라고 볼 수 있습니다. 저장형 XSS  공격 시나리오악성 사용자가 보안이 취약한 사이트에 악성 스크립트를 ..

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)..