React 실습 랩

Name: React 실습 랩
Author: Labby

본 과정은 React 를 위한 다양한 랩을 포함하고 있으며, 각 랩은 상세한 가이드와 솔루션을 제공하는 작은 React 프로젝트입니다. 이 랩들을 완료함으로써 React 기술을 연습하고, 코딩 실력을 향상시키며, 깨끗하고 효율적인 코드를 작성하는 방법을 배울 수 있습니다.

웹 개발

💡 이 튜토리얼은 영어로 번역되었습니다. 원본을 보려면 영어로 전환

강의 계획

재사용 가능한 React 스피너 생성

React 이메일 링크 컴포넌트 생성

제어되지 않는 Textarea 요소

제어되지 않는 입력 필드

제어되지 않는 범위 입력 (Uncontrolled Range Input)

React 동적 리스트 컴포넌트

기본 데이터로 동적 React 테이블 만들기

객체 테이블 뷰

제어되지 않는 Select 요소

자동 텍스트 링크

React useComponentDidMount 훅

React useComponentWillUnmount 훅

React useIsomporphicEffect 훅

React useOnGlobalEvent Hook

React useOnWindowResize Hook

React useUnload 훅

React useOnWindowScroll 훅

React 캐러셀 컴포넌트 생성

React useEventListener 훅

React useFetch 훅

React useInterval 훅

React useMediaQuery 훅

React usePortal 훅

React useScript Hook

React useTimeout 훅

React useWindowSize 훅

React useClickInside 훅

React useClickOutside 훅

제어된 입력 필드

React 에서 이미지 지연 로딩 구현하기

문자 제한 Textarea

단어 제한이 있는 Textarea

React 에서 재사용 가능한 모달 컴포넌트 만들기

React useAsync 훅

React useComponentDidUpdate 훅

React useCopyToClipboard 훅

React useDebounce Hook

React useDefault 훅

React useEffectOnce 훅

React useError 훅

React useForm 훅

React useGetSet 훅

React useHash 훅

React useLocalStorage 훅

React useMergeState Hook

React usePersistedState Hook

React usePrevious Hook

React useRequestAnimationFrame 훅

React useSearchParam Hook

React useSessionStorage 훅

React useTitle 훅

React useUpdate 훅

파일 드래그 앤 드롭 영역

React useHover 훅

React useKeyPress Hook

React 를 이용한 접을 수 있는 아코디언 구현

닫을 수 있는 React 알림 생성

React 접을 수 있는 컴포넌트 만들기

React 카운트다운 타이머 컴포넌트

React 로 별점 컴포넌트 만들기

재사용 가능한 React 토글 컴포넌트

React 맞춤형 툴팁 생성하기

React useNavigatorOnLine 훅

React useToggler 훅

다중 선택이 가능한 상태 저장 체크박스

리플 효과 버튼

React useBodyScrollLock 훅

React useMutationObserver 훅

React useDelayedState Hook

재사용 가능한 React 탭 컴포넌트 제작

확장 가능한 객체 트리 뷰

React useIntersectionObserver 훅

React useMap 훅

React useSet Hook

React useSSR Hook

소개

이 포괄적인 React 실습 랩 과정은 일련의 실전 프로젝트를 통해 React 의 기본기를 마스터할 수 있도록 설계되었습니다. 실용적인 적용에 중점을 둔 이 과정은 React 기술을 연마하고 동적 웹 애플리케이션 구축을 위한 강력한 기반을 구축할 수 있는 특별한 기회를 제공합니다.

🎯 과제

본 과정에서 다음을 배우게 됩니다:

React 개발 환경을 설정하고 새로운 React 프로젝트를 생성하는 방법
컴포넌트, state, props 와 같은 React 의 핵심 개념 이해
일반적인 React 패턴 및 모범 사례 구현
함수형 및 클래스 기반 컴포넌트를 포함한 다양한 React 컴포넌트 구축
React 애플리케이션에서 state 및 데이터 흐름 관리
React hooks 를 활용하여 state 관리 및 라이프사이클 메서드 단순화
React 를 다른 라이브러리 및 프레임워크와 통합
성능 및 확장성을 위해 React 애플리케이션 최적화
React 프로젝트에 대한 테스트 및 디버깅 기술 구현

🏆 성과

본 과정을 완료하면 다음을 수행할 수 있습니다:

React 기반 웹 애플리케이션을 자신 있게 생성하고 배포
React 의 핵심 원칙과 모범 사례에 대한 깊이 있는 이해를 보여줍니다.
React hooks 를 효과적으로 사용하여 애플리케이션에서 state 및 라이프사이클을 관리
복잡하고 기능이 풍부한 웹 애플리케이션을 구축하기 위해 React 를 다른 기술 및 라이브러리와 통합
깨끗하고 유지 관리 가능하며 효율적인 React 코드 작성
업계 표준 도구 및 기술을 사용하여 React 애플리케이션 문제 해결 및 디버깅
잠재적인 고용주 또는 고객에게 React 기술 및 포트폴리오 프로젝트를 선보입니다.

강사

Labby

Labby is the LabEx teacher.