console의 종류 기본 console console.log('기본') console.debug('디버그') console.info('정보') console.warn('경고') console.error('에러') console.debug()는 개발자 도구 상단의 ‘All levels’에서 Verbose에 체크해야 콘솔창에 노출된다. ...

HTTP/1.1의 단점 HOL(Head Of Line) Blocking HTTP/1.1은 기본적으로 커넥션 당 하나의 요청을 처리한다. 이러한 단점을 개선할 수 있는 기법으로 Pipelining이 있다. Pipelining은 한 번의 커넥션으로 다수의 request와 response를 처리하는 방식이다. 하지만 순차적으로 앞의 resp...

Domain Sharding 한 도메인이 아닌 여러 도메인에 나눠서 요청을 보내 리소스들을 동시에 다운로드 받는 기술 예를 들어 CSS, img 등의 파일을 분할하여 일부는 static1.domain.com에서 다운로드하고 나머지는 static2.domain.com에서 받을 수 있다. 도메인 샤딩을 적용하는 이유는 대부분의 브라우저가 각...

아이콘들을 export하고 storybook에서 맵핑하는 부분이 헷갈려서 정리해둔다. 아이콘 컴포넌트 추가 우선 아이콘 svg를 jsx나 tsx 형태로 바꿔서 파일을 추가해준다. 아이콘들을 export 하는 파일 추가 Icons.ts 파일을 생성한다. (이름은 상관없다) 위에서 만들어준 아이콘 컴포넌트들을 여기서 export 해준다. exp...

SVG svg 파일을 에디터로 열어 보면 아래와 같이 version, xmlns, xmlns:xlink 속성이 붙어있다. <svg version="1.1" xmlns=http://www.w3.org/2000/svg xmlns:xlink="http://www.w3.org/1999/xlink" width="520" height="5...

Merge 했을 때 커밋 메시지가 생성되지 않는 경우 다른 브랜치를 머지했는데 git 로그에 merge 되었다는 커밋 메시지는 생성되지 않고, 다른 브랜치의 커밋 내역만 생성되었다. 하지만 커밋 내역들이 머지해서 가져온 것이라는 티를 내줘야 할 것 같아서, 머지 메시지 생성 옵션에 대해 알아보게 되었다. fast-forward 2개의 커밋 A와...

문제 타입스크립트 앱에서 상수를 선언할 때 아래처럼 type과 객체를 따로 선언했다가 바보같은 짓임을 깨달았다. export type Status = "default" | "active" | "disabled"; export const STATUS = { DEFAULT: "default", ACTIVE: "active", DISABLE...

만약 tsconfig에서 paths를 사용하지 않고 rootDir로 절대경로를 설정한 경우, .storybook 폴더에 webpack.config.js 파일을 만드는 방법으로 간단히 경로를 설정할 수 있다. 하지만 tsconfig에서 paths를 사용하는 경우는 라이브러리를 사용하여 tsconfig의 paths 값을 가져와야 한다. tsconf...

문제 앱을 빌드하여 .d.ts 파일을 생성할 때, rootDir로 설정한 절대경로가 변환되지 않고 그대로 생성되어 dist 폴더에서 경로를 찾지 못한다. import { ColorTheme } from "types"; // types가 아니라 ../../types로 바꿔야 경로를 찾아갈 수 있다. 해결 typescript-transform-p...

redux-saga의 이펙트 Saga는 명령을 만들어주기만 하고, 이 명령에 따른 직접적인 처리는 미들웨어가 한다. 이펙트는 Saga의 미들웨어가 실행할 수 있는 명령들이다. take take를 호출하면 해당 액션이 디스패치 될 때까지 기다렸다가, 디스패치되면 다음 코드를 실행한다. function* watchLogIn() { yield ...