재안 IT 공부 일기장

[SEO] map() 관련 번들 사이즈 줄이기

타입스크립트로 리액트 프로젝트를 하던 중,와 리스트를 간단히 map 돌려서 컴포넌트로 반환하는 로직 여러 군대에서 발견되어혹시 번들링할 때 map 그대로 들어가나? 생각을 했다. 아래와 같은 구조를 통해 중복되는 부분을 추상화 했다. 일단 타입 정의 먼저,export interface ItemProps { id: number | string;}export type IteratingItemProps = { items: T[]; component: ElementType;};export type IteratingLayoutProps = IteratingItemProps & { container: ElementType;};export type ItemsIteratorProps = IteratingLayo..

최근에 React Compiler가 생겼다고 해서 관심을 갖고 있었다.React Compiler에 대해 간략하게 설명하자면, 그동안 불필요한 리렌더링을 방지하려면 useMemo와 useCallback을 통해컴포넌트의 props를 관리 했어야 하는데React Compiler는 위의 조취를 자동으로 지원한다고 한다. 😲 그러다가 유튜브 알고리즘으로 React Conf 2024 Day1이 떴다. 새로나올 React 19의 기능에 대해 설명하는 conference라서 영상에선 React 19에 나오게될 기능들에 대해 설명한다.궁금해서 봤고, 보면서 간단하게 정리를 하려고 한다. https://www.youtube.com/watch?v=T8TZQ6k4SLE 영상이 워낙 길어서 조금씩 나눠서 글을 수정하며 정리하..

개요[1] 브라우저 렌더링[2] 애니메이션[3] requestAnimationFrame[4] requestAnimationFrame 사용법[5] reference [1] 브라우저 렌더링우선 브라우저 렌더링에 대해 간략하게 알아야한다.아래의 순서대로 순차적으로 모두 진행 후 렌더링이 완료된다. 1. DOM 생성2. CSSOM 생성3. Layout (Reflow)4. Paint (Repaint)5. Composite Layout은 DOM과 CSSOM을 통해 Render Tree를 생성하는 단이다. (화면의 구조를 계산)노드의 추가 및 제거 실행시 Layout이 다시 실행된다.노드의 화면상 위치 및 크기 변경시 다시 실행된다. Paint는 Render Tree의 각 요소들이 픽셀단위로 화면에 그려지는 단계이다..

개요[1] DOM이란?[2] DOM 트리[3] DOM 요소 접근법[4] DOM 노드란?[5] DOM 이벤트[6] DOM 요소 제어[7] DOM 트리 제어[8] HTML DOM이란?[9] document[10] reference  [1] DOM이란?Document Object Modelconnecting web pages to scripts (javascript) by representing the structure of a document as logical treedocument 객체는 DOM에 접근하기 위한 진입점이다.  document를 통한 접근 = document.documentElement = document.body = document.head 브라우저가 를 읽지 못했을 땐, document..

1. 자바 스크립트는 인터프리터에 의해 해석되는 스크립트 언어입니다. 2. 싱글 스레드 기반의 언어지만 비동기 처리를 지원합니다. 3. 자바 스크립트는 함수형 패러다임을 기반으로 하면서 객체지향의 문법을 쓰는 독특한 언어입니다. 이를 통해 자바 스크립트는 멀티 패러다임을 지원합니다. 자바 스크립트는 인터프리터를 사용하는 프로그래밍 언어이지만, 대부분의 웹 브라우저에는 just-in-time 컴파일러가 내장되어 있어 실행 속도가 매우 빠릅니다. 하지만 just-in-time 컴파일이란, 스크립트의 실행과 동시에 소스 코드를 이진 형태로 변환하는 기술입니다. 하지만 컴파일이 미리 처리되는 것이 아니라 런타임에 처리되기 때문에 자바 스크립트는 여전히 인터프리터 언어로 분류됩니다. 자바 스크립트는 싱글 스레드를..

Custom Hooks 1 아래와 같이 리액트 hook에 로직들을 추가해서 만든 함수가 커스텀 hook이다. 다른 함수처럼 reusing logic이 핵심이고 간단한 커스텀 hook 예시는 아래와 같다. 함수 이름에 use를 붙여야지 리액트가 해당 함수가 hook임을 인지해 내부에서 리액트 hooks가 사용 가능하게 된다. 아니면 안돌아간다. 파일이름은 상관 없다. 또한, 해당 hook이 hook 사용 규칙을 위반했을 때 경고가 뜬다. Hook 사용 규칙 1. 반복문, 조건문, 내부함수에서 호출하지 말 것 2. React 컴포넌트 내부에서만 호출할 것 커스텀 hook의 사용은 함수처럼 다른 컴포넌트에서 그냥 가져다 쓰면 된다. 이때 커스텀 hook에서 state를 생성한다고해서 해당 훅을 사용하는 모든 ..

React.memostate 변경으로 인해 부모 컴포넌트가 재실행 될경우 해당 컴포넌트의 모든 하위 컴포넌트가 DOM 변경과 관련없이 재실행된다. (console.log로 확인 가능)이때 하위 컴포넌트들의 필요없는재실행을 막기위해 React.memo를 사용할 수 있다. 아래와 같이 export할 때 감싸주면 된다.  React.memo는 함수형 컴포넌트에서만 사용할 수 있고해당 컴포넌트에게 넘어오는 props를 확인해 props의 값 변경이 없다면 ( === 사용 )ReactDOM은 해당 컴포넌트를 재실행 하지 않는다. 이처럼 React.memo는 최적화를 위해 사용하는데 남용하면 오히려 비용이 더 많이 들게된다.이는 App 컴포넌트가 변경될 때마다 해당 컴포넌트 기존 props와 새로운 props의 값..

프론트와 백이 통신함에 있어 Ajax라는 것을 사용한다. 우선 Ajax란? 간단히 말하면 비동기 Javascript와 XML을 말한다. XMLHttpRequest 객체를 이용해서 JSON, XML, HTML, TEXT와 같은 데이터를 서버와 주고받는 것이다. Ajax의 가장 큰 장점은 비동기성이라는 것이다. 전체페이지가 아닌 일부분만 업데이트할 수 있게 해준다. Ajax를 바로 사용하며 예제를 통해 알아보겠다. 이번에 사용할 예제로 회원가입할 때 id 중복체크를 Ajax를 통해 시행하겠다. 회원가입할 때 id중복체크한다고 페이지 전체가 업데이트되면 안되기에 서버와 통신그리고 비동기성에대해 설명할 수 있기 때문이다. 우선 회원가입에 사용할 HTML은 아래와 같다. id와 password를 입력받을 2개의 ..

우선 JSON이란 Javascript의 문자열을 기반으로 구조화된 데이터 포맷이다. (XML 대안) JSON은 일반적으로 웹 어플리케이션 통신에 사용되는데 Javascript의 문자열을 기반으로 한다고해서 꼭 Javascript에서만 사용가능한 것은 아니다. 데이터를 송수신할 때 JSON은 문자열의 형태를 띈다. 이는 따로 문자열로 변환해주어야하는 것이다. 하지만 수신된 데이터를 사용할 때는 JSON객체를 사용해서 parse를 해주어야한다. Javascript에서는 stringify(), parse()를 사용해서데이터를 변환한다. JSON -> string => stringify string -> JSON => parse 특별할게 없는 Javascript의 객체이다. Javascript에서는 이렇게 객체..

Spread Spread는 반복가능한 객체(Iterables)에서 요소들을 바로 Key-Value의 형태로 만들어서 사용하게 해주는 문법이다. Iterable의 요소들을에 대한 접근이 훤씬 용이하다. 위의 출력문은 배열의 형태로, 아래의 출력문은 값이 바로 출력된 것을 알 수 있다. ...arr 이 짧은 코드가 arr의 요소들을 Key-Value의 형태로 바꾸어서 요소들에 바로 접근한 것이다. 원래 배열의 요소에 접근하려면 인덱스를 사용해야하지만 인덱스를 사용하지 않고도 바로 접근할 수 있는 것이다. 배열(반복 가능 객체)의 모든 요소들에 대한 Key-Value의 쌍을 만드니 배열을 모든 요소를 배열에서 꺼낸것과 같이 사용할 수 있다. 요소에 대한 직접적인(?) 접근이 가능하니 활용할 수 있는 방법이 많..