CS 총정리

웹 브라우저는 HTML, CSS, JavaScript 등의 리소스를 받아서 화면에 표시하는 과정을 거친다.이 과정은 HTML 파싱 → CSS 파싱 → 렌더 트리 생성 → 레이아웃 계산 → 페인팅 순으로 진행된다.브라우저는 웹 페이지를 렌더링할 때 다섯 단계를 거친다.H

Web Vitals는 웹사이트의 성능을 평가하는 주요 지표로, 사용자 경험(UX)을 향상시키기 위해 반드시 고려해야 한다.웹페이지가 얼마나 빠르게 로딩되고, 반응성이 좋은지, 레이아웃이 안정적인지를 측정한다.Google은 3가지 핵심 Web Vitals 지표를 제공하며

웹 개발을 하다 보면 프레임워크(Framework) 와 라이브러리(Library) 라는 용어를 자주 접하게 된다.이 둘은 모두 개발을 도와주는 도구이지만, 근본적인 차이점이 존재한다.✔ 프레임워크(Framework): 애플리케이션의 전체적인 구조와 흐름을 제공하는 도구

웹 브라우저에서 URL을 입력하고 엔터를 누르면 다양한 과정이 순차적으로 진행된다.이 과정은 DNS 조회, 서버와의 연결, 요청 및 응답 처리, 브라우저 렌더링으로 구성된다.📌 DNS(Domain Name System)는 도메인 이름을 IP 주소로 변환하는 역할을 한

CORS는 다른 출처(Origin)의 리소스를 공유할 수 있도록 설정하는 HTTP 헤더 기반의 메커니즘입니다.출처는 다음 세 가지 요소의 조합입니다:프로토콜 (http, https)호스트 (domain)포트 번호해결방법:해결방법:CORS는 웹 보안의 중요한 부분이며,

REST(Representational State Transfer)는 웹 서비스의 아키텍처 스타일로, 다음과 같은 특징을 가집니다.자원(Resource) 중심의 설계상태를 가지지 않음(Stateless)HTTP 프로토콜 기반URI를 통한 자원 식별RESTful API는

쿠키(Cookie), 세션(Session), 토큰(Token)은 웹 애플리케이션에서 사용자 인증과 상태 관리를 위해 사용되는 기술로, 각각의 특징과 사용 방식에서 차이가 있다.정의: 쿠키는 웹 브라우저에 저장되는 작은 데이터 파일이다. 서버에서 클라이언트로 보내지고,

JWT는 당사자 간에 정보를 JSON 객체로 안전하게 전송하기 위한 독립적인 방식을 정의하는 표준입니다. 이 정보는 디지털 서명이 되어 있으므로 신뢰할 수 있습니다.JWT는 세 부분으로 구성되며, 각각 점(.)으로 구분됩니다:헤더 (Header)페이로드 (Payload

📌 프로세스는 실행 중인 프로그램의 인스턴스이다.📌 운영체제(OS)에서 독립된 메모리 공간을 할당받아 실행된다.📌 하나의 프로세스는 여러 개의 스레드(Thread)를 포함할 수 있다.✅ 프로세스의 특징독립적인 실행 단위 → 각 프로세스는 서로 영향을 주지 않음.고

SEO(Search Engine Optimization, 검색 엔진 최적화)는 웹사이트가 구글, 네이버 등의 검색 엔진에서 더 잘 노출될 수 있도록 최적화하는 작업을 의미한다.검색 결과에서 상위에 노출되면 트래픽 증가, 사용자 경험 개선, 브랜드 신뢰도 향상 등의 효과

웹 애플리케이션을 개발할 때, SPA(Single Page Application) 와 MPA(Multiple Page Application) 두 가지 구조 중에서 선택할 수 있다.각각의 방식은 장점과 단점이 다르며, 프로젝트의 요구사항에 따라 적절한 방식을 선택해야 한

프론트엔드 개발에서 아토믹 디자인(Atomic Design)과 플럭스 패턴(Flux Pattern)은 각각 UI 설계 방식과 상태 관리 방식을 다루는 개념이다. 두 개념을 비교하고, 실제로 많이 사용하는 Redux, Zustand, Recoil과의 연관성을 설명한다.✅

무한 스크롤(Infinite Scroll)은 사용자가 특정 버튼을 클릭하지 않아도 스크롤을 내릴 때 새로운 데이터를 불러오는 기법이다.10,000개 이상의 대량 데이터를 다룰 경우, 성능 최적화와 렌더링 최적화가 매우 중요하다.이 글에서는 대량 데이터 무한 스크롤을 구

자바스크립트에서 동기(Synchronous)와 비동기(Asynchronous)는 작업을 처리하는 방식을 나타낸다.이 개념을 이해하면 코드 실행 흐름을 더 효과적으로 관리할 수 있으며, 특히 네트워크 요청, 파일 읽기, UI 업데이트 등의 비동기 작업을 다룰 때 매우 중

웹 개발에서 브라우저 개발자 도구(DevTools)는 디버깅, 성능 최적화, 네트워크 분석 등을 수행하는 필수적인 도구이다.Google Chrome, Firefox, Edge 등 대부분의 최신 브라우저에서 제공하며, 프론트엔드 개발자가 효과적으로 웹 애플리케이션을 개발

테스트 주도 개발(Test-Driven Development, TDD)은 테스트 코드를 먼저 작성한 후, 이를 통과하는 최소한의 기능을 구현하고, 이후 리팩토링을 반복하는 개발 방식이다.이는 소프트웨어의 안정성과 유지보수성을 높이고, 버그를 줄이는 효과가 있다.✅ "테

웹 개발에서 클라이언트와 서버 간의 데이터 통신을 위해 HTTP 요청 메서드를 사용한다. 대표적으로 GET, POST, PUT, PATCH, DELETE가 있으며, 각각의 목적과 차이점을 이해하는 것이 중요하다.✅ 데이터를 요청하고 조회할 때 사용✅ URL의 쿼리 스트

웹 애플리케이션 개발에서 클라이언트와 서버 간의 데이터 통신 방식은 매우 중요한 요소이다.특히 AJAX와 WebSocket은 웹 애플리케이션에서 데이터를 주고받는 대표적인 기술로, 각각의 특징과 사용 방식이 다르다.AJAX(Asynchronous JavaScript a

웹사이트의 보안이 중요해지면서 HTTPS(HTTP Secure)는 필수적인 요소가 되었다.HTTPS는 HTTP에 보안 계층(SSL/TLS)을 추가한 프로토콜로, 데이터를 암호화하여 안전하게 전송한다.이번 글에서는 HTTPS의 동작 원리와 보안 기능에 대해 설명한다.📌

TCP 3-Way Handshake(3-웨이 핸드셰이크)는 TCP/IP 프로토콜에서 클라이언트와 서버 간의 안정적인 연결을 수립하기 위해 사용하는 과정이다.이 과정은 신뢰성 있는 데이터 전송을 보장하기 위해 3단계의 패킷 교환을 거친다.클라이언트와 서버가 통신을 시작하

네트워크 프로토콜에서 TCP(Transmission Control Protocol)와 UDP(User Datagram Protocol)는 가장 많이 사용되는 두 가지 전송 방식이다.이 두 프로토콜은 데이터를 어떻게 전달할 것인지에 대한 방식이 다르며, 각각의 장단점이

웹 애플리케이션에서 데이터를 저장하는 방식에는 쿠키(Cookie), 세션 스토리지(Session Storage), 로컬 스토리지(Local Storage)가 있다.각각의 특징과 사용 목적이 다르므로 적절한 상황에 맞춰 선택하는 것이 중요하다.쿠키는 클라이언트와 서버 간