개발14 [브라우저 렌더링] 초 간단 요약 1. HTML 파싱 (Parsing)HTML 다운로드: 서버에서 HTML 파일을 다운로드합니다.DOM 생성: 브라우저는 HTML을 파싱하여 **Document Object Model (DOM)**을 생성합니다. DOM은 HTML 문서의 구조를 트리 형태로 표현합니다.2. CSS 파싱CSS 다운로드: 브라우저는 HTML 문서에서 참조된 CSS 파일을 다운로드합니다.CSSOM 생성: 브라우저는 CSS를 파싱하여 **CSS Object Model (CSSOM)**을 생성합니다. CSSOM은 스타일 규칙을 트리 형태로 표현합니다.3. Render Tree 생성스타일 적용: 브라우저는 DOM과 CSSOM을 결합하여 Render Tree를 생성합니다. Render Tree는 화면에 표시할 요소와 그 스타일을 포함합.. 2024. 8. 28. [this] 5년만에 다시보는 자바스크립트의 this 개요많은 시간이 지나고 나는 this가 지칠하는게 뭔지 잘 알고있는가에 대해서 물어봤을때 잘 모르는게 맞다! 라는 판단이 들었다.그 이유는 면접에서 털렸기때문이다 예제를 보다 구체적으로 알아보면서 컨텍스트에 따라서 this가 어떤 객체를 가리키는가에 대해서 한번 더 알아보고자 한다. 1. 글로벌 컨텍스트 글로벌 컨텍스트에서 this는 전역 객체를 가리킵니다.브라우저 환경에서는 window 객체를, Node.js 환경에서는 global 객체를 참조합니다. // 글로벌 컨텍스트console.log(this); // 브라우저에서는 'window' 객체, Node.js에서는 'global' 객체const person = { name: 'Alice', greet: function() { console.l.. 2024. 8. 28. HTML 텍스트 스타일링 태그 HTML에서는 텍스트의 스타일과 의미를 명확하게 전달하기 위해 다양한 태그를 제공합니다.웹 페이지를 구성할 때 텍스트의 가독성과 표현력을 높이는 텍스트 스타일링을 할 때 주로 사용하는 HTML 태그들을 알아보겠습니다. 1. strong 태그: 강한 강조strong 태그는 텍스트를 강하게 강조할 때 사용됩니다. 이 태그로 감싸진 텍스트는 대부분의 브라우저에서 굵게 표시되지만, 시맨틱적으로 중요한 내용을 강조한다는 의미를 가집니다. 예를 들어, 경고 메시지나 중요한 사실을 표현할 때 사용합니다.이 제품은 절대 먹어서는 안 됩니다.이 태그는 아래와 같이 표현됩니다. 더 굵게 보이는 텍스트를 보세요이 제품은 절대 먹어서는 안 됩니다." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 이.. 2024. 8. 21. ty vs got: 어떤 라이브러리를 선택할까? 자바스크립트에서 ty 라이브러리와 got 라이브러리는 모두 HTTP 요청을 처리하는 데 사용될 수 있는 도구들입니다. 하지만 이 두 라이브러리는 목적과 기능 면에서 차이가 있습니다. 이번 블로그 글에서는 ty와 got의 주요 기능, 사용 사례, 장단점을 비교하여 어떤 상황에서 어떤 라이브러리를 사용하는 것이 좋을지에 대해 알아보겠습니다.1. ty 라이브러리란?개요ty는 주로 API와의 상호작용을 위한 라이브러리로, 특히 TypeScript 개발자들을 위한 라이브러리입니다. ty는 TypeScript의 타입 시스템을 최대한 활용하여 안전한 API 호출을 가능하게 합니다. API와의 통신 과정에서 타입 안전성을 유지하며, 자동으로 타입을 추론해주는 기능이 특징입니다. 주요 기능타입 안전성: API 요청과 응.. 2024. 8. 12. ReactJS와 타입스크립트를 함께 사용하는 이유 소개 ReactJS와 TypeScript는 현대적인 프론트엔드 개발에서 매우 인기 있는 기술입니다. ReactJS는 사용자 인터페이스를 구축하기 위한 강력한 라이브러리이고, TypeScript는 자바스크립트에 정적 타입을 추가하여 개발자의 생산성을 향상시키고 버그를 줄이는 데 도움을 줍니다. 이 블로그 포스트에서는 ReactJS와 TypeScript를 함께 사용하는 이유에 대해 자세히 알아보겠습니다. 1. 정적 타이핑 ReactJS와 TypeScript를 함께 사용하면 정적 타입 검사를 통해 코드의 안정성을 높일 수 있습니다. TypeScript는 변수, 함수, 컴포넌트 등에 타입을 명시하여 개발자가 의도한 대로 코드가 작동하는지 사전에 확인할 수 있습니다. 이는 개발자가 실수로 발생할 수 있는 버그를 .. 2023. 6. 28. 자바스크립트 알고리즘 테스트를 통해 어떤 능력을 향상시킬 수 있나요? Introduction 자바스크립트 알고리즘 테스트는 개발자들이 자바스크립트 프로그래밍 능력을 향상시키는 데 도움이 되는 강력한 도구입니다. 알고리즘 테스트를 통해 문제 해결 능력, 코드 최적화, 자료 구조 및 알고리즘 이해 등 다양한 능력을 향상시킬 수 있습니다. 이 글에서는 자바스크립트 알고리즘 테스트를 통해 개발자들이 어떤 능력을 향상시킬 수 있는지에 대해 자세히 알아보겠습니다. 1. 문제 해결 능력 자바스크립트 알고리즘 테스트는 문제 해결 능력을 향상시키는 데 큰 도움이 됩니다. 알고리즘 문제를 해결하기 위해서는 문제를 이해하고, 적절한 알고리즘을 선택하고, 코드를 작성해야 합니다. 이러한 과정을 반복하면서 문제 해결 능력을 향상시킬 수 있습니다. 2. 코드 최적화 자바스크립트 알고리즘 테스트는 .. 2023. 6. 28. 패럴렉스 스크롤링이 웹 성능에 미치는 영향: 모바일 사용자 경험 소개 패럴렉스 스크롤링은 웹 디자인에서 많이 사용되는 기술 중 하나입니다. 이 기술은 사용자가 웹 페이지를 스크롤할 때 배경과 전경이 다른 속도로 움직이는 효과를 제공하여 시각적인 흥미를 끌기 위해 사용됩니다. 하지만 패럴렉스 스크롤링은 웹 성능에 영향을 미칠 수 있으며, 특히 모바일 사용자 경험에 미치는 영향은 더욱 중요합니다. 본문 1. 패럴렉스 스크롤링의 작동 원리 패럴렉스 스크롤링은 웹 페이지의 요소들이 다른 속도로 움직이는 효과를 제공하기 위해 CSS와 JavaScript를 사용합니다. 일반적으로 배경 이미지는 느리게 움직이고, 전경 요소는 빠르게 움직이도록 설정됩니다. 이를 통해 사용자는 스크롤을 할 때마다 시각적인 변화를 경험할 수 있습니다. 2. 패럴렉스 스크롤링의 웹 성능에 미치는 영향 .. 2023. 6. 22. Git Submodule - Permission Denied 문제 해결방법 Git 서브모듈을 사용할 때, 개인 저장소로부터 서브모듈을 복제하는 과정에서 허가 거부 오류가 발생하는 경우가 있습니다. SSH 키를 업데이트하고 Git에서 서브모듈을 복제할 때 "Permission Denied" 문제를 해결하는 단계를 살펴보겠습니다. Step 1: SSH 키 파일 열기 첫 번째 단계는 SSH 키 파일을 편집하기 위해 터미널에서 다음 명령을 실행하는 것입니다: vim ~/.ssh/rsa_id.pub Step 2: SSH 키 복사하기 열린 파일에서 SSH 키를 찾을 수 있습니다. 키 전체를 클립보드에 복사합니다. 추가 문자나 공백을 포함하지 않도록 주의합니다. Step 3: GitHub 설정에 접근하기 이제 GitHub 계정의 설정으로 이동합니다. 프로필 사진을 클릭한 다음 드롭다운 메뉴.. 2023. 6. 22. this this : 메서드 내부에서 객체에 접근할 수 있는 지시자? 예약어? let company = { name: "nhn", where: "pangyo", companyName() { alert(this.name); // this 는 현재 메소드의 객체인 company를 나타낸다. } }; company.companyName(); 동일한 코드는 다음과 같이 작성할 수 있다. let company = { name: "nhn", where: "pangyo", companyName() { alert(company.name); return company.name; // this. 대신 user 사용 } }; company.companyName(); 다만 후자의 경우, 원하지 않는 형태의 동작을 할 수도 있다. 예를.. 2020. 12. 31. 이전 1 2 다음 반응형
