-

18.1 호스팅 서비스네트워크 대역폭 확보 및 서버 관리의 어려움을 해결하기 위해 전문적인 웹 호스팅 서비스가 등장했습니다. 호스팅 웹 서버는 다음과 같은 서비스를 제공합니다.서버 하드웨어 및 소프트웨어 관리네트워크 연결 및 대역폭 제공데이터 백업 및 보안기술 지원18.1.1 간단한 예: 전용 호스팅전용 호스팅은 ISP로부터 전용 웹 서버를 임대하여 사용하는 방식입니다.장점: 높은 성능과 안정성, 사용자 정의 가능단점: 높은 비용, 서버 관리 필요18.2 가상 호스팅 많은 사람들에게는 비용이 드는 전용 웹 서버를 가지는 것은 낭비입니다. 따라서 컴퓨터 한 대를 여러 고객이 공유하게 해서 저렴한 웹 호스팅 서비스를 제공할 수 있습니다. 이를 공유 호스팅 또는 가상 호스팅이라고 부릅니다. 사실은 물리적으로 ..

17.1 내용 협상 기법클라이언트 주도 (Client-Driven): 클라이언트가 요청을 보내면 서버는 선택지를 보내주고 클라이언트가 선택합니다.서버 주도 (Server-Driven): 서버가 클라이언트 요청 헤더를 검증하여 어떤 버전을 제공할지 결정합니다.투명 (Transparent): 투명한 중간 장치(주로 프락시 캐시)가 서버를 대신하여 협상합니다.17.2 클라이언트 주도 협상가능한 페이지의 목록을 서버 응답으로 돌려주어 클라이언트가 보고 싶은 것을 선택하게 하는 방식입니다.장점: 구현이 간단하고 클라이언트가 명시적으로 선택할 수 있습니다.단점: 각 페이지에 두 번의 요청이 필요하므로 성능 저하가 발생할 수 있습니다.구현 방법:서버는 클라이언트에게 선택지를 표현하기 위해 각 링크와 설명이 담긴 HT..

14.1 HTTP를 안전하게 만들기대량 구매, 은행 업무 등을 위해서는 HTTP와 디지털 암호화 기술을 결합해야 합니다. HTTP는 원래 평문 통신 프로토콜로, 도청이나 데이터 위조에 취약합니다. 따라서 디지털 암호화 기술을 활용하여 HTTP 트랜잭션을 안전하게 보호하는 것이 필수적입니다.서버 인증: 위조된 서버가 아닌 진짜 서버와 이야기하고 있음을 알 수 있어야 합니다. 서버 인증은 웹사이트의 신뢰성을 보장하고, 사용자가 피싱 사이트에 속아 개인 정보를 유출하는 것을 방지합니다.클라이언트 인증: 진짜 사용자와 이야기하고 있음을 알 수 있어야 합니다. 클라이언트 인증은 사용자 계정을 보호하고, 권한 없는 사용자의 접근을 차단합니다.무결성: 데이터가 위조되는 것으로부터 안전해야 합니다. 데이터 무결성은 전..

12. 기본 인증개요인증(Authentication)은 사용자가 주장하는 신원이 실제 사용자의 신원과 일치하는지를 확인하는 과정입니다. 웹 시스템에서 인증은 사용자가 시스템에 접근하기 위해 자신의 신원을 증명하는 필수적인 절차입니다. HTTP는 이러한 인증을 위한 다양한 메커니즘을 제공하며, 이를 통해 서버는 클라이언트의 신원을 확인하고 권한을 부여할 수 있습니다.12.1.1 HTTP 인증 요구/응답 프레임워크HTTP는 서버와 클라이언트 간의 상호 작용을 통해 인증을 수행합니다.인증 요구: 서버는 클라이언트의 요청에 대해 인증 정보를 요구할 수 있습니다. 이때 401 Unauthorized 상태 코드와 함께 WWW-Authenticate 헤더를 보냅니다. WWW-Authenticate 헤더에는 사용 가능..

1. 웹 성능 향상을 위한 새로운 기준, HTTP 2.0웹 페이지를 구성하는 다양한 요소(HTML, CSS, 이미지 등)를 효율적으로 가져와 빠르게 보여주는 것은 웹 개발의 핵심 과제입니다. 과거 HTTP 1.1 프로토콜은 한 번에 하나의 요소만 가져올 수 있어 페이지 로딩 속도가 느리고, 여러 연결을 동시에 열어야 하는 등의 한계점이 있었습니다. 이러한 문제를 해결하기 위해 등장한 것이 바로 HTTP 2.0입니다.HTTP 2.0은 Google에서 개발한 SPDY 프로토콜을 기반으로 표준화된 프로토콜로, 웹 성능을 획기적으로 향상시켰습니다. 하나의 TCP 연결을 통해 여러 개의 요청을 동시에 처리하고, 헤더를 효율적으로 압축하며, 서버가 필요한 리소스를 미리 전송하는 등 다양한 기능을 제공합니다. 2. ..

웹 로봇은 사람과의 상호작용 없이 연속된 웹 트랜잭션들을 자동으로 수행하는 소프트웨어 프로그램9.1 크롤러와 크롤링웹 크롤러 웹페이지를 한 개 가져오고, 다음 그 페이지가 가리키는 모든 웹페이지를 가져오는 것을 재귀적으로 반복하는 방식으로 웹을 순회하는 로봇9.1.1 어디에서 시작하는가: 루트 집합 루트집합: 크롤러가 방문을 시작하는 URL들의 초기 집합=> 충분히 다른 장소에서 URL을 선택하여 루트 집합을 만들어야 한다. 좋은 루트 집합이란?=> 크고 인기 있는 웹사이트, 새로 생성된 페이지들의 목록, 자주 링크되지 않는 잘 알려져 있지 않은 페이지들의 목록을 구성9.1.2 링크 추출과 상대 링크 정상화크롤러가 크롤링을 진행하면서 새 링크를 발견함에 따라 목록이 급속히 확장된다.9.1.3 순환 피하기..

12.1 웹사이트와 성능시작하며사용자는 속도가 빠르고, 보안이 좋으며, 사용성이 좋은 웹사이트를 기대합니다. 그러나 많은 개발자들은 이러한 성능에 크게 신경 쓰지 않는 경우가 많습니다.개발자의 기기는 대부분 일반적인 사용자의 평균적인 기기보다 성능이 뛰어나기 때문에 이러한 문제를 느끼지 못할 수 있습니다.성능을 개선하는 작업은 어렵고 재미있지 않으며, 눈에 띄는 성능 향상을 기대하기 어렵습니다.이번 포스팅에서는 웹 개발자가 관심을 가지며 개발해야할 핵심 웹 지표에 대해 설명합니다.12.2 핵심 웹 지표란?이전까지 성능 측정을 위한 뚜렷한 표준이나 측정 방법이 정해져 있지 않았으나, 구글에서 만든 Core Web Vitals가 등장했습니다. 주요 지표는 다음과 같습니다:최대 콘텐츠풀 페인트 (LCP)최초 ..

10.1 리액트 17 버전 살펴보기10.1.1 리액트의 점진적인 업그레이드리액트 17은 애플리케이션이 너무 커서 한 번에 업그레이드하기 어려운 상황에서도 유용합니다. 버전이 서로 다른 리액트가 공존할 수 있도록 지원해 점진적인 업그레이드를 가능하게 합니다. 이는 애플리케이션의 부분적인 업그레이드를 통해 점진적으로 최신 버전의 기능을 활용할 수 있게 해줍니다.10.1.2 이벤트 위임 방식의 변경리액트 16에서는 이벤트 핸들러가 document 레벨에서 실행되었습니다. 그러나 리액트 17부터는 루트 요소로 변경되었습니다. 이는 각 이벤트가 리액트 컴포넌트 트리 수준에서 격리되므로, 이벤트 버블링으로 인한 혼선을 방지할 수 있습니다.10.1.3 import React from 'react'가 더 이상 필요 없..

3.1 리액트의 모든 훅 파헤치기3.1.1 useState함수형 컴포넌트는 매번 함수를 실행해 렌더링이 일어나기 때문에 함수 내부의 let으로 정의된 변수도 함수가 실행될 때마다 다시 초기화됩니다.useState는 클로저로 구현되어 외부에 해당 값을 노출시키지 않으면서 함수가 실행되더라도 이전의 값을 정확하게 꺼내 쓸 수 있습니다. 게으른 초기화useState 인수로 원시값을 넣지 않고 함수를 넣어줍니다. 초기값이 복잡하거나 무거운 연산을 포함하고 있을 때 사용하며, 리렌더링시에는 함수를 실행하지 않습니다. 이는 localStorage, sessionStorage 접근, 배열 순회 등이 필요할 때 사용하는 것이 좋습니다. import React, { useState } from 'react';const ..

8.1 ESLint를 활용한 정적 코드 분석8.1.1 ESLint 살펴보기ESLint는 어떻게 코드를 분석할까?자바스크립트 코드를 문자열로 읽는다.자바스크립트 코드를 분석할 수 있는 파서로 코드를 구조화한다.2번에서 구조화한 트리 AST를 기준으로 각종 규칙과 대조한다.규칙과 대조했을 때 이를 위반한 코드를 알리거나 수정한다.ESLint는 파서 espree를 사용하여 자바스크립트 코드를 분석한다. AST 트리 예시를 확인하고 싶다면 아래 사이트를 참조해보자.https://astexplorer.net/ no-debugger 규칙Eslint에는 debugger; 선언을 금지한 규칙이 존재한다. 해당 규칙은 다음과 같이 작성되어있다.module.exports = { meta: { type: 'probl..