전체 글 검색 결과

해당 글 251건

Reflow, Repaint, Composite

이전 포스팅에서 다루었던 브라우저 렌더링 과정에서 언급되었던 Reflow, Repaint 그리고 Composite에 대해서 알아보려고한다 Composite Composite은 Paint단계 다음에 일어나는 과정으로 Render 트리에 두 개 이상의 Layer가 존재한다면 각각의 Layer를 병렬적으로 Paint한 후 Layer들을 합치는 과정이다 브라우저에 시각적 변화가 일어날 때 유저가 웹에서 상호작용을 하면서 시각적 변화가 일어날 때 브라우저는 조건에 따라 각각 다음과 같은 변화가 일어난다 Reflow 레이아웃의 높이, 너비, 그리고 위치 등에 변화 그리고 DOM이 추가되거나 삭제되면 Reflow가 일어난다 Reflow는 그림에서 보이는 부분을 모두 수행해야하며 다른 모든 노드의 위치를 다시 계산하고..
Frontend 2021. 11. 6. 03:04

브라우저 렌더링 과정

우리가 브라우저에서 주소창에 주소를 검색하면 페이지가 나타나게 된다 어떠한 과정을 거쳐서 이런 일이 일어나는지 한 번 알아보자 1. 주소창에 검색하기 (서버에 요청하기) 기본 페이지를 설정해놓지 않는 이상 브라우저를 띄우기만 해서는 아무런 페이지도 나타나지 않는다 브라우저를 띄우고 주소창에 검색하게 되면 해당하는 서버에 어떠한 요청을 보내게되고 요청을 받은 서버는 우리에게 응답을 돌려준다 이렇게 페이지를 나타내기 위한 html, css, js, 이미지 파일들을 응답으로 받아오게 된다 2. 해석하기 (파싱) 1번에서 받아온 파일 중 기둥이 되는 것이 두 가지가 있는데 바로 html과 css이다 html 파일을 의미있는 단위로 나누고 브라우저가 알아볼 수 있게 노드로 바꿔준 뒤 노드들 끼리의 관계도를 만드는..
Frontend 2021. 11. 5. 02:50

d.ts // its corresponding type declarations.

타입스크립트가 적용된 CRA 프로젝트를 생성해서 사용하지 않는 파일들을 없애던 도중 갑자기 App.tsx에서 다음과 같은 에러가 발생했다 결론부터 말하면 react-app-env.d.ts 파일을 삭제해서 생긴 문제였고 다시 복구해주면 된다 그렇다면 이 파일은 무슨 역할을 하고 있었길래 삭제했을 때 이런 에러를 발생시키는 걸까? d.ts d.ts 파일은 전역에서 사용할 수 타입 유형만 선언할 수 있는 파일이다 이 파일은 출력에서 JavaScript 코드를 생성하지 않는 TypeScript 코드만 포함할 수 있으며 이 때문에 d.ts 파일은 컴파일 이후 js코드로는 생성되지 않는다 또한 이 때문에 타입 유형이 아닌 const나 let 를 파일 내부에 선언하면 에러가 발생되고 함수의 타입은 선언할 수 있지만 ..
JavaScript/TypeScript 2021. 11. 3. 00:45

# vs private in Class

타입스크립트 핸드북을 읽다보면 클래스 파트에서 프라이빗 필드에 대해서 이렇게 설명하는 부분이 있다 이 문단 이후 # 에 대한 언급 없이 private문법에 대해서 소개를 이어나간다 그렇다면 이 둘의 차이점은 무엇일까..? 그것이 궁금해서 한 번 테스트 해보았다 하지만 # 구문에서 에러가 났는데 찾아보니 # 구문은 ECMAScript 2015 이상에서만 사용이 가능하다고 한다 지원 한다면서.. 타입스크립트에서 이 문법을 사용할 수 있는 방법은 두 가지가 있는데 tsconfig.json을 이용해서 프로젝트 전체에 적용해야하는 경우이렇게 해주면 별 문제 없이 js로 빌드되어 브라우저에서 돌릴 수 있다 "compilerOptions": { "target": "ES6" }, 단일 파일을 대상으로 트랜스파일링할 때..
JavaScript/TypeScript 2021. 10. 27. 09:22

Mapped Type

Mapped Type? 맵드 타입이란 기존에 정의되어 있는 타입을 새로운 타입으로 변환해 주는 문법을 의미한다 기존의 자바스크립트에서 배열에 내장되어있는 map과 동일한 일을 해준다고 생각하면 이해하기 쉽다 const arr = [1, 2, 3, 4, 5]; arr.map(v => v * 2); // 2, 4, 6, 8, 10 Mapped Type은 이처럼 기존의 타입을 반환하면서 각각의 속성에 반복적으로 접근해 새로운 타입을 반환한다 이전 시간에 다루었던 유틸리티 타입 중 Partial, Omit, Pick 도 이러한 성질의 문법이다 실제로 타입스크립트 내부 코드를 살펴보면 위의 3가지 유틸리티 타입은 Mapped Type을 이용해서 구현되어 있다 형태는 대부분 아래와 같다 { [p in K]: T }..
JavaScript/TypeScript 2021. 10. 25. 22:51

유틸리티 타입

유틸리티 타입이란 이미 정의해놓은 타입을 재사용할 때 유용한 타입 문법이다 굳이 사용하지 않아도 기존의 인터페이스, 제네릭으로 충분히 타입 변환이 가능하지만 손이 덜 가고 간결하게 변환할 수 있다 Partial Partial 타입은 이미 정의한 타입에서 일정 부분만 만족하는 타입을 새로 정의할 수 있다 왜 필요할까 만약 회원가입시 사용자 정보를 객체에 저장한다고 할 때 이름, 나이, 성별, 주소, 이메일, 유저네임, 비밀번호가 필요하다고 생각했고 따라서 아래처럼 정의했다 interface UserInfo { name: String; age: number; sex: String; address: String; email: String; username: String; password: String; } 이..
JavaScript/TypeScript 2021. 10. 24. 01:57

programmers. 표 편집

문제 코딩테스트 연습 - 표 편집 8 2 ["D 2","C","U 3","C","D 4","C","U 2","Z","Z"] "OOOOXOOO" 8 2 ["D 2","C","U 3","C","D 4","C","U 2","Z","Z","U 1","C"] "OOXOXOOO" programmers.co.kr 풀이 간단한 구현 문제 어떤 방식으로 구현할 것인지는 사람마다 갈리겠지만 나는 처음에 배열로 구현했다 n크기만큼 배열을 생성한 뒤에 ture로 초기화한다 'C' 명령어가 들어와서 삭제된다면 false로 바꾸고 해당 인덱스를 history라는 스택에 넣고 'Z' 명령어가 들어오면 history 스택에서 pop한 뒤 해당 배열의 인덱스를 true로 바꾼다 하지만 이렇게 배열로 구현하면 현재 선택된 행을 다루는 ..
Algorithm/문제 2021. 9. 22. 23:48

Object.defineProperty

Object.defineProperty(객체, 프로퍼티, 설명) 정적 메서드는 객체에 직접 새로운 속성을 정의하거나 이미 존재하는 속성을 수정한 후, 그 객체를 반환한다 MDN에 나와있는 정의. 말이 어려운데 쉽게 설명하자면 객체 내부에 있는 프로퍼티에 설명을 따라서 해당하는 속성을 정의하거나 수정하고 다시 객체를 반환하는 Object의 정적 메서드이다 const obj = {}; Object.defineProperty(obj, 'value', { value:1000, }); // 이 때 반환값은 obj 객체 console.log(obj); // {value: 1000} defineProperty 에서 설명은 보다시피 객체로 서술되며 데이터 서술자와, 접근자 서술자 두 가지 종류로 나뉘게 된다 좀 더 자..
JavaScript 2021. 9. 6. 02:45

클래스, 믹스인 (Mixin)

믹스인이 무엇인지 살펴보기 전에 클래스의 상속에 대해 알아보고 그 과정에서 어떻게 믹스인이 사용되는지 알아보자 클래스 개발 중 오토바이를 나타내는 클래스가 필요해서 만들었다고 가정하자 class MotoCycle { constructor(name) { this.name = name; } // 시동 startEngine(){ ... } // 경적 blowHorn(){ ... } } 이제 MotoCycle로 만들어진 모든 오토바이 인스턴스는 시동과 경적을 울릴 수 있다 const first = new MotoCycle('first'); first.startEngine(); // broom broom first.blowHorn(); // honk! 개발을 계속하던 중 자동차 클래스가 필요해져서 자동차 클래스도..
JavaScript 2021. 7. 13. 11:56