일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- lazy loading
- 안드로이드
- 성능 최적화
- 장고
- virtual dom
- 주니어 개발자
- Router
- 예외처리
- vuetify
- webpack
- frontend
- 세션스토리지
- vue-router
- 로컬스토리지
- NavigationDuplicated
- vue.js
- jest
- Transition
- 세션
- Django
- 프론트엔드
- vue #vue.js #font #web-font
- 라우터
- cubic-bezier
- 자바스크립트 #javascript #렌더링 #렌더링순서
- DOM
- VUE
- css
- 렌더링 최적화
- 뷰
- Today
- Total
목록전체 글 (59)
한준호
웹 페이지에서 URL을 입력하면 어떤 동작이 발생할까? URL 입력 URL의 호스트 이름이 DNS를 통해 IP로 변환 해당 IP 주소를 갖는 서버에 요청 ■ HTTP 브라우저와 서버가 통신하기 위한 프로토콜 HTTP 1 => connection당 하나의 요청과 응답만 처리, 처리 시간은 리소스 개수에 비례 HTTP 2 => connection당 다중 요청과 응답 처리, HTTP 1에 비해 50% 빠름 ■파싱 텍스트 문서의 문자열을 토큰으로 분해하고 파스 트리를 생성하는 것 파스 트리를 바이트 코드로 변환하여 실행한다. ■ 렌더링 HTML, CSS, js로 작성된 문서를 브라우저에 그리는 것 - 렌더링 순서 브라우저는 HTML, CSS, js, 이미지, 폰트 등 필요한 리소스를 요청하고 서버로부터 응답을 ..
spa의 가장 큰 단점은 웹에 진입할 때 번들링한 리소스를 한번에 받는 것이다. 따라서 초기 진입 속도가 느릴 수 밖에 없다. 이를 개선하기 위해 웹팩의 코드 스플리팅을 통한 chunck를 활용하여 초기 화면에 접근할 때 필요 없는 리소스를 제외하고 필요한 경우 그때 그때 받아오는 원리가 lazy loading 이다. 1. chunck 를 하기 위한 컴포넌트와 라우트를 설정한다. 2. dynamic import로 선언한다. 예를 들어 Layout 컴포넌트의 자식 컴포넌트들로 MainPage, Login 두 컴포넌트를 라우팅하려고 한다. 사실 Layout은 공통 부모 컴포넌트이기 때문에 chunck로 분리하는 의미는 없지만 예시를 위해 함. const Layout = () => import(/* webpa..
■ 배열 고차 함수 ● 고차함수 - 함수를 인수로 전달받거나 함수를 반환하는 함수. - 조건문과 반복문을 제거하고 변수의 사용을 억제하는 불변성 지향의 함수형 패러다임 ◎ Array.prototype.sort - 오름차순 정렬 - 일시적으로 요소를 문자열로 변환 후 유니코드 코드 포인트의 순서로 정렬하기 때문에 숫자를 정렬할 때는 정렬 순서를 정의하는 비교 함수를 인수로 전달해야 한다. - 기존에는 quicksort 알고리즘 기반이었지만 동일한 값의 요소가 중복되어 있을 때 초기 순서와 변경될 수 있는 불안정한 정렬 알고리즘이기 때문에 ES10 에서는 timesort 알고리즘을 사용하도록 바뀌었다. const points = [40, 100, 1, 5, 2, 25, 10]; // 숫자 배열의 오름차순 정..
const arr = [1, 2, 3, 4, 5]; // 인수로 전달받은 값 0을 배열의 인덱스 1부터 3 이전(인덱스 3 미포함)까지 요소로 채운다. arr.fill(0, 1, 3); // fill 메서드는 원본 배열을 직접 변경한다. console.log(arr); // [1, 0, 0, 4, 5] const arr = [1, 2]; // 원본 배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환한다. let result = arr.shift(); console.log(result); // 1 // shift 메서드는 원본 배열을 직접 변경한다. console.log(arr); // [2] 자바스크립트의 배열은 자료구조의 배열과 다른, -배열의 동작을 흉내낸 해시 테이블로 구현된 객체다. - 자바스..
vue router를 사용하다보면 NavigationDuplicated와 같은 에러를 핸들링 하기 위해 이와 같이 push 뒤에 catch문을 넣는 경우가 있다. * NavigationDuplicated 에러는 현재 보고있는 페이지와 같은 주소로 라우팅 처리를 할때 발생하는 에러이다. 하지만 매 컴포넌트마다 같은 예외처리 코드를 넣어주는 것은 코드 중복이 발생하므로 이를 피하기 위해 전역 라우터 함수에 예외처리를 넣어줄 수 있다. 우선 router를 초기화 하는 js파일을 들어간다. 이제 상단에 아래 코드를 삽입해준다. Vue.use(Router); const originalPush = Router.prototype.push;// 1 Router.prototype.push = function push(l..
ES6 함수의 구분 constructor prototype super arguments 일반 함수 O O X O 메서드 X X O O 화살표 함수 X X X X ■ 메서드 ES6에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다. const obj = { x: 1, // foo는 메서드이다. foo() { return this.x; }, // bar에 바인딩된 함수는 메서드가 아닌 일반 함수이다. bar: function() { return this.x; } }; console.log(obj.foo()); // 1 console.log(obj.bar()); // 1 - ES6에서 메서드는 인스턴스를 생성할 수 없는 non-constructor다. 따라서 생성자 함수로 호출할 수 없다. - 인스턴..
■ 프로퍼티 - constructor 내부에서 정의한다. ◎ 접근자 프로퍼티 - getter / setter를 의미. 자체적인 값 [[Value]]를 갖지 않음 const person = { // 데이터 프로퍼티 firstName: 'Ungmo', lastName: 'Lee', // fullName은 접근자 함수로 구성된 접근자 프로퍼티다. // getter 함수 get fullName() { return `${this.firstName} ${this.lastName}`; }, // setter 함수 set fullName(name) { // 배열 디스트럭처링 할당: "36.1. 배열 디스트럭처링 할당" 참고 [this.firstName, this.lastName] = name.split(' '); } ..
프로토타입 기반 객체지향 언어는 클래스가 필요없는 객체지향 언어이므로 자바스크립트의 클래스는 문법적 설탕이라고 보이기도 한다. ■ 클래스 정의 일반적으로 클래스는 // 클래스 선언문 class Person {} 와 같이 선언한다. // 익명 클래스 표현식 const Person = class {}; // 기명 클래스 표현식 const Person = class MyClass {}; - 클래스도 함수이다. - 클래스는 이름을 갖지 않을 수도 있다. - 클래스는 표현식으로 정의할 수 있다. - 표현식으로 정의 가능하므로 일급 객체이다. 무명의 리터럴로 생성. 즉, 런타임에 생성이 가능하다. 변수나 자료구조에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환값으로 사용할 수 있다. ■ 클래스 ..
클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 클로져는 이너함수가 스코프 밖에 있는 변수에 접근하는 것으로 보통 정보은닉을 구현하거나 함수 팩토리를 생성할 때 사용된다. ◎ 렉시컬 스코프 - 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디서 정의했는지에 따라 상위 스코프를 결정한다. - 함수는 정의된 위치와 호출되는 위지가 다를 수 있다. 상위 스코프를 기억하기 위해 함수는 자신의 내부 슬롯 [[Environment]]에 상위 스코프의 참조를 저장한다. 함수 코드가 평가될 때 다음과 같은 순서를 가진다고 했다. 1. 함수 실행 컨텍스트 생성 2. 함수 렉시컬 환경 생성 2.1 함수 환경 레코드 생성 2.2 this 바인딩 2.3 외부 렉시컬 환경에 대한 참조 결정 이때 렉..
var x = 1; const y = 2; function foo (a) { var x = 3; const y = 4; function bar (b) { const z = 5; console.log(a + b + x + y + z); } bar(10); // ← 호출 직전 } foo(20); - 위 코드의 실행 컨텍스트에 대한 진행 과정을 정리한 그림이다. ■ 전역 객체 생성 - 전역 객체는 전역 코드가 평가되기 이전에 생성된다. - 전역 객체도 Object.prototype을 상속받는다. ■ 전역 코드 평가 - 소스코드가 로드되면 자바스크립트 엔진은 전역 코드를 평가하고 다음과 같은 순서를 가진다. 전역 실행 컨텍스트 생성 전역 렉시컬 환경 생성 전역 환경 레코드 생성 객체 환경 레코드 생성 선언적 환..