yceffort

What every front-end developer should know about change detection in Angular and React를 번역/요약한 것입니다. Change Detection 은 무엇인가? Rating Widget 초기화 Change Detection 프레임워크 Angular React Change Detection구현 Angular React 언제 Change Detection이 실행되는가? React Angular 요즘 거의 대부분의 웹 어플리케이션에서 Change Detection을 찾을 수 있다. 이는 인기있는 웹 프레임워크의 필수적인 부분이다. Data Grids나 stateful jquery 플러그인 등도 충분히 발전된 Change Detection를 가지고 있다. 그리고 아마도 대부분의 어플리케이션 코드 베이스에는 Change Detection…

이 글이 한글로 번역이 안되있어서 대충 번역해봅니다. Higher-Order Components 고차 컴포넌트 (이하 HOC)는 리액트에서 컴포넌트 로직을 재사용하기 위한 고오급 기술이다. HOC는 리액트 API의 일부분은 아니다. 이는 리액트의 컴포넌트 환경에서 자주 나타나는 일종의 패턴이다. 구체적으로, HOC는 컴포넌트를 받아 새로운 컴포넌트를 반환하는 함수다 컴포넌트의 props가 ui를 바꾼다면, HOC는 컴포넌트를 다른 컴포넌트로 바꿔버린다. 이러한 HOC는 리액트 써드 파티 라이브러리에서 자주사용되는 패턴으로, Redux의 와 의 에서 볼 수 있다. 이 문서에서는 왜 HOC패턴이 유용한지, 그리고 어떻게 작성하는지 살펴본다. 공통적인 문제를 해결하기 위해 사용하는 HOC…

이 글을 대충 번역했습니다. webpack 4버전 이상의 경우 프로덕션 모드를 사용하기 minification 을 켜두기 번들 수준의 minification loader-specific 옵션 참고할 만한 것들 NODE_ENV=production 명시하기 ES Module 사용하기 이미지 크기 줄이기 디펜던시 최적화하기 ES Module을 위한 module concatenation 켜두기 (aka 스코프 호이스팅) 웹팩 코드와 웹팩으로 번들링 되지 않은 코드를 같이 슨다면 를 사용하라 에 있을 경우 패키지의 경우 요약 webpack 4버전 이상의 경우 프로덕션 모드를 사용하기 webpack 4버전 부터 mode라고 하는 플래그가 추가되었다. 을 설정해두는데, 이는 webpack에 현재 어떤 버전으로 빌드하려고 하는지 알려준다. 모드는 프로덕션 환경에서 실제 앱을 빌드할 떄 사용한다. 이 모드를 사용하면 웹팩은 코드 최소화, dev…

거품(버블)정렬 가까운 두 원소를 비교해서 정렬하는 방식이다. 코드가 단순하고 구현하기 쉽다 느리다. bubble-sort 선택정렬 배열에서 가장 작은 값을 찾아, 그 값을 배치 한다. 코드가 단순하고 구현하기 쉽다. 느리다. selection-sort 삽입정렬 배열의 요소를 차례대로 순회하면서, 이미 정렬된 배열과 비교하여 해당 요소를 올바른 위치에 삽입하는 것 구현하기 쉽다 배열이 길어질 수록 정렬할 경우의 수가 많아져서 느려진다. insertion-sort 퀵정렬 리스트 가운데에서 하나의 원소를 고른다. 이 원소를 피벗이라고 한다. 피벗을 기준으로 피벗 앞에는 피벗 보다 작은 값을, 뒤에는 큰 값들이 오도록하고 그렇게 리스트를 둘로 나눈다. 분할된 리스트에 대해 이 작업을 리스트의 크기가 0 또는…

Stack Queue 우선순위 큐 연결 리스트 해쉬테이블 이진 트리 타입스크립트로 구현해보는 일반적인 자료구조 Stack push와 pop으로 구성된 stack LIFO Queue 데이터 삽입과 삭제가 서로 반대쪽에서 일어나는 자료구조 FIFO 우선순위 큐 각 원소들이 우선순위를 가지고 있는 큐 큐에서 무작정 이나 하는 것이 아니라, 우선순위가 가장 높은 것이 나오는 형태 연결 리스트 해쉬테이블 이진 트리

Case Study: Analyzing Notion app performance를 제멋대로 요약한 글입니다. 왠만하면 저 글을 참고하세요. 자바스크립트의 비용 자바스크립트 실행을 지연시키기. 코드 스플리팅 ModuleConcatenationPlugin이 제대로 작동하는지 확인하기 Babel 의 옵션을 활용하기 사용하지 않는 JS 코드 삭제하기 코드 스플리팅 사용하지 않는 vendor 코드 삭제 폴리필 제거하기 로딩 워터폴 최적화하기 써드 파티 라이브러리 지연시키기 API 데이터를 미리 로딩하기 그 밖에 응답에 을 사용하기 스켈레톤 활용하기 요약 자바스크립트의 비용 보통 를 이야기하면, 네트워크 성능을 떠올리는 경우가 많다. 네트워킹이라는 관점에서는 노션은 꽤 괜찮았다. HTTP/2를 사용하고, 파일을 gzip으로 압축했으며, CDN 프록시를 위해 클라우드페어를 잘 쓰고 있었다. 그러나 를 차지 하는 다른 한켠에는 이 포함되어 있다. gzip…

프로토타입 속성 상속 메소드 상속 How to use 여러가지 방법으로 객체를 생성하고 프로토타입 체인 결과를 보자 문법 생성자 생성자를 이용 Object.create 활용 [prototype] vs prototype [prototype] prototype 프로퍼티 차이비교 Constructor 정리!!! 프로토타입 상속이라는 관점에서 봤을 때, 자바스크립트의 유일한 생성자는 객체 뿐이다. 모든 객체는 이라는 private 속성을 가지고 있는데, 이는 자신의 프로토타입이 되는 다른 객체를 가리킨다. 이렇게 자신의 프로토타입의 프로토타입의 프로토타입을 따라가다보면, 결국 null을 프로토타입으로 가지는 오브젝트에서 끝난다. null…

들어가기에 앞서 더 좋고 제가 많이 참고한 글이 여기에 있습니다. 이글을 보시는게 낫습니다. 자바스크립트 실행컨텍스트 실행 컨텍스트의 정의 실행 컨텍스트의 구성요소 Variable Object (변수객체) 전역 컨텍스트의 변수 객체 함수 컨텍스트의 변수 객체 스코프 체인 (Scope chain) this 실행 컨텍스트가 실행되는 과정 1. 전역 객체 생성 2. 전역 코드로 컨트롤 진입 2-1. 스코프 체인 생성 및 초기화 2-2. 변수 객체화 (Variable Instantiation) 실행 순서 함수 선언의 처리 변수 선언의 처리 전역 코드의 실행 변수에 값 할당 함수의 실행 스코프 체인 생성 및 초기화 Variable Instantiation 실행 this 결정 foo 함수의 실행 값 할당 bar…

Fish 문제 길이 N으로 이루어진 비어있지 않은 배열 A, B가 주어진다. 배열 A는 물고기의 크기를, B는 물고기의 움직임을 나타내는데, 0일 경우 위로, 1일 경우 아래로 간다. 만약 두마리의 물고기가 만날 경우, 더 사이즈가 큰 물고기가 잡아먹어버린다. 이 때 살아남는 물고기의 수를 구하라. 풀이

Nesting 문제 와 로 이루어진 문자열이 있다. 이 문자열의 짝이 맞게 이루어져 있는지 확인하라. 풀이 https://app.codility.com/demo/results/training8N66E9-5ZY/