본문 바로가기

Front-end66

브라우저 렌더링 과정 && 각종 용어 정리 📌 브라우저 렌더링? 1. [Parsing] HTML 파일과 CSS 파일을 파싱해서 각각 Tree 를 만듦. 2. [Style] 두 Tree 를 결합해서 화면에 표현되는 Node 를 기준으로 Rendering Tree 를 만듦. 3. [Layout/Reflow] Rendering Tree 에서 각 Node 의 정확한 위치와 크기를 계산. = 레이아웃을 계산. 4. [Paint/Repaint] 계산된 값을 이용해 각 Node 를 화면 상의 실제 pixel 로 변환하고 여러 개의 Layer로 생성. 5. [Composite] Layer 들을 합성하여 실제 화면에 나타냄. 대부분의 프로그래밍 언어는 운영 체제operating system이나 가상 머신virtual machine 위에서 실행된다. 그러나 웹 애.. 2021. 8. 22.
자바스크립트 배열 메서드 Array Method (계속 추가중) ◾ Array.isArray ( immutable ) // true Array.isArray([]); Array.isArray([1, 2]); Array.isArray(new Array()); 전달된 인수가 배열이면 true, 배열이 아니면 false를 반환한다. 배열과 객체를 구분할 때 typeof 대신 Array.isArray를 사용한다. ◾ Array.prototype.indexOf ( immutable ) const arr = [1, 2, 2, 3]; // 배열 arr에서 첫 번째로 검색된 요소 2의 인덱스를 반환한다. arr.indexOf(2); // 1 // 배열 arr에 요소 4가 없으므로 -1을 반환한다. arr.indexOf(4); // -1 // 두 번째 인수는 검색을 시작할 인덱스다... 2021. 8. 21.
React 시작 📌 React? React는 UI 기능만 제공한다. 따라서, 전역 상태 관리, 라우팅, 빌드 시스템 등을 개발자가 직접 구축해야한다. --> 직접 만져보면서 이 특징을 여실히 느꼈다. 같은 기능을 구현하더라도수십 수백가지의 방법이 있더라. 그래서 React를 UI 라이브러리 혹은 라이브러리라고 부른다고 한다. 빌드 시스템이나 라우팅 등을 직접 구축하는 것은 진입장벽을 높히기 때문에 이를 허물고자 React측에서 CRA를 만들었다. (프레임워크는 이를 모두 구축해서 제공한다 ㅎㅎ) 📌 입문 필수 지식 ✔ 프레임워크(Frame-work) 와 라이브러리(Library) 차이 ✔ React CRA ? 보일러 플레이트 ? ✔ (그동안 몰랐던) Babel의 역할 ✔ 자바스크립트 모듈 간 import와 export를.. 2021. 8. 19.
React를 쓰다보니 Redux가 궁금해졌다 📌 Redux를 찾게된 이유? React로 간단한 웹 페이지를 만들고 있었다. 댓글을 입력했을 때 기존 댓글에 내 댓글이 추가되는 기능을 구현하고 싶었다. useState를 사용해서 데이터를 받아와 컴포넌트안에서 조작해주면 내가 원하는 그림을 얻을 수 있었다. 그런데 문제는 형제 컴포넌트였다. 댓글창 외에도 내 개인정보가 담긴 창에 왔을 때 내가 쓴 댓글들이 촤라락 보이게끔 만들고 싶었다. 그럴려면 댓글창에서 업데이트 된 그 정보가 개인정보 창에도 필요할 것 같았다. 즉, 다른 컴포넌트 안에 있는 정보를 이 컴포넌트가져와야 하는데... 필요한 코드를 그대로 복붙하는 것 말고는 방법이 생각이 안났다. State와 Props를 몰랐을 시절 ㅋㅋㅋㅋㅋ 이 방법이 너무 싫어서 구글링해보다가 global stat.. 2021. 8. 18.
자바스크립트 배열 고차함수 reduce 📍 Array.prototype.reduce ( immutable ) reduce 메서드는 자신을 호출한 배열을 모든 요소를 순회하며 인수로 전달받은 콜백함수를 반복 호출한다. 그리고 콜백 함수의 반환값을 다음 순회 시에 콜백 함수의 첫번째 인수로 전달하면서 콜백 함수를 호출하여, 하나의 결과값을 만들어 반환한다. // 1부터 4까지 누적을 구한다. // 숫자끼리 값을 더할 때는 초기값을 0으로 설정하지 않아도 값이 나오지만 // 그래도! 그래도! 초기값을 넣어주는 게 좋다. const sum = [1, 2, 3, 4].reduce( // 콜백 함수 (accumulator, currentvalue, index, array) => { accumulator + currentvalue }, // 초기값 0);.. 2021. 8. 15.
자바스크립트 문서 객체 모델 DOM (Document Object Model) Achivement Goals ✅ DOM의 개념을 이해할 수 있다. ✅ DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 알 수 있다. ✅ HTML에서 Javascript 파일을 불러올 때 주의점에 대해서 이해할 수 있다. 📌 웹 페이지는 어떻게 만들어지는가? 웹 브라우저는 원본 HTML문서를 읽고, Style을 입히고, 대화형 페이지로 만들고, 뷰포트에 표시하는 등 해석 과정을 거친다. 이렇게 해석하는 과정을 "Critical Rendering Path"라고 한다. 🏁 Critical Rendering Path Critical Rendering Path 01 Constructing the DOM Tree 02 Constructing the CSSOM Tree 03 Running JavaS.. 2021. 8. 14.
자바스크립트 배열 Array 📌 자바스크립트의 배열은 배열이 아니다? 자료 구조data structure에서 말하는 "배열" === 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료 구조. 즉, "배열"의 요소는 하나의 데이터 타입으로 통일되어 있으며, 서로 연속적으로 인접해 있다. ( 밀집 배열dense array ) 하나의 데이터 타입으로 통일되어있다는 얘기는 각 요소가 동일한 데이터 크기를 가진다는 뜻과 일맥상통하다. 일반적인 배열 장단점 장점: 인덱스로 요소에 빠르게 접근할 수 있다. 단점: 특정 요소를 검색/삽입/삭제하는 경우에는 비효율적이다. 즉, 자바스크립트의 배열은 연속적으로 이어져 있지 않을 수 있다. ex. 희소 배열 즉, 자바스크립트의 배열은 요소를 위한 각각의 메모리 공간이 동일한 크기를 갖지 않아도.. 2021. 8. 13.
자바스크립트 원시 타입 & 객체 타입 Primitive type & Reference type 📌 원시 타입? 객체 타입? 자바스크립트가 제공하는 7가지 데이터 타입들을 크게 원시 타입primitive type과 객체 타입object/reference type으로 구분할 수 있다. 📌 원시 타입과 객체 타입 특징 💡 원시 타입 primitive type 특징 01 원시 값은 "변경 불가능"한 값이다. --> immutable value --> 데이터의 신뢰성을 보장한다. 02 원시 값을 변수에 할당하면, 변수 (확보된 메모리 공간) 에는 실제 값이 저장된다. 원시 값이 변하지 않는 건 사실이지만, 변수에 저장된 원시 값은 재할당을 통해 새로운 값을 줄 수 있다. 그러나 이 경우도 원래 변수에 할당된 원시 값을 새로운 값으로 교체하는 것이 아니라, 변수가 참조하던 메모리 공간의 주소를 변경해 새롭게.. 2021. 8. 12.
HTML 태그별 display 속성 📌 Inline ◾ : inline ◾ : inline ◾ : inline ◾ : inline 📌 Block ◾ : block ◾ : block ◾ : block ◾ ~ : block ◾ : block ◾ : block ◾ : block ◾ : block 2021. 8. 11.

티스토리툴바