devOhzl

문제 상황회사 보안 점검에서 Fortify 스캔을 진행한 결과, 내가 작성한 Dockerfile에서 다음과 같은 HIGH 레벨 보안 경고가 발생했다.Default User PrivilegeHIGHDocker 컨테이너가 root 권한으로 실행됨 Fortify의 "Default User Privilege" 보안 경고는 Dockerfile 내에서 기본 사용자(root) 로 컨테이너를 실행할 경우 발생합니다. 이는 컨테이너가 해킹되거나 취약점이 발생했을 때, root 권한이 그대로 유지되므로 호스트 시스템까지 영향을 줄 수 있는 위험이 존재합니다. 따라서 root 대신 일반 사용자 권한을 사용하도록 설정하는 것이 권장됩니다. 해결 방법 및 적용 내용기존 Dockerfile에는 사용자 설정이 없어서 기본적으로 r..

1. XSS(Cross‑Site Scripting)란?XSS(Cross‑Site Scripting) : 웹 애플리케이션에서 자주 등장하는 취약점으로, 공격자가 악성 스크립트를 주입해 사용자의 브라우저에서 실행시키는 기법세션·쿠키 탈취 : 악성 스크립트가 실행되면 로그인 세션 쿠키를 탈취해 계정 탈취로 이어질 수 있습니다.피싱·악성 행위 : DOM을 조작해 가짜 로그인 창을 띄우거나, 숨은 네트워크 요청으로 토큰·개인정보를 외부로 전송할 수 있습니다.연계 공격 : CSRF 등 다른 취약점과 결합해 결제·게시물 작성 등 의도치 않은 동작을 수행시키기도 합니다.발생 원인사용자 입력을 검증·필터링·인코딩 없이 그대로 HTML이나 속성(src 등)에 삽입하는 경우React, Vue 등에서 dangerouslySe..

회사 내부 모니터링 대시보드에서 수천 건 이상의 카드(Card) 컴포넌트를 한 화면에 표시해야 하는 요구사항이 있었습니다. 처음에는 단순히 Array.map을 통해 모든 데이터를 렌더링했으나, 아래와 같은 문제가 발생했습니다.렌더링 지연 : 한 번에 모든 컴포넌트를 그리다 보니, 브라우저 메인 스레드가 과부하되어 화면이 뜨기까지 20~30초 걸림스크롤 성능 저하 : DOM 요소가 늘어나면서 스크롤 시 FPS가 크게 떨어지는 문제 발생사용자 경험(UX) 악화 : API는 이미 빠르게 응답했는데, 렌더링이 끝나지 않아 로딩 스피너가 바로 사라지고도 빈 화면이 한참 동안 노출문제를 해결하기 위한 방법으로 리스트 가상화를 진행해보기로 했습니다. 리스트 가상화란 ?화면에 보이는 아이템만 실제로 렌더링하고, 나머지..

React에서 페이지 또는 컴포넌트를 동적 로딩할 때, React.lazy()와 Suspense를 사용하면 효율적으로 관리할 수 있습니다.   lazy()를 활용한 동적 로딩(Route 정리)기본적으로 React에서는 import를 사용하여 정적인 방식으로 컴포넌트를 불러옵니다.하지만, 페이지가 많아질수록 초기 로딩 속도가 느려지는 문제가 발생합니다.👉 이를 해결하기 위해 React.lazy()를 사용하면, 필요한 순간에만 컴포넌트를 불러올 수 있습니다.이 방식은 코드 스플리팅(Code Splitting)을 적용하여 성능 최적화에도 도움을 줍니다.  정적 로딩 방식 (비효율적인 예시)이 방식은 모든 페이지가 초기 로딩 시점에 한 번에 불러와지기 때문에 초기 로딩 속도가 느려질 수 있다.import Ho..

Vite로 작성된 React 프로젝트를 GitLab CI/CD를 통해 Docker 이미지를 빌드하고, Nginx로 정적 파일을 서빙하는 과정을 정리했습니다.  최종적으로 배포 환경에서 index.html과 관련된 정적 자산(js, css, svg 등)을 Nginx로 제공하여 정상적으로 애플리케이션이 동작하도록 합니다.Nginx는 웹 서버 소프트웨어입니다. 웹 서버는 클라이언트(브라우저)에서 요청을 보내면, 이를 처리하고 파일(HTML, CSS, JS 등)을 클라이언트로 보내주는 역할을 합니다.정적 파일 배포와 프록시 기능에 최적화된 서버로, React, Vue 같은 프론트엔드 프로젝트의 빌드 결과물을 효율적으로 배포할 수 있는 도구입니다.Nginx의 기본 동작 클라이언트 요청: 사용자가 브라우저에서 ht..

라우트 정의 시 정적으로 import하는 방식에서 동적으로 import하는 방식으로 전환하게 되었습니다.이를 위해 dynamicImportComponent라는 유틸리티 함수를 도입하여 동적으로 컴포넌트를 로드하고, 라우트 정의를 효율적으로 관리할 수 있게 되었습니다. 기존 정적 import 방식기존에는 각 라우트 모듈을 개별적으로 import하여 사용했습니다. const testView1 = from "@/views/test/test1"const testView2 = from "@/views/test/test2"const testView3 = from "@/views/test/test3"export default [ { path: "testView1", children: testView1, ..

React 프로젝트에서 SVG 아이콘을 효율적으로 관리하고 사용하는 방법입니다.특히, vite-plugin-svgr와 import.meta.glob을 활용하여 SVG 파일을 자동으로 불러오고 React 컴포넌트처럼 사용합니다.SVG 파일을 React에서 사용하는 이유SVG는 벡터 기반의 그래픽 형식으로 다음과 같은 장점이 있습니다:확장성: 해상도와 무관하게 선명하게 렌더링유연성: 색상, 크기, 스타일 등을 동적으로 조정 가능가벼움: 아이콘과 같은 간단한 그래픽에서 번들 크기를 최소화React에서 SVG를 사용하면 동적인 UI 구성과 함께 코드의 재사용성이 증가합니다. Vite에서 SVG를 React 컴포넌트로 변환하기1. vite-plugin-svgr 설치vite-plugin-svgr는 SVG 파일을 R..

JSDoc란?JSDoc은 JavaScript 코드에 주석을 추가하여 함수, 클래스, 객체 등에 대한 문서를 자동으로 생성할 수 있도록 돕는 툴입니다. 이를 통해 코드의 가독성을 높이고 유지보수를 용이하게 할 수 있습니다. JSDoc은 개발자들이 코드의 의도를 명확히 전달하고, 다른 팀원들이 쉽게 이해할 수 있도록 지원합니다. 👉 JSDoc은 단순한 주석 시스템을 넘어 코드의 품질과 유지보수성을 향상시키는 강력한 도구입니다. 👉  팀 개발 환경에서 JSDoc을 활용하면 코드의 가독성을 높이고, 협업 효율을 극대화할 수 있습니다. JSDoc의 주요 특징자동 문서 생성JSDoc 주석을 작성한 코드를 기반으로 HTML 형식의 문서를 생성할 수 있습니다.이 문서는 함수나 객체의 동작 방식을 직관적으로 보여줍..

데이터그리드와 같은 동적 컴포넌트를 다루기 위해 Zustand를 선택했으며, 데이터를 효율적으로 관리할 수 있습니다. 데이터그리드는 한 화면에서 두 개 이상이 들어갈 수 있으므로, 각 컴포넌트를 독립적으로 관리하기 위해 id를 활용하여 상태를 구분했습니다. 기존 코드의 문제점Zustand만으로 상태 관리를 하려면 상태를 수동으로 복사(...state)해야 합니다. 특히 데이터그리드를 한 화면에서 여러 개 사용해야 하는 경우, 각각의 컴포넌트를 구분하기 위해 id를 활용합니다. 이로 인해 상태 업데이트 로직이 더욱 복잡해지고 중복이 발생합니다.export const useDataGridStore = create((set) => ({ grids: {}, initializeGrid: (id) => s..

⭐ React-hook-formReact Hook Form은 React에서 간단하고 효율적으로 폼을 관리하기 위한 라이브러리입니다. 폼 관리 방식React Hook Form은 Uncontrolled 방식과 Controlled 방식이 있다.Uncontrolled : register 함수를 사용하고 두 번째 파라미터를 사용하여 유효성 검증이 가능하며 DOM과 직접적으로 연결되어 성능이 우수하다. Controller : Controller 컴포넌트의 rules 속성을 사용하여 유효성 검증이 가능하며 주로 외부 UI 라이브러리와 통합 시 사용한다.API : useForm Hookregister : Uncontrolled 방식으로 사용하기 위해 사용됩니다. 요소의 속성으로 전달되어야 하는 값들을 반환하는 함수입니..