Github 액션으로 스케쥴링 작업하기
Github actions가 나오면서 cron job을 실행하기가 더 편해졌습니다. 굳이 내 컴퓨터를 24시간 돌리고 있을 필요도 없고, 비싼 돈 주며 어디 이상한 compute를 쓸 필요도 없어졌습니다. [물론 공짜로 쓸 수 있는 Cron 서비스](https://www.easycron.com/)도 있지만 아무래도 github 과 연동할 수 있다는 점이 큰...
20 POSTS
Page 14
자바스크립트 메모리 누수와 해결 방법
```toc tight: true, from-heading: 2 to-heading: 3 ``` [4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them](https://auth0.com/blog/four-types-of-leaks-in-your-javascript-code-and-how-to-...
자바스크립트의 비용
자바스크립트의 비용 2019ver
주요 렌더링 경로 - 브라우저의 원리를 이해하고 최적화 하기
[Critical Rendering Path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path?hl=ko)를 요약했습니다. 이글을 보는게 더 나아요 사실 ```toc tight: true, from-heading: 2 to-heading: 3 ``` 성...
빠른 로딩을 위한 PRPL 패턴
[Apply instant loading with the PRPL pattern](https://web.dev/apply-instant-loading-with-prpl/)을 번역한 글입니다. PRPL은 웹 페이지를 로드하고 인터랙티브 할 수 있게 금 더욱 빠르게 만드는 패턴을 설명하는 약어다. ## 요약 - 중요한 리소스를 미리 로드해라 (Push (...
왜 CommonJS는 번들사이즈를 크게 하는가?
[How CommonJS is making your bundles larger](https://web.dev/commonjs-larger-bundles/) 를 번역 & 요약한 글입니다. ```toc tight: true, from-heading: 2 to-heading: 3 ``` **요약: 웹 애플리케이션을 확실하게 최적화해서 번들링하기 위해서는, C...
프론트엔드 개발자가 알아야 하는 Angular와 React의 Change Detection
[What every front-end developer should know about change detection in Angular and React](https://indepth.dev/what-every-front-end-developer-should-know-about-change-detection-in-angular-and-react/)를 번...
리액트 고차 컴포넌트 (React Higher Order Component)
[이 글](https://ko.reactjs.org/docs/higher-order-components.html)이 한글로 번역이 안되있어서 대충 번역해봅니다. # Higher-Order Components 고차 컴포넌트 (이하 HOC)는 리액트에서 컴포넌트 로직을 재사용하기 위한 고오급 기술이다. HOC는 리액트 API의 일부분은 아니다. 이는 리액트...
프론트엔드 사이즈 줄이기
[이 글](https://developers.google.com/web/fundamentals/performance/webpack/decrease-frontend-size)을 대충 번역했습니다. ```toc tight: true, from-heading: 2 to-heading: 4 ``` ## webpack 4버전 이상의 경우 프로덕션 모드를 사용하...
자바스크립트로 구현해보는 다양한 정렬
## 거품(버블)정렬 - 가까운 두 원소를 비교해서 정렬하는 방식이다. - `O(N^2)` - 코드가 단순하고 구현하기 쉽다 - 느리다.  ```javascript function bub...
자바스크립트 자료 구조
`toc tight: true, from-heading: 1 to-heading: 4 ` 타입스크립트로 구현해보는 일반적인 자료구조 ## Stack - push와 pop으로 구성된 stack - LIFO ```javascript export default class Stack<T> { private stack: T[] construc...
Notion 성능 최적화
[Case Study: Analyzing Notion app performance](https://3perf.com/blog/notion/)를 제멋대로 요약한 글입니다. 왠만하면 저 글을 참고하세요. ```toc tight: true, from-heading: 2 to-heading: 3 ``` ## 자바스크립트의 비용 보통 `로딩 속도`를 이야기하면...
Javascript Prototype
`toc tight: true, from-heading: 1 to-heading: 4 ` # 프로토타입 상속이라는 관점에서 봤을 때, 자바스크립트의 유일한 생성자는 객체 뿐이다. 모든 객체는 `[[prototype]]` 이라는 private 속성을 가지고 있는데, 이는 자신의 프로토타입이 되는 다른 객체를 가리킨다. 이렇게 자신의 프로토타입의 프...
Javascript Execution Context
들어가기에 앞서 더 좋고 제가 많이 참고한 글이 [여기](https://poiemaweb.com/js-execution-context)에 있습니다. 이글을 보시는게 낫습니다. ```toc tight: true, from-heading: 1 to-heading: 4 ``` # 자바스크립트 실행컨텍스트 이번 포스팅으로 자바스크립트 실행 컨텍스트에 대해 온...
Codility - Fish
## Fish ### 문제 길이 N으로 이루어진 비어있지 않은 배열 A, B가 주어진다. 배열 A는 물고기의 크기를, B는 물고기의 움직임을 나타내는데, 0일 경우 위로, 1일 경우 아래로 간다. 만약 두마리의 물고기가 만날 경우, 더 사이즈가 큰 물고기가 잡아먹어버린다. 이 때 살아남는 물고기의 수를 구하라. ``` A[0] = 4 B[0] =...
Codility - Nesting
## Nesting ### 문제 `(`와 `)`로 이루어진 문자열이 있다. 이 문자열의 `(` `)` 짝이 맞게 이루어져 있는지 확인하라. ### 풀이 ```javascript function solution(S) { const split = S.split('') const stack = [] for (let i of split...
Codility - Stone Wall
## StoneWall ### 문제 돌은 N미터 길이를 가지고 있으며, 두께는 모두 일정하다. 배얼에 돌 높이가 주어져 있으며, 아래와 같이 해석할 수 있다. - H[i]: 왼쪽에서 오른쪽으로 벽의 높이 - H[0]: 벽 왼쪽 끝의 높이 - H[N-1]: 벽 마지막 끝의 높이 ``` H[0] = 8 H[1] = 8 H[2] = 5 H[3]...
Codility - Brackets
## Brackets ### 문제 문자열 S가 주어지고, S는 다음 경우 일 때 참을 반환해야 한다. - S가 비어있는 경우 - `(U)` or `[U]` or `{U}` 의 형태로 괄호안에 문자열이 있는 경우 - 괄호가 짝이 맞게 닫혀있는 경우 예를 들어 `{[()()]}`는 괄호가 알맞게 들어있지만, `([)()]`는 그렇지 못하다. (짝은 맞...
Codility - Frog River One
## Frog River One ### 문제 개구리가 X 까지 가고 싶은데, X까지 가기 위해서는 1부터 X를 모두 지나가야 한다. 예를 들어보자. ``` 이렇게 배열이 주어져 있고 A[0] = 1 A[1] = 3 A[2] = 1 A[3] = 4 A[4] = 2 A[5] = 3 A[6] = 5 A[7] = 4 5까지 가고 싶다고 가정했을때, A[...
Codility - Max Counters
## Max Counters ### 문제 숫자 N이 주어진다. 이 숫자 N은 모든 요소가 0인 길이 N인 배열을 의미한다. 그리고 배열 A가 존재한다. ``` 숫자 N이 5로 주어지고, 배열 A는 [3, 4, 4, 6, 1, 4, 4] 라고 가정하자. 초기 값 [0, 0, 0, 0 0] A[0] = 3, 3번째 (3-1번째) 요소의 크기를 1 늘린...