dev-hpk 님의 블로그

🌈 사이드 프로젝트 시작 계기팀 프로젝트를 진행하면서 소통과 협업의 기술을 배울 수 있어 프론트앤드 개발자로서 한 걸음 더 가까워진 것 같아요.그런데 프로젝트 후반으로 갈 수록 저를 포함한 팀원들의 체력과 의욕이 떨어져 기능을 하나씩 빼게 되었습니다. 추가 기능을 구현하고 싶은 제 입장에서는 프로젝트에 대해 만족을 못하고 있는 느낌이 들었어요😂 제가 원하는대로 만들 수 있는 사이드 프로젝트를 한 번 해보면 팀원과의 협업의 소중함도 느끼고 문제 상황도 혼자 해결해 보면서 성장할 것 같아요. 그래서 개인 사이드 프로젝트를 시작하기로 결심했습니다!🤔 사이드 프로젝트 주제 선정막상 프로젝트를 시작하려고 하니 주제 선정부터 쉽지 않았어요..😂일상생활을 하면서 많은 사람들이 느꼈던 불편 또는 이런 것이 있으..

이전에 Create Issue Branch(Github Action)을 활용해 이슈 생성 시 feature bracnh 생성은 자동화했습니다. 이슈를 생성하고 작업을 할 때는 매우 편리하지만 PR(pull request)을 생성하고 Merge 할 때 2가지 불편함을 느꼈습니다.1️⃣ PR(pull request)를 생성할 때마다 정해둔 형식에 맞게 PR 본문을 작성해야 함2️⃣ PR(pull request)이 Merge 되어도 Issue가 Open 상태로 남아있어 직접 Close 해줘야 함 위 두 내용을 자동화할 수 있는 방법을 구글링 해보던 중 Github PR Template를 찾게 되었습니다.PR Template은 왜 필요할까🤔PR Template을 만들어 Repository에 추가하면 PR을 할..

Next.js에서 button 요소에 onClick 이벤트 핸들러를 전달하려고 하는데 아래와 같은 에러가 발생했습니다.const handleClick = async () => { const query = await getDoc(doc(db, "사용자", "zSen5y9LJazULo2C3atN")); console.log(query.data()); }; return ( 데이터 가져오기 ); 기존에 진행하던 프로젝트에서는 마주한 적 없던 에러인데 뭐가 문제일까요🤔 곰곰이 생각해 보니 다른 점은 라우팅 방식뿐이네요. 기존에는 Page Router 방식을 사용했지만 이번 프로젝트는 App Router 방식을 사용했습니다. App Router 방식..

프로젝트를 진행하면서 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..