1. 빌드빌드란?빌드란 개발자가 작성한 소스코드를 브라우저가 실행가능한 형태로 변환하는 과정입니다. 빌드 도구프론트엔드엔 다양한 빌드도구가 존재합니다.예시로 webpack, vite, esbuild, rollup.js , parcel, 등이 있습니다. 2. 빌드 과정속에 일어나는 일1. Transpiling우리가 작성한 타입스크립트 코드는 브라우저가 해석할 수 없어요.자바스크립트 문법이 아니기 때문입니다.리액트의 JSX 문법도 해석할 수 없기 때문에 변환과정이 필요해요.브라우저가 해석할 수 있도록, 브라우저가 아는 문법으로 변환하는 트랜스파일링 과정이 필요합니다.추가로, 타입스크립트를 사용하면 타입체킹 과정이 빌드과정에 포함되어 있어요.흔히 들어본 폴리필도 빌드과정에 지원되지 않는 문법을 해석할 수 있도..
react
해당 게시글은 우아한 타입스크립트 with 리액트 10장을 읽고 정리한 글 입니다. React에서 State 란? - 시간이 지나면서 변할 수 있는 동적인 데이터 - 렌더링에 영향을 줄 수 있는 동적인 데이터 리액트 앱 내에서의 상태는 지역 상태, 전역 상태, 서버 상태 로 분류할 수 있습니다. 리액트 API만 으로도 상태를 관리할 수 있지만, 성능 문제가 발생하거나 규모가 커져 복잡해지면 Redux, MobX, Recoil 과 같은 외부 상태 라이브러리를 주로 활용합니다. 특히나, 컴포넌트 간의 상하관계 사이에서 상태 전달을 위해 과도한 Props drilling 을 막고자 사용합니다. React 에서 State 를 정의할 때 고려해야 할 사항 리액트에서 state가 변하게 되면(업데이트가 되면) 리렌..
컴포넌트의 props에 컴포넌트를 넘겨야 할 때, props의 이름과 컴포넌트의 타입을 선언해주어야 한다. import { JSX, ReactElement, ReactNode, useEffect, useState } from 'react' interface Props { component: ReactElement component1: JSX.Element component2: ReactNode } 하지만 이 컴포넌트의 타입은 `ReactElement` , `Element` , `ReactNode` 세가지가 있으며, 세가지 모두 리액트의 요소를 나타낸다. 이 타입들의 차이는 무엇이 있을 지 알아보자. ReactElement 리액트에서는 JSX 문법으로 UI를 표현하고, 트랜스파일러는 JSX문법을 crea..
React를 개발하다보면 자주 쓰이는 useRef 와 ref라는 녀석에 대해서 알아보자. 어떨때 쓰나요? 우선 `useRef` 는 어떤 상황에서 사용할까? 개발을 하다보면 단순히 React JSX Element 만으로는 DOM 을 완벽하게 제어하기 어렵다. 가장 흔하게 예시를 들자면, 사용자가 특정 액션을 했을 때 input element에 focus를 해주어야 한다면 React에서 어떻게 구현해야 할까? useRef를 알고있다면, 해결법은 간단하다. input element를 ref에 연결하고, ref에 연결된 element를 focus해주면 된다. ref 가 뭔데요? ref는 reference의 줄임말이다. 한국말로는 참조정도 되겠다. ref는 일반 객체다. ref를 console.log 로 찍으면 ..
