Front End/React
개발을 위한 프레임워크 세팅
🌐필수 항목Node.jsNode.js 패키지 매니저버전 관리 시스템 / 형상 관리 시스템 + 원격 리포지토리 서비스프론트엔드 프레임워크(라이브러리)CSS린터선택 항목HTTP 요청상태 관리TypeScript번들러테스트 프레임워크프론트엔드 개발은 독자적인 전문 영역으로 인정받은지 얼마 되지 않았고, 변화가 무궁무진한 분야이다. 특히 JavaScript 특유의 다재다능함 때문에 선택할 수 있는 기술 스택의 조합도 많은데, 이런 다재다능함은 초심자에게 있어 단점이 되기도 한다.하나의 프레임워크를 제대로 학습하지 못했는데, 다른 프레임워크를 어설프게 학습함어떤 기술 스택을 사용할지 고민만 하다 개발 기획을 제대로 시작하지 못함개발 프로젝트에 별로 필요하지 않은 과도한 기술 스택 설치이런 상황을 막기 위해 어플리케..
Concurrent Feature (`React.lazy()`, `Suspense`)
코드 분할 (Code Spliting)번들 분할 혹은 줄이는 법React에서의 코드 분할Static ImportDynamic ImportReact.lazy()React.SuspenseReact.lazy와 Suspense의 적용React는 현재도 계속 업데이트가 되고 있는 오픈소스 라이브러리이며, 다양한 기능을 추가적으로 지원하고 있다. Hooks 역시 함수형 컴포넌트를 지원하면서 클래스형 컴포넌트에서 사용 가능했던 기능을 추가한 사례라 볼 수 있다. // React 18 버전부터는 경고문을 출력하는 기존 방식 const rootElement = document.getElementById("root"); ReactDOM.render(, rootElement); // React 18 버전부터는 createR..
Virtual DOM
Virtual DOM탄생 배경Real DOM (DOM)Virtual DOM의 기본 개념Virtual DOM이 Real DOM보다 빠른 이유Virtual DOM의 형태React Diffing AlgorithmReact가 DOM 트리를 탐색하는 방법다른 타입의 DOM 엘리먼트인 경우같은 타입의 DOM 엘리먼트인 경우자식 엘리먼트의 재귀적 처리키(key)Virtual DOMReact에는 Virtual DOM이라는 가상의 DOM 객체가 있다. 이는 실제 DOM의 사본 개념으로, React는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에 접근해 변화 전과 변화 후를 비교하고 바뀐 부분을 적용한다.탄생 배경Real DOM (DOM)Real DOM은 우리가 알고 있는 DOM과 같은 것으로, Vi..
React Hooks
Hook이란?Hook 사용 규칙useMemoMemoization예제를 통해 살펴보기useCallbackuseCallback과 참조 동등성Custom HooksCustom Hook 사용 예제 : useFetch, useInputHook이란?React의 공식문서에서는 Hook을 아래와 같이 설명한다.Hook은 React 16.8에 새로 추가된 기능입니다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다.Hook은 다르게 말하면 함수형 컴포넌트에서 상태 값 및 다른 여러 기능을 사용하기 편리하게 해주는 메소드를 의미한다. Hook은 class가 아닌 function으로만 React를 사용할 수 있게 해주는 것이기 때문에 클래스형 컴포넌트에서는 동작하지 않..
Custom Component (Styled Components, Storybook)
Component Driven Development (CDD)Styled ComponentsStyled Components 설치Styled Components 문법컴포넌트 만들기컴포넌트 재활용Props 활용Props로 조건부 렌더링하기Props 값으로 렌더링하기전역 스타일 설정StorybookStorybook 설치Storybook 기본 사용법Component Driven Development (CDD)Component Driven Development는 디자인과 개발 단계에서부터 재사용할 수 있는 UI 컴포넌트를 부품단위로 만들어 나가는 개발방법을 의미한다. 페이지 전체에 적용될 수 있는 작은 요소들(버튼, 토글, 모달 등)을 사전에 먼저 컴포넌트화 하여 해당 요소가 필요할 때 재사용하고, 이런 컴포넌트..