본문 바로가기

분류 전체보기

코드 스플리팅 💡 Ref: https://velog.io/@velopert/react-code-splitting#1-진짜-기본적인-코드-스플리팅 코드 스플리팅 ? 리액트 에서의 코드 스플리팅? From gpt 리액트 코드 스플리팅은 애플리케이션의 JavaScript 코드를 더 작은 청크로 분할하여 필요할 때 동적으로 로드하는 기술입니다. 이를 통해 초기 번들 크기를 줄이고 페이지 로딩 속도를 향상시킬 수 있습니다. 일반적으로 리액트 애플리케이션은 하나의 번들 파일에 모든 JavaScript 코드가 포함되어 있습니다. 그러나 큰 규모의 애플리케이션의 경우 이 번들 파일의 크기가 커져 초기 로딩 시간이 증가하게 됩니다. 코드 스플리팅을 사용하면 애플리케이션을 여러 개의 작은 청크로 분할할 수 있습니다. 분할된 청크는 각각.. 더보기
async vs defer in HTML script tags async async를 포함 시킴으로써 해당 스크립트를 비동기로 fetch 할 수 있다. 해당 스크립트는 다운로드가 되자마자 실행되기 때문에, HTML parsing 작업이 끝나기전에 실행 될 수 있다. 때문에, HTML parsing 작업을 잠재적으로 방해할 수 있다. 방해 예시) 만약 다운로드된 스크립트안에 직접적으로 DOM에 접근하여 특정 element를 추가/수정 하는 코드가 존재하려 하고, 해당 element가 아직 HTML parsing (drawing render tree)가 진행 중이라면 에러가 발생할 수 있다. 다수의 script가 async와 함께 선언되었다면, 비동기적으로 fetch하여 다운로드가 순차적으로 진행 되지 않는다. 💡 따라서, async는 DOM structure에 영향을.. 더보기
왜 리액트 훅 선언은 특정 규칙이 있을까? Why declare hooks at the top level? Ensures Consistent Behavior 리액트는 여러가지 hooks가 있다. 그 중 대표적으로 UseEffect, UseState , UseCallback 등의 hooks가 있는데, 이러한 훅들은 순차적인 order로 선언되어야 하며 이러한 order로 부터 리액트는 render 시에 어떠한 순서에서 어떠한 훅을 호출해야 하는지 파악 할 수 가 있다. Ref: https://legacy.reactjs.org/docs/hooks-rules.html#explanation Improve Readability and Maintainability top에 hook들(useEffect, useState, useMemo 등)을 선언 함으로써,.. 더보기
MobX vs Redux Toolkit MobX와 redux Toolkit은 둘 다 React 애플리케이션에서 상태 관리를 할 때 사용되는 라이브러리이다. 두 라이브러리 모두 장단점이 있으며, 사용자의 요구사항에 따라 적합한 라이브러리를 선택해야 한다. MobX는 간단하고 직관적인 API를 제공하며, 특히 복잡한 애플리케이션에서 상태 관리를 쉽게 할 수 있다. 또한, MobX는 자동으로 데이터를 관찰하고 업데이트하기 때문에 개발자가 별도로 상태 변화를 감지하거나 업데이트를 수행할 필요가 없다. 이는 애플리케이션 개발을 더욱 빠르고 쉽게 만들어 준다. 반면, Redux Toolkit은 Redux의 기능을 보완하고 개발자의 작업을 단순화하는 데 중점을 둔 라이브러리 라고 한다. Redux를 사용하면 복잡한 애플리케이션의 상태 관리를 보다 체계적이.. 더보기
최솟값 만들기 [문제 설명] 길이가 같은 배열 A, B 두개가 있습니다. 각 배열은 자연수로 이루어져 있습니다. 배열 A, B에서 각각 한 개의 숫자를 뽑아 두 수를 곱합니다. 이러한 과정을 배열의 길이만큼 반복하며, 두 수를 곱한 값을 누적하여 더합니다. 이때 최종적으로 누적된 값이 최소가 되도록 만드는 것이 목표입니다. (단, 각 배열에서 k번째 숫자를 뽑았다면 다음에 k번째 숫자는 다시 뽑을 수 없습니다.) 예를 들어 A = [1, 4, 2] , B = [5, 4, 4] 라면 A에서 첫번째 숫자인 1, B에서 첫번째 숫자인 5를 뽑아 곱하여 더합니다. (누적된 값 : 0 + 5(1x5) = 5) A에서 두번째 숫자인 4, B에서 세번째 숫자인 4를 뽑아 곱하여 더합니다. (누적된 값 : 5 + 16(4x4) = .. 더보기
멀쩡한 사각형 [문제] 가로 길이가 Wcm, 세로 길이가 Hcm인 직사각형 종이가 있습니다. 종이에는 가로, 세로 방향과 평행하게 격자 형태로 선이 그어져 있으며, 모든 격자칸은 1cm x 1cm 크기입니다. 이 종이를 격자 선을 따라 1cm × 1cm의 정사각형으로 잘라 사용할 예정이었는데, 누군가가 이 종이를 대각선 꼭지점 2개를 잇는 방향으로 잘라 놓았습니다. 그러므로 현재 직사각형 종이는 크기가 같은 직각삼각형 2개로 나누어진 상태입니다. 새로운 종이를 구할 수 없는 상태이기 때문에, 이 종이에서 원래 종이의 가로, 세로 방향과 평행하게 1cm × 1cm로 잘라 사용할 수 있는 만큼만 사용하기로 하였습니다. 가로의 길이 W와 세로의 길이 H가 주어질 때, 사용할 수 있는 정사각형의 개수를 구하는 solution.. 더보기
타입스크립트 컴파일러의 컴파일 과정 본문 - https://www.huy.rocks/everyday/typescript-how-the-compiler-compiles 이 글은, How the Typescript compiler compiles 영상을 참조하여 작성된 글이다. Typescript compile process를 조금 더 깊게 이해하기 위해서, 해당 동영상을 참조 해볼 것을 추천한다. high level 에서, 타입스크립트 컴파일러는 Typescript 코드를 Javascript (*.js) 코드로 컴파일하고, 분석하는데 도움을 줄 수 있는 Tool 이다. type definition files(*.d.ts) 이나 source maps 파일(*.js.map) 역시도 마찬가지다. 만약, 소스 파일에 어떠한 문제가 있다면, 타입 스.. 더보기
알고 있으면 좋은 5가지 리액트 디자인 패턴 본문 - https://javascript.plainenglish.io/5-react-design-patterns-you-should-know-629030e2e2c7 같은 코드를 반복적으로 작성하는 것에 지쳐 있으삼? 리액트 스킬을 다음 단계로 향상시키고 싶으심? HOCS, Render Props, Hooks, and Context API 들의 React Design Pattern 들을 이해함으로써, 당신의 코딩에 대한 스킬을 향상시켜 줄 것이다 1. Container 그리고 Presentational Components ✨ 처음으로 우리가 살펴볼 패턴은 container 와 presentational 컴포넌트를 분리하는 작업이다. 이 패턴은 data management 와 UI rendering 분리에.. 더보기

티스토리툴바