전체 글
[JavaScript] 로딩 최적화
프론트엔드 최적화는 로딩 최적화와 렌더링 최적화로 대표될 수 있다. 렌더링 최적화는 이전 글에서 알아봤으니 이번엔 로딩 최적화를 알아보고자 한다. 로딩 최적화는 서비스의 첫인상을 결정한다. 사용자에게 컨텐츠를 더 빨리, 더 쾌적하게 제공할 수 있기 때문이다. 이 글에선 로딩 성능을 나타내는 지표와 로딩 최적화를 하는 방법에 대해 소개하겠다. 로딩 성능을 나타내는 지표 로딩 성능 지표의 측정 기준은 크게 브라우저와 사용자 입장으로 나눌 수 있다. 💻 브라우저 기준의 성능 측정 지표 내비게이션 타이밍 모델 (Navigation Timing Model) 내비게이션 타이밍 모델은 브라우저의 동작 단계별 시간을 측정하는 방식이다. 그림은 브라우저가 렌더링 되는 일련의 과정이다. 프론트엔드의 역할은 마지막의 Pro..
[JavaScript] 렌더링 최적화 (Reflow와 Repaint)
렌더링을 최적화하는 여러 방법 중 하나는 Reflow와 Repaint 과정을 줄이는 것이다. 먼저 Reflow와 Repaint에 대해 알아본 뒤, 다양한 최적화 방법을 소개하겠다. 📐 Reflow html 요소의 크기나 위치가 변하면 그에 영향을 받는 노드들의 크기와 위치를 다시 계산하게 된다. 이렇게 요소의 변화에 따라 Layout 과정을 다시 수행하는 것을 Reflow라고 한다. Reflow가 발생하는 사례 페이지 초기 렌더링 (최초 Layout 과정) 윈도우 리사이징 (Viewport 크기 변경) DOM 노드 추가, 제거 DOM 노드 위치, 크기 변경 폰트 변경, 텍스트 내용 변경 이미지 크기 변경 애니메이션, 트랜지션 Reflow가 발생하는 속성 position width height left t..
[JavaScript] 브라우저 렌더링
렌더링이란 HTML, CSS, JavaScript 등을 브라우저에서 그래픽 형태로 출력하는 과정을 말한다. 렌더링을 알아두면 어떻게 좋은 성능을 낼지, 최적화를 할지를 판단할 수 있다. 이번 글을 통해선 렌더링 방식을 이해하고 최적화에 대해선 따로 자세히 다루겠다. 🔨 렌더링 엔진 대부분의 브라우저는 렌더링을 해주는 렌더링 엔진(Rendering Engine)을 가지고 있다. 다만 모든 브라우저가 같은 렌더링 엔진을 사용하지는 않는다. IE : Trident Edge : EdgeHTML, Blink Chrome : Webkit, Blink(웹킷을 Fork 하여 자체 구현) Safari : Webkit FireFox : Gecko 각각의 렌더링 엔진들은 웹 표준을 따르며 브라우저를 렌더링 한다. 하지만 렌..
[회고] 문제를 찾는 사람 (당근마켓 면접)
싸피 1학기를 마친 후 얼마 뒤 당근마켓 공고가 올라왔습니다. 부랴부랴 포폴을 준비했고 운 좋게 서류를 붙어 1차 면접 기회를 얻었습니다. 결과는 불합격, 아직은 프론트 지식이 부족하다고 느꼈습니다. 면접을 회고하며 어떤 방향으로 발전해야 할지 고민했습니다. 그리고 그 과정에서 느꼈던 점들을 이 글에 정리하고자 합니다. (회고 목적의 글이므로 면접 질문 관련된 내용은 없습니다. 🥺) 문제를 찾는 사람 우리는 살면서 많은 문제를 마주치게 됩니다. 그리고 대부분은 멋지게 답을 찾아내서 해결하죠. 하지만 문제 자체를 찾아본 적은 얼마나 있을까요? 얼마 전 물고기는 존재하지 않는다라는 책을 읽었습니다. 이 책은 "당연하게 여긴 것들을 의심한 적 있는가"라는 메시지를 던집니다. 그리고 이 메시지로부터 이번 회고를..
[JavaScript] this
JavaScript에서 this가 바인딩할 객체는 함수가 선언할 때 정적으로 결정되는 것이 아니다. 함수를 호출할 때 함수의 호출 방식에 따라 바인딩할 객체가 동적으로 결정된다. 1. 함수의 this 기본적으로 this는 전역 객체를 바인딩한다. 전역 객체 (Global Object) 전역 객체는 모든 객체의 유일한 최상위 객체를 의미한다. Browser-side → window 객체 Server-side → global 객체 // browser side this === window // true // server side (node.js) this === global // true 내부 함수 내부 함수는 일반 함수, 메서드, 콜백 함수 어디에서 선언되었든 관계없이 this가 전역 객체를 바인딩한다. f..
[JavaScript] Prototype
1. Prototype (프로토타입) JavaScript는 프로토타입 기반 객체지향 프로그래밍 언어이다. JavaScript의 모든 객체는 상속되는 정보가 담긴 프로토타입(prototype) 객체를 가지고 있다. 이를 통해 모든 객체는 자신의 프로토타입으로부터 프로퍼티와 메소드들을 상속받을 수 있다. 덕분에 JavaScript는 클래스 없이 프로토타입만으로 객체를 생성할 수 있다. (ES6에서 클래스 문법 추가) 2. [[Prototype]] vs prototype 프로퍼티 모든 객체는 자신의 프로토타입을 가리키는 [[Prototype]] 이라는 내부 슬롯(internal slot)을 갖는다. (내부 슬롯은 은닉 속성 정도로 해석되며, 상속을 위해 사용된다.) 함수도 객체이므로 [[Prototype]] ..
[JavaScript] Spread와 Rest의 차이
ES6에서 도입된 Spread와 Rest 문법은 똑같이 생겼다. 다만 쓰이는 상황에 따라서 둘을 구분하기 때문에 확실하게 정리해보고자 한다. 1. Spread (전개 구문) Spread는 배열, 문자열 등의 Iterable 한 요소들을 개별 요소로 분리할 수 있다. 주로 객체나 배열의 연결, 복사 등의 용도로 유용하게 쓰인다. (참고로 객체는 Iterable이 아니지만 ES9부터 Spread 사용이 가능해졌다.) 1) 배열 결합 기존엔 두 배열을 합치는 데에 concat()를 이용했었다. 하지만 ES6에선 Spread 연산자를 이용하여 좀 더 쉬게 배열을 합칠 수 있다. // ES5 - concat() var arr1 = [1, 2, 3]; var arr2 = [4, 5, 6]; var arr = arr..
[회고] 300일간의 일일 커밋
[회고] 6개월간의 일일 커밋 1일 1커밋이 6개월이 되었고 이쯤 되어 회고를 해보고자한다. 왜 시작했어? 별로 좋지 않은 계기에서 시작하였다. 항상 무언가 열심히 했지만, 막상 나를 증명할 무언가는 기록하지 못했다. 졸업 seokzin.tistory.com 일일 커밋이 6개월에 도달했을 때 작은 회고를 썼었다. 이후 정신없이 하루를 보내다 보니 일일 커밋이 300일 차를 넘어가 있었다. 그래서 새롭게 느낀 점들에 대해 정리하고자 한다. 21.08.28 - 일일 커밋 184일 차 22.01.01 - 일일 커밋 311일 차 Git을 다양하게 활용하게 되었다. 일일 커밋 6개월 차엔 PR과 이슈를 어떻게, 왜 써야 하는지 감이 오지 않았다. 수많은 포스팅을 찾아보며 얻은 결론은 직접 써보면서 익숙해지자! 였..
[JavaScript] var, let, const 차이
기존의 문법인 var와 ES6에서 새로 추가된 let, const을 비교하고자 한다. 추가로 호이스팅과 그로 인한 TDZ 현상에 대해서도 알아보겠다. var ES6 이전의 변수 선언 방식이다. 유연한 방식으로 인해 발생하는 문제가 많아 최대한 사용하지 않는 것이 좋다. 1. 함수 레벨 스코프 if문 안의 foo와 if문 밖의 foo는 같은 스코프로 취급하여 동일한 변수가 된다. var foo='hello'; if(true) { var foo = 'hello if'; } console.log(foo); // hello if 2. 중복 선언 가능 같은 변수를 여러 번 선언해도 오류가 나지 않는다. var foo='hello1'; var foo='hello2'; console.log(foo); // hello..