Ch.Covelope

1. 크리티컬 렌더링 패스 (Critical Rendering Path) 핵심 개념브라우저가 HTML, CSS, JavaScript를 받아서 화면에 픽셀을 그리기까지의 필수 단계들입니다. 이 경로가 짧고 빠를수록 초기 로딩 속도가 빨라집니다. 🎯 6단계 프로세스1. HTML 파싱 → DOM 생성브라우저가 HTML을 위에서 아래로 읽으면서 DOM 트리를 만듭니다 태그를 만나면 파싱이 멈춥니다 (파서 블로킹)이게 스크립트를 body 끝에 두는 이유입니다2. CSS 파싱 → CSSOM 생성CSS 파일을 파싱해서 CSSOM 트리를 만듭니다CSS는 렌더링 차단 리소스입니다 (CSSOM 완성 전까지 렌더링 안됨)화면에 아무것도 안 보이는 이유가 여기 있습니다3. DOM + CSSOM → 렌더 트리 생성실제로 화면..

트리 쉐이킹이란? 개발 모드와 프로덕션 모드 차이 “트리 쉐이킹(Tree Shaking)”은 더 이상 선택이 아닌 필수입니다. 사용하지 않는 코드를 제거해 번들 크기를 줄이고, 웹사이트 로딩 속도를 높이는 핵심 최적화 기법이죠. Vite는 최신 프론트엔드 개발 환경에서 가장 각광받는 빌드 도구로, 트리 쉐이킹을 어떻게 다루는지 제대로 이해하면 프로젝트 성능을 한 단계 업그레이드할 수 있습니다.트리 쉐이킹이란?트리 쉐이킹은 “나무를 흔들어 죽은 잎을 털어낸다”는 의미에서 유래한 용어입니다.자바스크립트 애플리케이션에서 실제로 사용되지 않는(Dead Code) 코드를 빌드 과정에서 제거해, 최종 번들 파일을 더 작고 빠르게 만들어줍니다.Vite 개발 모드 – 네이티브 ES 모듈, 번들링 없이 빠르게!1. 번들..

BPFDoor: 숨겨진 보안 위협목차BPFDoor란?왜 모든 리눅스 관리자가 알아야 하는가BPFDoor의 동작 원리위험성 평가감염 징후보호 전략자주 묻는 질문BPFDoor란?BPFDoor는 2022년 발견된 리눅스 시스템을 타겟으로 하는 극도로 은밀한 백도어 악성코드입니다. 이름에서 알 수 있듯이 리눅스 커널의 Berkeley Packet Filter(BPF) 기능을 악용하며, 보안 전문가들 사이에서 "유령 백도어"라고 불리기도 합니다.💡 핵심 포인트: BPFDoor는 취약점이 아닌 악성코드입니다. 이미 침투된 시스템에 설치되어 공격자에게 지속적인 접근 권한을 제공합니다.왜 모든 리눅스 관리자가 알아야 하는가BPFDoor가 일반적인 백도어와 다른 세 가지 핵심 특징:1. 탐지 어려움, 무포트 상태 대부..

브라우저 렌더링 파이프라인 가이드: 웹 페이지가 화면에 그려지 과정 들어가며: 우리가 보는 웹 페이지는 어떻게 만들어질까요?여러분은 웹사이트에 접속할 때마다 일어나는 일을 생각해보신 적이 있나요? 주소창에 URL을 입력하고 엔터를 누르는 순간부터 실제로 화면에 콘텐츠가 표시되기까지, 브라우저는 놀라운 작업을 수행합니다."구글 검색창이 어떻게 내 화면에 나타나는 걸까?", "인스타그램 피드는 어떻게 스크롤할 때마다 부드럽게 표시되는 걸까?" 이런 질문에 대한 답을 알기 위해서는 '브라우저 렌더링 파이프라인'을 이해해야 합니다.이 글에서는 HTML, CSS, JavaScript가 어떻게 픽셀로 변환되어 우리 화면에 표시되는지, 그 전체 과정을 차근차근 살펴보겠습니다.브라우저 렌더링 파이프라인: 6단계 여정브..

[목차] 개요브랜치 관리 명령어변경사항 관리병합 및 리베이스원격 저장소 관리특수 상황별 명령어Git Reflog를 활용한 복구 작업외부 링크1. 개요Git 현대 소프트웨어 개발에서 필수적인 버전 관리 도구입니다. 이 글에서는 실무에서 자주 사용되는 Git 명령어들을 체계적으로 정리했습니다. 특히 팀 협업 과정에서 유용하게 활용할 수 있는 명령어들을 중심으로 다루었습니다. 자주 사용되는 유용한 Git 명령어 모음1. 브랜치 관리 명령어브랜치 생성 및 전환# 새 브랜치 생성git branch 브랜치이름# 현재 브랜치 기준으로 생성과 동시에 전환git checkout -b 브랜치이름# 현재 모든 브랜치 확인 (원격 포함)git branch -a 브랜치 이름 변경# 현재 브랜치 이름 변경git branch -..

RSA RSA(암호화 알고리즘)는 공개 키 암호화 방식으로, 안전한 데이터 전송 및 정보 보호에 널리 사용되는 암호화 기술이다. RSA는 대표적인 공개 키 알고리즘으로 알려져 있으며 주로 적은 양의 데이터나 전자서명에 사용한다. 다음과 같은 원리로 작동한다: 1. 키 생성: - RSA 알고리즘은 두 개의 소수(p, q)를 선택합니다. 이 소수는 매우 큰 수로, 소인수 분해가 어려워야 합니다. - 소수 p와 q를 사용하여 공개 키와 개인 키를 생성합니다. 공개 키는 (N, e)로 표현되고, 개인 키는 (N, d)로 표현됩니다. - N은 p와 q의 곱으로, 큰 정수입니다. N은 공개되며 모듈러 연산에 사용됩니다. - e는 1보다 크고 (p-1)(q-1)과 서로소인 수로, 암호화에 사용됩니다. - d는 e에 ..

자료구조란 자료 구조는 데이터 값의 모임, 또 데이터 간의 관계, 그리고 데이터에 적용할 수 있는 함수나 명령을 의미한다. 자료구조는 서비스나 어플리케이션에서 필요한 데이터를 메모리에 어떻게 구조적으로 잘 정리해서 담아두고 관리하고 최종적으로 가장 효율적인 방식으로 필요한 데이터를 빠르게 접근하고 필요한 수정/삽입/삭제 를 할 수 있도록 도와준다. 한정적인 자원에서 메모리를 효율적으로 사용하기 위해서 필요하다 모든 목적에 부합하는 자료구조는 없으며 필요 목적에서 효율적인 자료 구조를 선택하여 효율을 높일 수 있다. 자료 구조는 알고리즘과 밀접한 관계 가 있는데 이유는 보통 자료구조가 선택되면 그에 적용할 알고리즘이 거의 명확해진다. 예) 배열이라면 반목문을 사용한 알고리즘 이라던지 즉 자료 구조가 효율적..

You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1) 얼마 전에 리액트로 프로젝트 완성 후에 웹의 이론적인 부분하고 타입스크립트 그리고 뷰를 조금 공부하느라 리액트를 안 쓰다가 오랜만에 강의를 보면서 시작하려는데 기본 세팅에서 에러가 발생했다. npx create-react-app my-app 입력후 아래 처럼 에러 메세지가 나왔고 내용은 더 이상 글로벌(전역) 설치를 지원하지 않으니 글로벌 설치를 제거하라는 거였다. You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1). We no longer support ..

SOP(same origin policy)-동일 출처 정책 CORS(cross origin resource sharing)-교차 출처 리소스 공유 여기서 origin 은 protocol , host, port SOP 어떤 출처(protocol , host, port = origin)에서 불러온 문서, 스크립트, 리소스가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 브라우저 보안 방식. 예를 들어 SOP가 없다면 클라이언트가 우연히 악성 사이트에 접속해서 해커가 만든 스크립트가 실행되어 클라이언트의 개인 정보나 다른 민감한 정보가 있는 사이트에 요청을 보낸 뒤 그 응답 값을 다시 해커 서버로 보내 개인 정보를 탈취할 수 있게 된다. 하지만 SOP 정책으로 인해 해커의 스크립트 출처와 요청을 받..

쿠키 사이트에 방문, 이용할 때 브라우저에 저장되는 내용 (내 컴퓨터에 저장) 예) 우리가 어느 특정 사이트에 로그인을 하면 쿠키에 특정 사이트에 로그인한 기록을 가지고 다음에 자동으로 로그인을 할 수 있다. 브라우저를 닫았다가 다시 열어도 기록은 남아있다. (쿠키가 많이 쌓이면 오래된 기록은 삭제됨) 쿠키는 임의로 삭제 수정이 가능하고 로그인 정보 등 민감함 정보들이 있는데 쿠키는 클라이언트에 하드에 저장되므로 해당 컴퓨터를 다른 사람이 사용하거나 해킹당해서 접속하면 쉽게 노출될 수 있어 보안성이 낮다. 세션 쿠키와 비슷한 기능을 한다고 생각할 수 있다. 하지만 세션은 클라이언트가 아닌 서버 쪽에 저장된다. 그리고 쿠키의 생명주기와 다르다 쿠키는 브라우저를 닫아도 바로 삭제되지 않지만(유효기간 설정에 ..