Gapus Dev Blog

객체 지향 프로그래밍(OOP) 설명 프로그램을 객체들의 집합으로 구성하는 방식 객체들은 데이터와 그 데이터를 처리하는 메서드를 포함 객체 간에 상호작용을 통해 프로그램이 동작 주요 특징 클래스와 객체 클래스는 객체를 만들기 위한 템플릿 객체는 클래스로부터 생성된 실체 클래스는 객체의 속성(데이터)과 동작(메서드)을 정의하고, 객체는 이러한 속성과 동작을 가진다. 클래스는 설계도 역활, 객체는 설계도를 기반으로 생성된 실체 예시 class Person { constructor(name, age) { this.name = name; this.age = age; } sayHello() { console.log(`안녕하세요, 저는 ${this.name}이고 ${this.age}살입니다.`); } } let pe..

크로스 브라우징 설명 다양한 웹 브라우저에서 웹 사이트와 웹 애플리케이션이 동일하게 작동하는 것을 의미 다른 브라우저에서도 일관된 사용자 경험을 제공하기 위해 필수적 여러 가지 웹 브라우저가 존재하며, 각각 다른 렌더링 엔진과 HTML, CSS JS를 해석하는 방식을 가지고 있어서 동일한 웹 페이지가 다른 브라우저에서는 다르게 보일 수 있다. 접근 방법 표준 준수 웹 표준에 따라 개발하는 것이 중요 HTML, CSS, JS의 최신 버전과 권장 사항을 준수하는 것이 좋음. 브라우저 테스트 다양한 브라우저와 버전에서 웹 사이트를 테스트 주유 브라우저(Chrome, Firefox, safari, Edge 등) 뿐만 아니라 오래된 버전의 브라우저도 테스트 각 브라우저에서의 호환성 문제를 발견 및 수정 가능 폴리..

쿠키 쿠키는 작은 텍스트 파일로서 웹 사이트에서 사용자의 컴퓨터에 저장 주로 사용자의 로그인 정보나 웹 사이트의 선호 설정과 같은 개인화된 데이터를 저장하는 데 사용 쿠키는 만료 기간이 설정되어 있으며, 만료일까지 유지 서버에 요청할 때마다 쿠키는 자동으로 서버로 전송되며, 웹 사이트의 기능을 지원하기 위해 사용 로컬 스토리지 로컬 스토리지는 HTML5에서 도입된 저장소 로컬 스토리지는 웹 브라우저에 데이터를 영구적으로 저장 주로 사용자의 작업 상태, 설정, 캐시 데이터 등을 저장하는 데 사용 로컬 스토리지에 저장된 데이터는 수동으로 삭제하지 않는 이상 계속해서 유지 세션 스토리지 세션 스토리지는 로컬 스토리지와 비슷하지만, 데이터의 수명이 세션에 한정 세션은 웹 브라우저가 열려 있는 동안 유지되는 사용..

사용자가 naver.com을 입력하면 URL 주소 중 도메인 네임을 DNS에서 검색 도메인 네임에 해당되는 IP주소를 URL 정보와 함께 전달 URL 정보와 IP 주소는 HTTP 프로토콜을 사용하여 HTTP 요청 메시지를 생성 HTTP 요청메시지는 TCP 프로토콜을 사용하여 인터넷을 거쳐 해당 IP 주소 컴퓨터로 전송 도착한 메시지는 HTTP 프로토콜을 사용해 웹 페이지 URL 정보로 변환되어 해당되는 데이터 검색 검색된 웹 페이지 데이터는 HTTP 프로토콜을 사용해 HTTP 응답 메시지를 생성 TCP 프로토콜을 사용해 인터넷을 통해 본인 컴퓨터로 전송 응답 메시지는 HTTP 프로토콜을 사용해 웹 페이지 데이터로 변환되어 웹 페이지에 의해 출력 참고 출처 https://github.com/WooVicto..

브라우저 렌더링 원리 브라우저 렌더링의 과정은 HTML, CSS, JavaScript 등을 브라우저 화면에 그리는 과정 렌더링 엔진에서 HTML문서를 파싱하여 태그들을 노드로 변환시켜 계층구조를 형성 DOM(Document Object Model)을 만든다. 파싱 중 태그를 만나면 렌더링 엔진은 정지 자바스크립트 엔진이 처리를 하고 정지된 시점에서 다시 렌더링 엔진 실행 CSS을 파싱하여 스타일시트 객체를 노드화 시켜 CSSOM(Css Object Model)을 만든다. DOM과 CSSOM을 결합시켜 실제 배치될 요소만 렌더 트리를 형성한다. 렌더 트리에 위치를 알려줄 위치와 크기를 알려줘서 레이아웃 구성을 한다. 렌더 트리를 그린다. 참고링크 https://bbangson.tistory.com/87 h..