this this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. javascript에서 this는 어디서든지 참조 가능하다. 전역이나 일반 함수 내부에서 this는 전역객체인 window를 가리킨다. console.log(this) // window function square(number) { consol...

Racing Effects redux-saga에서 여러 태스크를 병렬로 실행할 때, 태스크 결과를 전부 기다리지 않고 먼저 들어온 태스크만 처리한다. import { race, call, put, delay } from 'redux-saga/effects' function* fetchPostsWithTimeout() { const { post...

Using Hooks in a React Redux App 클래스형 컴포넌트에서 connect()로 감싼 것처럼, 함수형 컴포넌트에서는 먼저 App을 <Provider>로 감싸주어야 한다. const store = createStore(rootReducer); // As of React 18 const root = ReactDOM.cr...

네이밍 규칙 카멜 케이스(Camel Case) 일반적인 변수와 함수의 네이밍에는 카멜 케이스를 사용한다. 이름의 제일 첫 문자는 소문자이며, 각 단어의 첫 문자를 대문자로 표시한다. var elapsedTimeInDays; var daysSinceCreation; var daysSinsceModification; var fileAgeInDays...

설치 yarn add enzyme enzyme-adapter-react-16 17은 아직 React 17과 호환되지 않는다고 한다. 그래서 enzyme-adapter-react-16을 설치하였고, 리액트 버전을 16으로 다운그레이드 시켜줘야 했다. .babelrc { "presets": [ "@babel/preset-rea...

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...