React

<span style="background-color:문법을 사용할 수 있도록 <span style="background-color:JSX는 바로 실행할 수 있는 JavaScript 코드가 아니기에<span style="background-color:여

Single Page ApplicationSPA란 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라,화면을 업데이트하기 위해 <span style="background-color:<span style="background-color:<span st

✔️ 리액트 라우터 v6 사용법 리액트 라우터 6.3.0 버전을 설치 🧽 BrowserRouter 웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 해준다. 상위에 작성되어야 React Router

✔️ State state는 하나의 컴포넌트 안에서만 사용할 수 있는 독립적인 상태이기 때문에 전역으로 사용할 수 없다. ❗️참고) useState의 전달인자는 하나만 전달할 수 있습니다. 🧽 기본 구조 🧽 주의점 1️⃣ 직접 state를 수정하면 안된다.

✔️ React에서 로컬 스토리지 사용하기 🧽 커스텀 훅 🧽 커스텀 훅 함수로 재사용성 높이기 여러 컴포넌트에서 로컬 스토리지가 필요하다면 커스텀 훅 함수로 뽑아내서 중복되는 코드를 줄일 수 있다. 🧽 사용 예시 아래는 텍스트 박스의 텍스트 내용이 로컬 스

React에서 <span style="color:또한 상태가 많아질수록 애플리케이션은 복잡해지기 때문에 <span style="color:만일 <span style="color:이 두 자식(두 컴포넌트)의 <span style="color:❗️참고

Side Effect란 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우를 말한다.❓React 컴포넌트에서의 Side Effect는?✓ 타이머 사용(setTimeout)✓ 데이터 가져오기(fetch API, localStorage)순수함수란 입력으로 전달된 값을

▷ AJAX 🛋️ AJAX란? Asynchronous Javascript And XML AJAX란 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법이며, 자바스크립트를 통해서 <span style="color:

업로드중..아래 클래스 컴포넌트와 함수 컴포넌트는 같은 동작을 한다.클래스 컴포넌트로, 5초마다 count가 1이 증가하도록 만들었다.함수 컴포넌트로, 5초마다 count가 1이 증가하도록 만들었다.📚 이걸 봐도 이해가 안 간다면?👉 지금 바로 (공식문서)React

CSS-in-JS에서 사용 순위가 제일 높은 Styled-Component의 사용법을 알아보자💨

DOM reference를 잘 활용할 수 있는 useRef아래와 같이 &lt;span style="color:－ focus－ text selection－ media playback－ 애니메이션 적용－ d3.js, greensock 등 DOM 기반 라이브러리 활용Reac

forwardRef, callbackRef 사용법

상위 컴포넌트의 state를 props를 통해 하위 컴포넌트에게 전달할 때 전달 횟수가 5회 이상으로 많다면, Props Drilling의 문제점이 발생 할 수 있다. 그럴 때 사용하는 전역상태 관리 Redux 라이브러리

context API란 리액트에 내장된 기능으로, props를 사용하지 않아도 특정 값이 필요한 컴포넌트끼리 쉽게 값을 공유할 수 있게 해준다. 주 목적: props-drilling을 피하는 것.

Redux Toolkit이란 Redux를 편하게 사용하기 위한 리덕스 공식 개발 도구이다. saga를 제외한 나머지 라이브러리를 따로 설치하지 않고 사용할 수 있게 해준다.

React Query는 React에 종속적인 라이브러리이며, React 애플리케이션에서 데이터를 관리하고 가져오는 데 매우 유용하다.

Webpack은 프론트엔드 애플리케이션 배포를 위해서 가장 많이 사용하고 있는 번들러이다.

webpack으로 create-react-app의 거대한 라이브러리 목록을 줄이고자 직접 웹팩을 설치하여 하나씩 리액트와 그에 필요한 라이브러리를 설정할 수 있다.

렌더링 최적화를 위한 Hook인 useMemo와 useCallback에 대해 알아보자💨(React.memo는 덤!)

개발자가 스스로 커스텀한 훅을 의미하며, 반복되는 로직을 함수로 뽑아내어 재사용할 수 있다.

Suspense(대기)는 React v18부터 도입된 기능으로, 비동기적으로 데이터를 로드할 때 미리 정해진 컴포넌트를 렌더링하고,로드가 완료되면 실제 데이터를 렌더링 하는 기능이다.

TDD = Test-driven Development로, 테스트를 먼저 작성하고 테스트 통과 여부를 확인하며 개발하는 소프트웨어 개발 방법론을 말한다.

Proxy = 정석적인 과정 없이 React나 Webpack Dev Server의 proxy 기능을 사용하면 CORS 정책을 우회할 수 있다.

Redux 상태를 로컬 스토리지나 앱 내 파일 시스템에 지속적으로 저장하고 관리하기 위한 라이브러리이다.

TOAST UI Editor는 웹 페이지에서 마크다운 편집을 위한 에디터이다. 사용자 친화적인 UI와 다양한 편집 기능, 실시간 미리보기 기능 등을 제공하며, React, Vue.js, Angular 등의 프레임워크와 함께 사용할 수 있다.

js를 사용해서 유동적인 높이를 주어야 함.

input range를 대신해서 사용 할 수 있는 라이브러리이다.

간편하고 유연한 상태 관리를 도와주는 Recoil 사용법

React 기반의 UI 프레임워크로, 미리 디자인된 컴포넌트와 스타일을 제공하여 웹 애플리케이션을 빠르게 개발하고 디자인할 수 있는 도구이다.

JSON 형식으로 애니메이션을 저장하여 비교적 파일 크기가 작은 Lottie 사용법

atom을 로컬 스토리지로

Zustand 사용법