Documentation11 브라우저 동작 원리 일단 브라우저 주소 창에 웹사이트의 주소를 입력하는 것부터 살펴보자. 사이트에 접속을 하려면 해당 사이트의 웹 서버에 연결을 해야 하고,우리가 입력한 주소의 IP 주소를 알아야 웹 서버에 연결을 할 수 있다.IP 주소를 알려면?1. 캐시 확인브라우저나 OS, 네트워크 라우터 또는 ISP의 DNS 캐시를 먼저 확인하여 IP 주소를 확인한다. (있으면 웹 서버 연결)2. DNS 탐색 (캐시에 없는 경우 실행)로컬 DNS와 ISP의 DNS 서버를 순차적으로 확인하며 캐시된 IP 주소가 있는지 한 번 더 확인한다. (있으면 웹 서버 연결)3. 루트 DNS 서버로 요청2번의 두 서버에도 캐시가 없는 경우에 루트 DNS 서버로 요청을 전달한다.루트 DNS에서는 입력된 주소에 따라 TLD 서버에 요청을 보내고,TLD.. 2025. 3. 6. CSR vs. SSR SSR vs. CSR웹 애플리케이션의 렌더링 방식인 클라이언트 측 렌더링(CSR)과 서버 측 렌더링(SSR)에 대해 다음과 같이 정리해보았다.이에 앞서 렌더링이란?컴퓨터 코드를 상호작용 가능한 웹페이지로 바꿔주는 작업,즉, 글로 된 코드를 시각적으로 표현하여 사용자가 볼 수 있는 웹페이지 모습으로 그려주는 작업을 말한다.CSR (Client-Side Rendering)정의: 클라이언트 측에서 JavaScript로 렌더링을 처리하는 방식 서버는 데이터를 전송하고, 클라이언트가 화면을 그린다.장점:상호작용이 많은 페이지에 적합 (SPA처럼 사용 가능)서버 부담이 줄어듦 (클라이언트에서 렌더링 처리)초기 로딩 이후에는 서버에 새로운 페이지 요청을 하지 않고, 이미 받은 파일로 렌더링하므로 페이지 로딩이 빠름단.. 2024. 10. 14. SPA vs. MPA SPA vs. MPA웹 개발에서 자주 비교되는 두 가지 아키텍처인 단일 페이지 애플리케이션(SPA)와 다중 페이지 애플리케이션(MPA)에 대해 다음과 같이 정리해보았다.SPA (Single Page Application)정의: 단일 페이지로 구성된 애플리케이션첫 로드 이후 페이지 전환 시 전체 페이지를 새로고침하지 않고 필요한 부분만 교체주요 흐름초기 로드웹 애플리케이션의 기본 HTML 파일과 필요한 JavaScript, CSS 파일이 서버에서 로드API 호출페이지 내에서 사용자 상호작용이 발생하면,클라이언트 측에서 AJAX 요청이나 Fetch API를 사용하여 서버에 JSON 형식의 데이터를 요청데이터 업데이트서버는 요청에 따라 필요한 데이터를 JSON 형태로 응답이 데이터를 클라이언트가 받아서 페이지.. 2024. 10. 14. Prototype PrototypePrototype이란?Prototype은 사전적으로 원형, 표준을 의미하며,'복제를 위한 기본 틀'이라고 정의할 수 있다,자바스크립트에서는 '상속받을 기본 속성과 메소드'를 제공하는 개념으로 이해할 수 있다.Prototype Chain프로토타입 체인이란?한 객체의 메소드나 속성을 찾을 때, 먼저 해당 객체 내에서 찾고 없으면 그 객체의 프로토타입에서 찾는다.프로토타입에 없으면 또 상위 프로토타입에서 찾는 과정이 계속되며,이를 프로토타입 체인이라고 한다.오버라이딩(Overriding)객체에서 프로토타입의 속성을 재정의할 수 있다.재정의된 속성은 프로토타입 체인을 따라가지 않는다.class Car { constructor(company, model) { this.company = co.. 2024. 9. 23. Library vs. Framework Library vs. Framework개발 공부를 하면서 가장 어려운 것이 이런 용어들이다.라이브러리와 프레임워크.차이에 대한 영상을 분명 여러 번 봤는데도 또 헷갈려서 문서화를 통해 기억에 칵 남기고자 한다.일단 두 단어 자체의 의미로부터 그 특징과 차이를 느낄 수 있다.Library: 특정 기능이나 도구를 제공하는 코드 모음도서관이라는 뜻의 라이브뤄뤼~도서관에 가면 내가 원하는 정보를 찾아 책을 골라서 보는 것처럼개발에 있어 라이브러리란, 두둥!내가 원하는 기능을 가진 도구이며, 필요할 때 꺼내(import)와서 쓸 수 있다.프레임워크보단 작은 단위의 기능 구현에 사용되는 도구라고 볼 수 있다.라이브러리의 예시: React, Axios, Moment.js,...Framework: 애플리케이션의 전체 .. 2024. 9. 12. Drag & Drop Drag and DropHTML의 전역속성 중 하나인 draggable을 이용하여 특정 요소의 드래그 가능 여부를 결정할 수 있다.draggable에 대한 값으로는 true 또는 false를 전달한다. (auto도 가능)CSS에서 설정할 수 있는 -webkit-user-drag의 경우, 크롬과 사파리와 같은 특정 브라우저에서만 작동하지만,HTML에서 설정하는 draggable의 경우, 더 폭넓은 브라우저에서의 사용이 가능하다.다양한 drag and drop 이벤트자바스크립트에서 draggable='true'로 설정된 요소를 불러와,addEventListener()의 첫 번째 인자로 발생하는 이벤트명을 전달하고,두 번째 인자로 해당 이벤트가 밣생했을 때 이벤트를 핸들링하는 함수를 전달한다.drag 되는 요.. 2024. 9. 12. 이전 1 2 다음