2025/01 14

[Coworkers] 공통 컴포넌트 Modal

고급 프로젝트 Coworkers의 시작❗ 저는 Modal 공통 컴포넌트를 맡게 되었습니다. 작업을 시작하기 전에 지난 프로젝트에서 팀원분께서 만들어주신 Modal 컴포넌트를 사용할 때 좋았던 점들과 불편했던 점들을 생각해 봤어요🤔좋은 점Modal의 Container만 만들어두고 Content는 children으로 받아 사용할 수 있어 편했음Modal의 dim 영역을 클릭했을 때 닫히는 기능이 있어 편했음불편한 점Modal 컴포넌트를 사용하는 페이지에서 모달의 open 관련 State를 선언하고 관리해야 해서 불편했음DOM 계층의 Depth가 깊어지면 z-index 관련해서 신경쓸 부분이 많아 불편했음Modal의 dim과 컨텐츠가 각각 Dim, Modal 컴포넌트로 분리되어 있어 불편했음위 내용을 고려하..

[맛길] 데이터 채우기 - Youtube Data API

기획 단계에서 Serverless Function을 이용해 유튜브 영상과 상세 내용을 관리하기로 했습니다❗ 흠.. 영상 정보를 어떻게 저장할까요🤔직접 JSON 파일에 작성하기에는 양이 너무 많아 비효율적일 것 같습니다. 저는 구글링을 통해 크롤링과  Youtube Data API를 알게 되었습니다.크롤링이 더 간단한 것 같지만, 프론트엔드 개발자라면 API를 사용하는 게 당연하겠죠👍 사실 크롤링이 유튜브 정책 위반이라는 내용도 있고, 크롤링 관련 재판 사례들이 있는 것 같아서 선택한 것도 없진 않습니다...😅  Youtube Data API 탐색기를 통해서 query에 "먹을텐데"를 검색하니 아래와 같은 결과가 나왔네요. 재생목록의 영상을 가져오려면 아래  2단계를 거쳐야해요.1️⃣ 재생목록 API..

[맛길] 프로젝트 주제 및 기술 스택 선정

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

[Git] Pull Request에 Template 자동 적용하기 (feat. 이슈 close)

이전에 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] Event handlers cannot be passed to client component props 오류 해결

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] Github Action을 활용한 Issue 및 feature branch 생성 자동화

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

[CS] SQL Injection(SQL 삽입)이란?

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

[CS] CSRF(Cross-Site Request Forgery)란?

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

[CS] 반사형 XSS (Reflected Cross-Site-Scripting)

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

[CS] 저장형 XSS (Stored Cross-Site-Scripting)

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