jopemachine. dev blog

개발 관련 개인적인 일상, 후기, 생각, 스터디, 문서 번역 등 각종 포스팅을 정리하고 공부하고, 공유합니다.

package-lock.json의 lockfileVersion에 대해

npm 이슈

package-lock.json의 lockfileVersion에 대해 npm 7에서 package-lock.json의 포맷이 크게 바뀜 (버전 1 -> 버전 2) 버전 2의 경우 npm 6 이하와의 하위 호환성을 보장한다. 버전 3의 경우 하위 호환성을 보장하지 않고, 한 번 사용하면 npm 6...

Posted by jopemachine on November 9, 2021

Flux-standard-action (FSA)이란?

Redux 세부사항

Flux-standard-action (FSA) 이란? https://github.com/redux-utilities/flux-standard-action human-friendly한 Flux action의 표준. Flux action의 shape에 대한 표준을 바탕으로 더 유용한 툴들을 만들어 낼 ...

Posted by jopemachine on November 8, 2021

bors-ng에 대해

CI, CD

bors-ng bors-ng는 Github workflow의 Pull request, Travis, Jenkins와 같은 CI를 통합하여, 자동 머지 기능을 제공한다. 설정 파일은 bors.toml이다. 해당 설정 파일에서 특정 라벨(Block-label) 이 붙어 있는 PR들은 테스트가 끝나도 병합되지 않게 하거나,...

Posted by jopemachine on November 8, 2021

ES2020에서 추가된 기능

자바스크립트 세부사항 스터디

ES2020에서 추가된 기능 BigInt 길이의 제약 없이 정수를 다룰 수 있게 해 줌. 정수 리터럴 끝에 n을 붙이면 자동으로 BigInt 타입이 된다. 모듈 동적으로 가져오기 import를 프라미스를 반환하는 함수 형태로서 사용 가능하게 됨. 즉 모듈을 원하는 시점에 동적으로 읽어올 수 있다. null 병합 연산자 ...

Posted by jopemachine on November 1, 2021

Lighthouse란?

Frontend 최적화

Lighthouse 웹 페이지의 품질 개선을 위한 자동화된 오픈 소스 툴로, 기본적으로 크롬 개발자 도구에 내장되어 있으며 추가 설치를 통해 노드 모듈로서도 사용 가능함. 측정 리포트는 html, json 파일로 저장 가능함. 모바일 환경, 데스크톱 환경에서 따로 성능 측정이 가능. 구글에선 좋은 사...

Posted by jopemachine on November 1, 2021

Redux multiple store에 대해

Redux 세부사항

Redux multiple store Redux store는 의도적으로 싱글톤으로 만들어졌다. (Flux 패턴) 스토어 자체가 데이터의 도메인에 따라 리듀서들에 의해 나뉘기 때문에 스토어를 여러 개로 나누는 것은 불필요하다. 너무 빈번한 상태 변화에 의해 발생하는 퍼포먼스 이슈를 해결하기 위해 여러 개의 스토어를 만드...

Posted by jopemachine on October 31, 2021

React, rehydrate vs render

React 세부사항

React, Rehydate vs render render 1 render(element, container, callback) element를 container의 자식으로 렌더링하고, 렌더링 후 callback 함수를 실행함. 이미 렌더링 된 적이 있다면 diff 알고리즘을 통해 필요한 부분만 업데이트함. ...

Posted by jopemachine on October 31, 2021

ArrayLike object에 대해

자바스크립트 세부사항 스터디

ArrayLike object에 대해 객체인데 length와 (optional) map, filter 등의 메서드를 선언하고 배열인 척 한다. arguments, HtmlCollection이 대표적인 ArrayLike object. ArrayLike 객체를 배열로 변환하는 법 map, filter, j...

Posted by jopemachine on October 17, 2021

일반 function vs Arrow function

자바스크립트 세부사항 스터디

일반 function vs Arrow function this 바인딩 자바스크립트에서 function의 this는 다소 복잡한 방식으로 바인딩 된다. 1 2 3 4 5 6 7 1. 메소드일 경우 해당 객체를 가리킴 2. 생성자일 경우 해당 객체를 가리킴 3. 일반적으로 전역 객체인 window를 가리킴. 4. use strict 모드...

Posted by jopemachine on October 12, 2021

브라우저에 URL을 입력했을 때 일어나는 일

Frontend

브라우저에 URL을 입력했을 때 브라우저가 쿼리를 해석하고 쿼리가 URL 문법 (정규표현식 인 듯)에 맞지 않으면 기본 검색 엔진 (구글 등) 으로 검색. 쿼리가 URL에 해당되면 HSTS 리스트를 확인한다. 리스트에 해당 도메인이 포함되고, http로 연결을 시도했다면 자동으로 https로 리다이렉트 한다. ...

Posted by jopemachine on October 11, 2021

FEATURED TAGS
Git Frontend Javascript Translation Typescript Browser Frontend Optimization Linux Programming React Redux HTML CSS Web Programming Backend Flux Http Node OSSCA Review Security
ABOUT ME

다양한 CS 분야에 관심을 갖고 공부하는 주니어 개발자입니다.