게으른 나에게

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) 특징전체 코드를 스캔 후 컴파일 → 실행 파일 생성오류를 한 번에 확인 가능컴파일 시 오류 발생 시 실행 불가초기 컴파일 시간이 오래 걸리지만, 이후 실행 속도가 빠름최적화가 가능하여 대규모 프로그램에서 성능이 우수✅ 장점빠른 실행 속도 → 한 번 컴파일 후 실행하므로 성능이 우수함코드 보안성 높음 → 컴파일된 실행 파일은 소스 코드가 노출되지 않음❎ 단점개발 속도 저하..

MVC(Model-View-Controller) 패턴소프트웨어 설계 및 아키텍처를 위한 디자인 패턴 중 하나사용자 인터페이스(UI)와 애플리케이션의 비즈니스 로직을 분리하여 유지보수성과 확장성을 높이는 설계 방식주로 웹 애플리케이션, GUI 애플리케이션, 모바일 애플리케이션 등에서 널리 사용됨MVC 패턴 목적응집도를 높이고 결합도를 낮춰 유지보수를 쉽게 함역할을 명확하게 분리하여 코드의 가독성과 확장성을 향상사용자 인터페이스(UI)와 비즈니스 로직을 분리하여 독립적인 개발 가능MVC 패턴 특징데이터(Model), 사용자 인터페이스(View), 제어 로직(Controller)을 분리각 구성 요소가 독립적으로 작동하여 유지보수가 용이애플리케이션의 흐름을 체계적으로 관리할 수 있음MVC 패턴 구성요소1️⃣ 모..

CPU(중앙 처리 장치, Central Processing Unit)컴퓨터의 '두뇌’ 역할운영체제 실행, 사용자 명령 처리, 소프트웨어 제어 등 다양한 기능을 담당.CPU 특징제어 유닛명령어를 해석, 실행 신호 제어시스템 내의 다른 장치(메모리, 저장장치, 입력장치 등)와 통신산술 논리 연산 장치(ALU, Arithmetic Logic Unit)산술 및 논리 연산 수행캐시 메모리CPU 내부에 위치빠른 데이터 접근 지원멀티코어 지원여러 개의 코어를 통해 멀티태스킹 지원순차적(직렬) 처리복잡한 연산을 효율적으로 처리✅ 장점다양한 작업 수행 가능범용적인 프로세서로, 모든 종류의 연산과 시스템 제어 가능높은 단일 코어 성능복잡한 연산과 명령어 실행 속도가 빠름운영체제 및 소프트웨어 최적화대부분의 소프트웨어가 C..

HTTP(Hyper Text Transfer Protocol)OSI 7 계층의 애플리케이션 계층(Application Layer) 에서 동작하는 프로토콜HTTP 특징클라이언트(브라우저)와 웹 서버 간의 데이터 통신을 담당웹 페이지 요청 시 80번 포트 사용웹 서버와 사용자 브라우저는 데이터를 일반 텍스트(Plain Text)로 교환Stateless(상태 비저장) 프로토콜 → 요청과 응답이 끝나면 연결을 유지하지 않음Method, Path, Version, Headers, Body 등으로 구성✅ 단점데이터가 암호화되지 않아 보안에 취약개인정보 및 중요한 데이터를 주고받기 부적절HTTP의 구조사용자가 브라우저에서 URL 입력 (예: http://example.com)브라우저가 웹 서버에 HTTP 요청 전송웹..

OSI 7 계층 - 전송계층 OSI 7 계층들 중 4번째 계층, TCP/IP의 전송 계층에서 사용하는 프로토콜송신자와 수신자를 연결하는 통신서비스를 제공하는 계층 = 데이터 전달 담당데이터의 전달을 담당하며 전달되는 패킷의 오류를 검사하고 재전송 요구 등의 제어를 담당TCP(Transmission Control Protocol)연결 지향적 프로토콜ex) 파일 전송, 웹 검색, 이메일 전송, 채팅 TCP 특징 ✅ 장점연결 지향적3-way handshaking과정을 통해 연결을 설정4-way handshaking과정을 통해 연결을 해제신뢰성 보장패킷 유실 시 재전송오류 검출 및 수정 가능순서 보장전송된 데이터 패킷이 수신 측에서 전송된 순서대로 보장흐름 제어 및 혼잡 제어❎ 단점오버헤드 발생신뢰성 확보를 위..