React를 배우는 것은 처음에는 어려울 수 있습니다, 특히 시작하는 방법을 모르거나 비어 있는 코드 편집기를 바라보고 있는 경우에는 더욱 그렇습니다. 그러나 적절한 코스를 통해 핵심 개념을 이해하고 실전 경험을 쌓을 수 있습니다. 이를 통해 실제 프로젝트를 개발하면서 실력을 향상시킬 수 있습니다.

우리는 freeCodeCamp.org YouTube 채널에 현대적인 React를 가장 매력적이고 실전적인 방식으로 가르치는 코스를 방금 출시했습니다. Scrimba의 Bob Ziroll이 제작한 이 코스에는 170개 이상의 코딩 도전 과제와 6개의 흥미로운 프로젝트가 포함되어 있습니다. 이 코스를 마치면 실제 문제를 해결하는 React 애플리케이션을 개발할 수 있는 기술과 자신감을 갖게 될 것입니다. Bob의 이전 React 코스는 React를 배우는 가장 인기 있는 방법 중 하나이며, 그는 이번 코스를 완전히 새롭게 업데이트하여 최신 React 개념을 가르칩니다.

이 코스에서 배울 내용

이 코스는 기초부터 시작하여 점진적으로 더 복잡한 개념으로 진행되는 6개의 포괄적인 섹션으로 구성되어 있습니다:

  1. React 기초
    JSX, 컴포넌트, 프롭스, 상태 및 React의 선언적 및 조립 가능한 디자인 원칙을 포함한 React의 기초에 대해 알아봅니다. 첫 번째 프로젝트인 ReactFacts는 기능적인 컴포넌트를 구축하고 스타일을 적용하는 간단하고 재미있는 소개입니다.

  2. 여행 저널 프로젝트
    재사용 가능한 구성 요소를 만들고 프롭과 함께 작업하는 방법을 배웁니다. JavaScript의 .map() 함수를 사용하여 여행 저널을 동적으로 렌더링하여 기능적이고 시각적으로 매력적으로 만듭니다.

  3. 셰프 클로드 프로젝트
    레시피 앱을 구축하면서 상태 관리와 폼을 탐색합니다. 이벤트 처리, 조건부 렌더링 및 배열 및 객체를 사용한 복잡한 상태 관리를 연습합니다. 이 섹션을 마치면 React에서 사용자 상호작용을 처리하는 방법에 대한 깊은 이해를 갖게 됩니다.

  4. 밈 생성기 프로젝트
    API에서 데이터를 가져와 React의 useState 및 useEffect 훅을 사용합니다. 밈 이미지를 동적으로 로드하고 사용자 정의하는 밈 생성기를 만들어 데이터 가져오기와 제어 컴포넌트에 대한 경험을 얻을 수 있습니다.

  5. 텐지스 게임
    사용자가 주사위를 굴리고 보유하고 일치시켜 승리할 수 있는 주사위 굴리기 게임을 만듭니다. 이 프로젝트는 React에서 컴포넌트 스타일링, 조건부 로직 및 게임 메카닉을 연습하기에 좋습니다.

  6. 어셈블리 엔드게임 프로젝트
    마지막 프로젝트로 단어 추측 게임을 진행하여 고급 기능을 계획하고 구현하는 능력을 도전하게 됩니다. 이는 접근성 향상, 상태 공유 및 대화형 UI 컴포넌트를 포함한 고급 기능을 연습하는데 도움이 됩니다.

개발 환경을 강화하는 팁 및 도구로 수없이 디버깅 및 생산성을 간소화하는 VS Code 확장 프로그램 및 React 개발 도구가 포함된다.

결론

현대적인 React 세계로 첫 걸음을 내딛을 준비가 되셨나요? freeCodeCamp.org YouTube 채널의 강의를 확인해보세요 (16시간 분량).