본문 바로가기

FrontEnd

코드 스플리팅 💡 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를 사용하면 복잡한 애플리케이션의 상태 관리를 보다 체계적이.. 더보기
2개의 interface 중, 어떤 interface인지 모를 때 interface User { name: string; age: number; occupation: string; } interface Admin { name: string; age: number; role: string; } export type Person = User | Admin; export const persons: Person[] = [ { name: 'Max Mustermann', age: 25, occupation: 'Chimney sweep' }, { name: 'Jane Doe', age: 32, role: 'Administrator' }, { name: 'Kate Müller', age: 23, occupation: 'Astronaut' }, { name: 'Bruce Willis'.. 더보기
간단한 리덕스의 세 가지 규칙 더보기 리덕스 공부하며 요약한 세 가지 규칙을 작성 해본다. 1. 단일 스토어 하나의 프로젝트 안에는 하나의 스토어만 존재. - 하나의 프로젝트 안에 여러 스토어를 만들 수도 있지만, 상태 관리가 복잡해질 수 있으므로 권장 X 2. 읽기 전용 상태 - Read only 리덕스의 상태는 read-only 임. 따라서 업데이트하는 과정에서 불변성을 지켜 주기 위해 기존의 객체는 건드리지 않고 새로운 객체를 생성해 주어야 함 - ex.) spread 연산자 or immer library 리덕스에서 불변성을 유지해야 하는 이유는 내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교(shallow equality) 검사를 하기 때문. 객체의 변화를 감지할 때 객체의 깊숙한 안쪽까지 비교하는 것이 아니라 겉핥.. 더보기
Media Query 설정 Desktop (1281px 이상) @media (min-width: 1281px) { //CSS } Laptop, Desktop (1025px ~ 1280px) @media (min-width: 1025px) and (max-width: 1280px) { //CSS } Tablet(세로) (768px ~ 1024px) @media (min-width: 768px) and (max-width: 1024px) { //CSS } Tablet(가로) (768px ~ 1024px) @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { //CSS } Tablet(저해상도), Mobile(가로) (481px ~ 767px) .. 더보기
document.referrer 구현 회사에서 이번에 맡은 업무 중에 referrer를 통해 resource를 전달받아야 하는 경우가 있었다. 구현 도중에 safari 환경에서 난관에 부딪혀, 구현 방향을 referrer가 아닌 query parameter로 바꾼 과정에 대한 일지를 작성. 먼저, document.referrer 란? 1. 현재 페이지 이전의 URI 정보를 반환 Ex) example.com -> secondExample.com secondExample.com 에서 referrer를 통해, example.com 값을 받아 올 수 있다. 2. header 쪽에 종속되어 있다. 접근 방법 (GET) document.referrer; 설정 방법 (SET) Object.defineProperty(document, "referrer",.. 더보기

티스토리툴바