게으른 나에게

“이벤트 전파 방식은 이벤트가 발생한 요소에서부터 시작하여 부모 요소로 전파되는 과정을 이해하는 데 중요”  이벤트 버블링이벤트가 발생한 요소에서 시작 → 상위 부모 요소로 전파되는 방식가장 깊은 요소에서 시작하여 부모 요소를 거슬러 올라가며 각 요소에 할당된 이벤트 핸들러가 실행 특징FORM DIV P 요소를 클릭하면 다음 순서로 이벤트 핸들러가 실행 요소의 핸들러 실행부모 요소의 핸들러 실행최상위 요소의 핸들러 실행이러한 이벤트 전파 방식은 대부분의 이벤트에 적용이를 통해 상위 요소에서도 하위 요소에서 발생한 이벤트를 감지하고 처리 가능    이벤트 캡처링이벤트가 최상위 부모 요소에서 → 시작하여 이벤트가 발생한 요소까지 전파되는 방식이벤트가 상위 요소에서 하위 요소로 내려가며 각 요소..

this 용법함수의 호출 방식과 정의된 위치에 따라 참조하는 객체가 달라짐자신이 속한 객체를 가리키는 변수 사용 사례전역 범위에서의 this전역 컨텍스트에서 this는 전역 객체를 가리킴브라우저 환경에서는 window 객체가 이에 해당console.log(this === window); 일반 함수에서의 this함수 내부에서의 this는 호출 방식에 따라 달라짐비엄격 모드에서는 전역 객체엄격 모드에서는 undefinedfunction showThis() { console.log(this);}showThis(); // 비엄격 모드: window 객체, 엄격 모드: undefined 객체의 메서드에서의 this해당 메서드 내부의 this는 그 메서드가 속한 객체를 가리킴const obj = { value:..

클로저(Closure)클로저는 함수와 그 함수가 선언된 렉시컬 환경(Lexical Environment)의 조합함수가 생성될 당시의 외부 변수를 기억하고, 그 함수가 실행될 때에도 해당 변수에 접근할 수 있는 기능‼️ 클로저 = 함수 + 렉시컬 스코프 원리자바스크립트에서는 함수가 생성될 때, 해당 함수는 자신이 선언된 위치의 렉시컬 환경을 기억이를 통해 내부 함수는 외부 함수의 변수에 접근 가능외부 함수의 실행이 종료된 이후에도 내부 함수가 해당 변수에 접근 가능특징상태 유지클로저를 사용하면 함수가 생성될 때의 환경을 기억하여, 호출될 때마다 이전 상태를 유지상태를 유지해야 하는 다양한 상황에서 유용하게 활용 됨정보 은닉클로저를 통해 외부에서 직접 접근할 수 없는 변수를 만들 수 있음데이터의 캡슐화와 은..

호이스팅호이스팅(Hoisting)은 JavaScript에서 변수와 함수 선언문이 코드 실행 전에 해당 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 현상을 의미 var 키워드선언 단계가 호이스팅되어 스코프의 최상단으로 이동초기화는 호이스팅되지 않음, 선언 전에 해당 변수에 접근하면 undefined 값을 반환console.log(a); // 출력: undefinedvar a = 5;console.log(a); // 출력: 5→ 코드 내부적 해석var a;console.log(a); // 출력: undefineda = 5;console.log(a); // 출력: 5 let 및 const 키워드호이스팅되지만, 초기화 전에 해당 변수에 접근하면 ReferenceError가 발생이는 “Temporal Dead..

Reflow웹페이지 요소의 크기 또는 위치가 변할 때, 변경된 레이아웃을 다시 계산하여 렌더 트리에 적용하는 과정크기 관련 속성: width, height, padding, margin, border-width위치 관련 속성: position, top, left레이아웃 관련 속성: display, flex폰트 관련 속성: font-size, font-weight리플로우는 보통 CPU를 활용해 연산 Repaint요소의 시각적 표현(색상, 테두리 등)이 변할 때, 변경된 시각적 표현을 다시 계산하여 렌더 트리에 반영하는 과정색상 관련 속성: color, background-color테두리 관련 속성: border-color, border-radius리페인트는 보통 GPU를 활용하여 처리 Reflow VS R..

브라우저 렌더링 원리웹 브라우저는 HTML, CSS, JavaScript가 조화를 이루며 작동.이처럼 각 요소가 올바르게 동작하도록 하려면, 브라우저가 이 코드들을 어떤 순서로 해석하고 처리하는지, 즉 렌더링 순서를 이해하는 것이 중요.이를 통해 더 최적화된 코드를 작성 가능 브라우저 렌더링 단계 개념HTML 파싱 및 DOM 트리 생성서버로부터 받은 HTML 파일을 브라우저가 해석(파싱)해야 함 → HTML 파일은 문자열로 이루어져 브라우저 이해 불가능파싱을 통해 HTML 파일 해석 → 페이지의 구조와 내용을 표현하는 DOM Tree로 변환하는 단계.이 트리는 각 HTML 태그와 텍스트 노드를 계층 구조로 나타냄.CSS 파싱 및 CSSOM 트리 생성HTML 문서에 포함되거나 외부에서 불러온 CSS 파일을..

SaaS서비스형 소프트웨어소프트웨어를 설치하거나 직접 관리할 필요 없이, 인터넷을 통해 제공받아 사용하는 서비스 방식 특징소프트웨어를 제품이 아닌 서비스 형태로 제공하는 방식.사용자는 소프트웨어를 웹 브라우저나 앱을 통해 접속해서 사용.설치, 유지보수, 업데이트는 제공업체(서비스 운영사)가 담당하므로, 사용자는 별도 IT 인프라나 기술 없이도 사용 가능.항목설명접근성인터넷만 되면 어디서든 접속 가능유지보수 無설치 필요 없음, 버전 관리도 자동과금 방식대부분 월간/연간 구독 기반 요금제확장성유저 수, 기능 추가 등 유연하게 확장 가능협업 최적화여러 사용자가 동시에 접속하여 작업 가능서비스명용도Google Workspace이메일, 문서 작업, 드라이브 등Notion메모, 문서 협업 플랫폼Slack팀 커뮤니케..

암호학데이터를 안전하게 전송하고 저장하기 위한 기술 및 방법을 연구하는 학문 암호학 주요 목적기밀성(Confidentiality): 정보가 허가된 사용자에게만 공개되도록 함무결성(Integrity): 정보가 전송 중 변경되지 않도록 보장인증(Authentication): 정보의 발신자와 수신자가 누구인지 확인부인방지(Non-repudiation): 송신자가 메시지를 보냈음을 부인하지 못하도록 증명 대칭 키 암호화암호화와 복호화에 같은 키 사용Session Key, Shared Key, Secret Key, 단용키대표 알고리즘DES, 3DES, AES, SEED, ARIA✅ 장점기밀성 제공 O빠른 속도대용량 데이터에 적합❎ 단점무결성/인증/부인방지 제공 X키 분배가 어려움 → 탈취 가능성, 사용자가 많아질..

코드 최적화(Code Optimization)컴파일러가 코드를 기계어로 변환할 때, 성능을 향상시키기 위해 실행 속도를 높이고 리소스 사용을 최소화하는 과정단순히 코드 변환이 아닌, 최적화를 수행하여 실행 성능을 향상가독성과 유지보수성을 고려하면서도 효율적인 자원 사용을 목표코드 최적화의 주요 목표명령어 수 최소화(Minimize number of instructions)중복된 연산 제거 및 불필요한 연산 감소곱셈, 나눗셈 등의 느린 연산 최소화메모리 대기 시간 단축(Avoid waiting for memory)레지스터에 데이터를 유지하여 CPU 접근 속도 증가캐시 친화적인 메모리 접근 방식 적용분기(branch) 최소화(Avoid branching)불필요한 조건문과 분기문 제거분기 예측 최적화를 돕는 ..

개요컴퓨터는 고급 언어로 작성된 코드를 직접 이해하지 못함기계어(Machine Code)로 변환하는 과정이 필요 → 방식 2가지컴파일러(Compiler)소스 코드를 한 번에 기계어로 변환 → 실행 가능한 바이너리 파일(실행 파일)을 생성변환 과정에서 최적화(Optimization) 수행하여 실행 속도를 빠르게 함컴파일러(Compiler) 특징전체 코드를 스캔 후 컴파일 → 실행 파일 생성오류를 한 번에 확인 가능컴파일 시 오류 발생 시 실행 불가초기 컴파일 시간이 오래 걸리지만, 이후 실행 속도가 빠름최적화가 가능하여 대규모 프로그램에서 성능이 우수✅ 장점빠른 실행 속도 → 한 번 컴파일 후 실행하므로 성능이 우수함코드 보안성 높음 → 컴파일된 실행 파일은 소스 코드가 노출되지 않음❎ 단점개발 속도 저하..