CS 지식3 Codeql 간단 사용 💻 소개CodeQL은 코드베이스를 관계형 데이터베이스로 변환해, SQL과 유사한 QL 쿼리로 정적 분석을 수행하도록 설계된 도구이다. 이를 통해 보안 취약점과 안티패턴을 자동으로 탐지하고 코드 품질을 개선할 수 있도록 도와준다.또한 GitHub CI/CD 파이프라인을 통해 자동화할 수 있다. 🛠️ 설치Codeql을 실행하기 위해서는 CLI를 설치해야한다. 다음과 같은 과정을 통해 진행하면 된다. 설치는 codeql-home 디렉토리를 만들어 해당 디렉토리에 설치할 예정이다. 최종적으로 다음과 같이 두개의 디렉토리가 존재하면 된다.codeql-home ㄴ codeql ㄴ codeql-repo 1️⃣ CLI 다운로드 받기https://github.com/github/codeql-action/releas.. 2025. 5. 3. [CS 지식] FCP, TTI, LCP는 무엇인가 🎈 FCPFirst Contentful Paint(이하 FCP)는 웹 성능 메트릭 지표 중 하나이다. 페이지가 로드되기 시작한 시점부터 페이지에서 최초로 '의미 있는 컨텐츠가 렌더링 되는 순간’ 까지를 측정한다. 측정되는 최소단위는 다음과 같다.단일 텍스트 문자하나의 이미지SVG의 한 부분흰색이 아닌 Canvas 요소✨ 위의 요소 중 하나가 렌더링 완료되면 FCP로 측정한다. 측정되지 않는 요소는 다음과 같다.페이지 레이아웃을 위한 빈 컨테이너컬러나 사이즈가 설정이 되어 있더라도 해당 요소가 렌더링 되었을 때는 FCP로 측정하지 않는다.로딩 스피너나 스켈레톤 UI사실 처음 이 부분은 스피너가 애니메이션으로 작동하고 화면 영역을 구성하고 있기 때문에 FCP로 측정이 될 줄 알았으나 아래와 같이 코드를 .. 2025. 2. 4. [CS 지식] Lazy Loading 🎈 의미레이지 로딩이란 중요도가 떨어지거나 현재 화면에 보이지 않는 요소들의 로딩을 뒤로 미루어 로딩 성능을 향상시키는 최적화 기술을 의미한다. 사용하는 이유하나의 페이지에 많은 정보를 포함하는 경우 요소들이 모두 로드될때까지의 시간이 오래걸리게 된다. 이러한 문제는 사용자 경험을 저하시키게 된다. 현재 당장에 사용자가 보고 있는 화면 요소를 우선적으로 로딩하고 나머지 뷰포트를 벗어난 영역에 대해서는 추후 뷰포트에 들어올때 로드를 하는 방식을 사용하여 페이지에 최초 접근 시 빠르게 로딩을 완료할 수 있게 해준다. 이탈률웹사이트 로딩속도와 이탈률의 관계도를 보여주는 데이터는 다음과 같다.로딩 시간 이탈률로딩 시간이탈률1초 이하7%2초13%3초16%4초10%5초28%5초 이상26%표는 BrowserStac.. 2025. 2. 1. 이전 1 다음
