이레 이레

Entry Points: entry 설정을 사용하여 코드를 수동으로 분할 Prevent Duplication: Entry dependencies 또는 SplitChunksPlugin을 사용하여 중복 청크를 제거하고 청크를 분할 Dynamic Imports: 모듈 내에서 인라인 함수 호출을 통해 코드를 분할 청크: webpack의 output을 지칭하는 표현

Entry Output Loaders Plugins Mode Browser Compatibility Entry: webpack이 내부의 디펜던시 그래프를 생성하기 위해 사용해야 하는 모듈. 기본값은 ./src/index.js/ Output: 생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 webpack에 알려주는 역할 Loaders: webpack은 기본적으로 JS와 JSON만 이해. 로더를 사용하면 webpack이 다른 유형의 파일을 처리하거나, 그들을 유효한 모듈로 변환 하여 애플리케이션에서 사용하거나 디펜던시 그래프에 추가. (import foo.svg) Plugins: 플러그인을 활용하여 번들을 최적화하거나, 애셋을 관리하고, 또 환경 변수 주입등과 같은 광범위한 작업을 수행. Ht..

ReactJS에서 controlled component 와 uncontrolled components 는 무엇이고 무슨 차이가 있는걸까? stateful DOM component(form elements)는 자신만의 state를 가지고 있고 update한다. React가 가지고 있는 state를 "single source of truth"로 정하는 것은 from element가 props를 통해 React state를 전달받아 internal state값을 정하는 것을 의미한다. 다시말해, form element를 render하는 React Component가 form 에 입력되는 사용자의 값을 control할 때 이를 Controlled Component라고 한다. Uncontrolled Compone..

큰 collections을 렌더링해야 할 때 특히 지켜져야 한다. collection이 바뀔 때 마다 collection으로 부터 produced된 component는 재조정을 거쳐야 하기 때문이다. 따라서, 컴포넌트는 다른 무언가를 렌더링하지 않고 collection만을 render하는 것을 권장한다. bad: const MyComponent = observer(({ todos, user }) => ( {user.name} {todos.map(todo => ( ))} )) good: const MyComponent = observer(({ todos, user }) => ( {user.name} )) const TodosView = observer(({ todos }) => ( {todos.map(to..

원수는 외나무 다리에서 만난다라는 속담이 있다. 어느 한쪽 방향에서만 다리를 건널 수 있고 그 동안 반대편에선 아무도 건널 수 없는 상황을 두고 쓰이는 말이다. React Native에도 이런 상황이 있다. 특히 사용자 인터렉션 기반으로 동작되어야 할 때이다. 최근 새로 나온 Fabric이라는 렌더러를 통해 개선되었다. 예를 들어 사용자가 어떤 버튼(주문 생성)을 누르면 어떤 컴포넌트가(주문 내역) 왼쪽에서 오른쪽으로 슬라이드 하면서 마운트 되는 애니메이션을 구현하고 싶다고 가정하자. 이 때 안드로이드/IOS Native 쓰레드에선 삭제 버튼이 눌렸다는 것을 JS 쓰레드/엔진에 알려주기 위해 Bridge라는 것을 건넌다. 버튼이 눌렸다는 것을 알게된 JS 쓰레드에선 네이티브 쓰레드에 컴포넌트(주문 내역)..

let i = 1; setTimeout(function run() { func(i++); setTimeout(run,1000); }, 1000); 중첩 setTimeout을 사용하면 실행시간을 빼고 명시한 1000ms가 보장된다. 출처: https://lakelouise.tistory.com/51

Q. React Native에서 animation을 구현하지 않는 이유는 무엇일까? Q. 다른 것들은 React Native로 개발을 해도 UI와 View와 관련해서 FPS가 떨어질 확률이 큰 작업을 Native에서 처리하는 이유는 무엇일까? Q. React Native에선 animation 구현할 방법이 없는건가? Reanimated 2 에서 기존 RN의 구조로 인해 야기되는 UI 사용자 경험 문제를 해결하기 위해 Turbo Module을 사용한다. 하지만 android 같은 경우 완전히 배포가 되지 않은 탓에 package.json에 추가하는 것 외에 작업을 개발자가 해줄 필요가 있다. Reanimated 2 를 사용하기 전에 RN의 version이 0.62 이상이어야 한다. https://docs...

observable state를 감시하는 action state를 바꿀 메서드 computed state로 부터 새로운 변화를 가지고 올 getter, 결과물을 cache함. makeObservable 주로 클래스 생성자에서 선언(target은 this) target으로 모든 js object를 넘길 수 있음 makeAutoObservable super가 있거나 subclass가 있는 class에선 사용 불가 makeObservable과 비교해서 자동적으로 관리해주기 때문에 편리함. makeAutoObservable의 규칙: 자신의 property는 다 observable이 된다. getter는 computed로 setter는 action으로 prototype인 모든 함수는 autoAction이 된다. ..