본문 바로가기

분류 전체보기54

웹 표준 및 접근성 웹 표준(Web Standards)과 웹 접근성(Web Accessibility)은 모든 사용자가 웹 콘텐츠와 웹 애플리케이션을 쉽게 사용할 수 있도록 보장하는 중요한 원칙과 지침이다 웹 표준 (Web Standards) 웹 페이지를 구성하는 HTML, CSS, JavaScript 등의 기술이 어떻게 사용되어야 하는지에 대한 공식적인 규칙과 지침 이러한 표준은 월드 와이드 웹 컨소시엄(W3C)과 같은 국제적인 기구에 의해 개발 및 유지 관리된다 목적 호환성 다양한 브라우저와 기기에서 웹 콘텐츠가 일관되게 동작하도록 함 재사용성 표준화된 코드는 다양한 프로젝트나 환경에서 재사용하기 쉬움 유지보수 표준을 따르는 코드는 이해하기 쉽고, 수정 및 유지보수가 용이함 웹 접근성 (Web Accessibility) .. 2024. 3. 6.
프로세스와 스레드 프로세스(Process)와 스레드(Thread)는 운영체제에서 실행되는 프로그램의 기본 단위다 프로세스 프로세스는 실행 중인 프로그램의 인스턴스다 운영체제에서 프로세스는 자체적인 코드, 데이터, 힙(Heap), 스택(Stack) 공간 등을 가진 독립적인 실행 환경을 제공받는다 프로세스는 최소 하나 이상의 스레드(메인 스레드)를 포함하며, 각 프로세스는 다른 프로세스와는 독립적으로 실행된다 프로세스 간 통신(IPC, Inter-Process Communication)을 위해서는 특별한 메커니즘이 필요하다 주요 특징 독립적인 메모리 영역(코드, 데이터, 힙, 스택)을 가짐 다른 프로세스와는 독립적으로 실행 자원 사용량이 스레드에 비해 많음 컨텍스트 스위칭 비용이 높음 스레드 스레드는 프로세스 내에서 실행되는.. 2024. 3. 6.
객체 지향 프로그래밍 객체 지향 프로그래밍(Object-Oriented Programming, OOP) 소프트웨어 개발에서 널리 사용되는 프로그래밍 패러다임 중 하나 이 접근 방식은 프로그램을 객체들의 모임으로 보고, 객체 간의 상호작용을 통해 애플리케이션을 구축하는 것을 목표로 한다 객체는 데이터와 이 데이터를 조작할 수 있는 메서드(함수)를 캡슐화한 것으로 정의된다 OOP의 핵심 개념 클래스(Class)와 객체(Object) 클래스 객체를 생성하기 위한 템플릿 또는 블루프린트 클래스는 객체의 구조와 행동을 정의 객체 클래스에 정의된 속성(상태)과 행동(메서드)을 실제로 가지고 있는 인스턴스 상속(Inheritance) 한 클래스(부모 클래스)의 속성과 메서드를 다른 클래스(자식 클래스)가 상속받아 사용할 수 있게 하는 메.. 2024. 3. 6.
bundle 사이즈 줄이려면? 웹 애플리케이션의 번들(bundle) 사이즈를 줄이는 것은 로딩 시간을 단축시키고 사용자 경험을 개선하는 데 중요하다 번들 사이즈를 최적화하는 몇 가지 방법은 다음과 같다 1. 코드 분할(Code Splitting) 동적 임포트(Dynamic Imports) 필요한 순간에만 모듈을 로드하기 위해 동적 임포트(import())를 사용 이 방법은 사용자가 실제로 필요로 하는 코드만 로드하여 초기 로딩 시간을 줄일 수 있음 라우트 기반 분할 사용자가 애플리케이션의 특정 부분에 접근할 때만 해당 부분의 코드를 로드하도록 설정함 예를 들어, React에서는 React.lazy와 Suspense를 사용하여 라우트 기반 코드 분할을 구현할 수 있음 2. 트리 쉐이킹(Tree Shaking) 사용되지 않는 코드(데드 .. 2024. 3. 6.
이벤트 루프와 태스크 큐 설명 이벤트 루프(Event Loop)와 태스크 큐(Task Queue)는 JavaScript가 싱글 스레드 언어임에도 불구하고 비동기 작업을 가능하게 하는 핵심 개념이다 JavaScript의 실행 환경인 웹 브라우저나 Node.js에서는 이벤트 루프를 사용하여 비동기 콜백, 이벤트, 타이머 등을 관리한다 이벤트 루프(Event Loop) 이벤트 루프는 콜 스택(Call Stack), 태스크 큐(Task Queue), 마이크로태스크 큐(Microtask Queue) 등 여러 가지 컴포넌트를 순회하며, 실행할 태스크가 있는지 반복적으로 확인한다 이벤트 루프의 주요 목적은 콜 스택이 비어 있을 때, 태스크 큐나 마이크로태스크 큐에 있는 작업을 콜 스택으로 옮겨 실행하는 것 태스크 큐(Task Queue) 태스크 .. 2024. 3. 6.
로그인 처리 시 쿠키와 세션 어떻게 사용하는가 로그인 처리 시 쿠키와 세션은 사용자 인증 상태를 유지하는 데 함께 사용된다 일반적인 흐름은 1. 로그인 과정 사용자가 로그인 폼에 아이디와 비밀번호를 입력하여 로그인 요청 서버가 사용자의 아이디와 비밀번호를 검증 이 과정에서 데이터베이스나 다른 인증 서비스를 통해 제공된 정보의 유효성을 확인 인증이 성공하면, 서버는 사용자에 대한 고유한 세션 ID를 생성 이 세션 ID는 서버에 저장되며, 사용자와 관련된 세션 데이터(예: 사용자 아이디, 권한 등)를 포함 서버는 생성된 세션 ID를 쿠키에 저장하여 클라이언트(브라우저)로 전송하며, 이 쿠키는 일반적으로 Set-Cookie HTTP 헤더를 통해 클라이언트에게 전달됨 2. 세션 유지 및 인증 상태 관리 클라이언트는 서버로부터 받은 쿠키를 저장하고, 이후 서.. 2024. 3. 6.
쿠키, 세션, 웹 스토리지 차이 쿠키(Cookies), 세션(Sessions), 웹 스토리지(Web Storage)는 웹 개발에서 클라이언트 상태를 관리하기 위해 사용되는 기술이다 각각의 기술은 다른 방식으로 데이터를 저장하며, 각기 다른 목적과 제한 사항을 가지고 있다 쿠키 (Cookies) 클라이언트(브라우저)에 작은 데이터 조각을 저장하는 기술 서버는 HTTP 응답 헤더를 통해 쿠키를 클라이언트에 설정하고, 이후 클라이언트는 동일한 서버로의 모든 요청에 이 쿠키를 포함하여 전송 쿠키는 사용자 세션을 관리하고, 사용자 선호도를 저장하며, 추적 정보를 수집하는 데 주로 사용 제한 사항 크기 제한: 약 4KB 브라우저마다 저장할 수 있는 쿠키의 수가 제한적 보안 쿠키 데이터는 암호화되지 않고 일반 텍스트로 전송됨 그러므로 민감한 데이터.. 2024. 3. 6.
CORS CORS (Cross-Origin Resource Sharing) 웹 애플리케이션에서 발생하는 보안 메커니즘 중 하나 다른 출처(origin)에서 실행 중인 웹 페이지가 현재 출처와 다른 출처의 리소스에 접근할 수 있도록 허용하는 방법을 정의 기본적으로 웹 브라우저는 동일 출처 정책(Same-Origin Policy)을 적용하여, 스크립트가 다른 출처의 리소스에 접근하는 것을 제한함 이는 보안상의 이유로, 예를 들어 XSS(Cross-Site Scripting) 공격을 방지하기 위함이다 CORS 동작 원리 CORS는 추가 HTTP 헤더를 사용하여, 한 출처에서 다른 출처로의 요청이 안전한지를 브라우저에 알려준다 서버는 Access-Control-Allow-Origin 과 같은 CORS 관련 헤더를 응답에.. 2024. 3. 6.
Webpack, Babel, Polyfill Webpack 주로 자바스크립트 애플리케이션을 위한 모듈 번들러 주요 역할 프로젝트에 포함된 모든 리소스(JS, CSS, 이미지 파일 등)를 모아서 하나 또는 여러 개의 파일로 합침 필요에 따라 최적화 다양한 로더(loader)를 사용하여 ES6, TypeScript, SASS 등 다양한 언어로 작성된 소스 코드를 일반적으로 JS 파일과 CSS 파일로 변환할 수 있다 결과적으로 의존성 관리와 함께 웹 자원을 효율적으로 로딩하기 위한 번들을 생성한다 Babel 자바스크립트 컴파일러 주로 최신 자바스크립트(ES6 이상) 문법을 사용하여 작성된 코드를 모든 브라우저에서 실행 가능한 이전 버전의 자바스크립트(ES5)로 변환하는 데 사용 개발자는 최신 문법과 기능을 사용하여 개발할 수 있다 변환 과정을 통해 코드.. 2024. 3. 6.
DNS DNS(Domain Name System)는 인터넷상의 도메인 이름을 IP 주소로 변환하는 시스템 1. 브라우저 캐시 브라우저는 먼저 자체 캐시를 확인 요청된 도메인의 IP 주소를 찾는다 최근 방문한 경우 사이트의 DNS 정보가 일정 시간 동안 브라우저에 저장되어 있음 2. 운영 체제(OS) 캐시 브라우저 캐시에 없다면, 브라우저는 운영 체제의 DNS 정보를 확인 운영 체제 역시 자체적으로 DNS 정보를 캐싱 3. 라우터 캐시 운영 체제 수준에서도 DNS 정보 찾지 못했다면, 다음으로 네트워크 라우터의 캐시 확인 라우터는 로컬 네트워크 내의 모든 기기에 대해 DNS 조회 결과 캐싱 가능 4. ISP의 DNS 서버 로컬 캐시에서도 해당 DNS 정보를 찾지 못하면, 브라우저는 인터넷 서비스 제공 업체(ISP.. 2024. 3. 6.

티스토리툴바