Life is connecting the dots .

성능최적화 방법을 공부하면서 렌더링에 대해 다시 공부해 보았다. 브라우저가 그려지는 과정과 DOM에 대한 개념, Reflow를 조금이라도 개선시킬 수 있는 방법을 정리해 보고자 한다. 글 내용과 관련된 개념은 아래 참고에 적혀있는 블로그와 책, 강의 등을 참고하여 작성하였다. Critical Rendering Path 브라우저가 서버로부터 HTML 응답을 받고 화면에 그려지기까지의 시퀀스를 "Critical Rendering Path" 라고 한다. CRP에는 6단계가 있다. DOM 트리 생성CSSOM 트리 생성자바스크립트 실행렌더트리로 결합레이아웃 그리기페인팅1. DOM(Document Object Model)트리 생성 브라우저 요청에 의해 서버에서 HTML파일을 받아오면 다음과 같은 과정으로 브라우저가..

프로젝트를 리팩토링 하면서 타입스크립트로 객체의 키를 사용하여 객체에 접근할 때 에러가 난 다는 사실을 발견했다. 물론 이 에러는 자바스크립트에서 나타나는 에러가 아니다. 해당 코드로 자바스크립트에서는 객체의 프로퍼티에 접근하는 데에 아무런 문제가 없다. 오류를 해결하기 위해 타입스크립트에서 새롭게 알게 된 부분이 있어서 정리해 보려 한다. 문제 상황 접근하려고 하는 객체에는 interface를 사용하여 각 프로퍼티에 들어올 값의 타입을 지정해 준 상태이고, for...in 문을 사용하여 각각의 프로퍼티에 접근을 시도하려는 중이었을 때, inputs [key]에 다음과 같은 에러문구가 발생했다. // 에러가 발생한 코드 for (let key in inputs) { if (inputs[key] === "..

1. container and presenter patton 이란 - React 디자인 패턴 중의 하나로 하나의 페이지 컴포넌트를 기능과 UI구현의 컴포넌트로 나눠 작성하는 것이다. - export와 import로 부모 컴포넌트와 자식 컴포넌트를 연결하며 최종 부모 컴포넌트는 _app.js의 App이다. presenter component (= presentational component) - JSX 가 담겨있는 컴포넌트로 UI 부분을 구현한다. - container component가 전달하는 prop를 사용한다. container component - 자바스크립트 로직이 담겨있는 컴포넌트로 기능 부분을 구현한다. - 마크업이나 스타일을 사용하지 않는다. import와 export 기능별로 컴포넌트를 ..

1. 문제 정의 - FrontMento 과제를 하는 중, class 마다 폰트의 색상을 변경해야 했다. - 처음에는 class 마다 color를 지정해 주고 주석으로 컬러명을 표기했었는데, 나중에는 컬러값과 색상을 매치하는 것이 헷갈리게 되었고, : root 에 속성을 정의하여 HTML 문서 전체에 적용할 수 있는 방법을 찾게 되었다. 2. 사용자 지정 속성(custom properties)이란 1) 정의와 특징 - custom properties는 특정한 값을 포함하여 사용자에 의해 정의되는 엔티티이다. - 코드의 재사용성을 높혀주고, 유지보수에 용이하다. - 특정 값(px, rgba, hsl)을 적용하는 것보다 의미를 이해할 수 있게 해 준다. (--main-bg-color: white;) - 미디어..

1. 객체란 - 객체는 연관된 데이터, 연관된 함수의 모음이다. - 객체는 여러 변수와 여러 함수로 구성되며, 이들은 객체 내부에 있을 때 속성(property)과 메소드(method)라고 부른다. - 객체는 순서가 없는 대신 이름으로 값을 저장한다. 2. 객체 생성하고, 추가하고, 가져오고, 삭제하는 방법 - 생성 var ObjectName = { } ; // 객체 생성 var fruits = { "banana":"yellow", "apple":"red" }; - 추가 및 수정 // 점 표기법(dot notation) fruits.kiwi = "green"; // 괄호 표기법(Bracket notation) fruits["blue berry"] = "purple"; - 접근(읽기) // 점 표기법(do..

1. 함수를 사용하는 이유 - 한번 함수를 구현해 놓으면 함수만 수정해주면 되므로 유지보수에 용이하다. - 반복되는 코드를 함수로 만들어 놓으면 코드가 간결해진다. - 함수의 이름을 잘 정의해 놓으면 어떤 동작을 하는지 대략적으로 알 수 있게 해주며, 같은 함수를 써놓은 코드는 논리적으로 코드가 같다는 것을 알 수 있게 해준다. 2. 함수 선언(Function declarations) - 함수 선언은 지정된 매개 변수(parameter)를 사용하여 함수를 정의한다. - 자바스크립트에서의 함수 선언은 그 선언을 둘러싼 함수의 최상부나 전역 범위(global scope)으로 할당된다(hoisted). 즉, 함수 선언 전에 함수를 사용할 수 있다. (*함수 표현식은 먼저 선언해야 하는 차이가 있다.) // S..

1. 제어문이란 - 제어(Control flow)란 컴퓨터가 스크립트에서 명령을 실행하는 순서입니다. - 조건부나 루프와 같이 순차적인 흐름을 변경해야할 때 사용하는 실행문을 제어문이라고 한다. 2. 조건문(Conditional statements) - 조건에 따라 명령을 수행하도록 하는 제어문이다. - 단순 반복적인 코드를 더 효율적으로 만들어 주고, 복잡한 조건을 간결하게 만들어 주며, 목적에 맞는 기능을 구현해 준다. - 조건이 '참'이다라고 여겨지는 것 : false, undefined, null, 0, NaN, ""(empty string)이 아닌 모든 값 그리고 블리언 객체값이 false를 포함하는 객체. 2_1. if / if else / if else if ... else // Syntax..

1. 자바스크립트란 - 사용자와 동적으로 상호작용 하기 위해 만들어진 언어이다. - 즉, HTML의 정적인 정보를 Javascript가 동적인 정보로 바꿔준다. - HTML과 자바스크립트는 둘다 '언어'이지만 HTML은 한번 만들면 변하지 않는 마크업 언어이고, 자바스크립트는 명령어(코드)를 시간순서에 따라 배치하고 실행시켜 기능을 구현하게 하는 '프로그래밍언어'인 점에서 차이가 있다. 2. 자바스크립트 작동을 위한 - script 태그 - 자바스크립트 코드는 HTML에서 작동한다. - HTML 태그 중 태그 안에 자바스크립트 코드를 작성한다. - 화면에 보여지는 그대로 출력 땐 HTML코드를 사용하지만, 데이터를 입력받아 스스로 계산하는 등 interactive한 결과를 얻고싶을 땐 자바스크립트를 사용..