Thumbnail
개발 · 프로그래밍 프론트엔드

React Router 완전 정복 대시보드

(4.5)
2개의 수강평 ∙  33명의 수강생

55,000원

지식공유자: 이웅재
총 27개 수업 (1시간 56분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

React 로 SPA를 만드는 모든 사람들에게 필수인 React Router를 함께 정복해보아요 💪

✍️
이런 걸
배워요!
리액트 라우터를 이용한 기본적인 클라이언트 사이드 라우팅
리액트 라우터 6.4 이후에 새롭게 추가된 Data APIs 사용법

 SPA 개발의 코어! 리액트 라우터 
핵심만 빠르고 간결하게 알려드립니다.

리액트 개발자라면 꼭 알아야 할 
React Router 완전 정복

SPA(싱글 페이지 애플리케이션) 웹 앱을 개발할 때 사용하는 React Router(react-router-dom, 리액트 라우터)를 다룹니다. 

리액트를 할 줄 아는 프론트엔드 개발자라면, React Router를 당연히 알고 있어야 합니다. 하지만 중요도에 비해 적당히 아는 만큼만 사용하는 경향이 강합니다.

이 강의에서는 브라우저 주소창과 리액트 애플리케이션 사이의 관계를 도와주고, 발전시키고 있는 최신 버전 react-router-dom 라이브러리를 배우게 됩니다.

강의 특징

코드를 타이핑하며 익힙니다

코드를 직접 타이핑하며 React Router의 기능과 사용법을 자연스럽게 익힐 수 있도록 구성하였습니다.

빠르고 간결한 호흡으로 진행합니다

흐름을 따라가며 단기간에 React Router의 개념을 배울 수 있습니다.

따라하고 복습해보세요 
학습 자료를 제공합니다

  • Notion을 통해 강의에 활용한 문서와 추가적인 레퍼런스를 제공합니다. (주기적으로 업데이트될 예정입니다.)
  • Github에서 강의에 활용한 코드를 제공합니다.

💡 수강 전 확인해주세요

  • 실습은 macOS 환경에서 진행되었습니다. 하지만 Windows에서도 가능합니다.
  • Node.jsVisual Studio Code를 사용합니다.
  • React에 대해 기본적인 학습을 마친 상태로 가정하고 수업을 진행합니다.
  • 실습의 속도가 빠르게 느껴질 수 있습니다. 흐름을 이해하며 빠르게 보시는 것을 의도하였습니다. 또한, 빠르게 언급되는 개념들이 다소 어려울 수 있습니다. (질문을 남겨주시면 어렵게 느껴지는 개념들에 대해 보강할 계획이 있습니다.)

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
리액트 라우터에 대해 빠르고 자세히 학습하고 싶은 리액트를 막 배운 초보 프론트엔드 개발자
리액트 라우터를 사용해야 하는데 단기간에 개념을 익히고 싶은 프론트엔드 개발자
📚
선수 지식,
필요할까요?
React
JavaScript

안녕하세요
이웅재 입니다.
이웅재의 썸네일

14년차 소프트웨어 엔지니어 입니다.

 

2021년 부터는 NHN Dooray 에서 프론트엔드개발팀을 리드하며, 서비스 전체의 UI 에 대한 책임을 맡았습니다. 팀을 맡아 기존에 운영하고 있던 레거시 시스템(AngularJS, Vue)을 React, TypeScript 로 리뉴얼 하였습니다. 10인 이상의 다수 프론트엔드 엔지니어들이 하나의 프러덕트를 함께 개발할 수 있도록 아키텍처를 설계하고 관리하는 업무를 하고 있습니다. 전체 서비스 규모가 크고 복잡도가 높아 Monorepo 로 개발 및 운영하고, Micro Frontend 를 도입하여 배포 주기 단축에 대해 노력해왔습니다. Storybook 을 통해 컴포넌트를 적극적으로 관리하며, Design System 을 구축하고 활용이 될 수 있도록 프로세스를 다듬는 역할을 했습니다.

 

이전에는 Studio XID 에서 TypeScript 와 Electron 을 이용하여, 디자이너를 위한 인터렉션 프로토타이핑 툴인 ProtoPie 를 만들었습니다. 한가지 제품을 약 4년동안 만들면서 좋은 코드, 품질이 좋은 코드를 작성하기 위해 노력해왔습니다.

 

대규모 자바스크립트 어플리케이션 개발에 대한 더 나은 방향을 고민하고, 적용하기 위해 노력하고 있습니다.
Microsoft MVP (TypeScript) 로 활동해 왔으며, 최신 웹기술에 대해 사람들과 이야기 하는 것을 즐깁니다.

 

여러 곳에서 프론트엔드 팀을 이끌며, 주로 함수형 언어(클로저)나 Node.js 로 백엔드 작업을 진행합니다.
인프라 자동화에 대한 관심이 많습니다.

커리큘럼 총 27 개 ˙ 1시간 56분의 수업
이 강의는 영상이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. Basic Features
BrowserRouter, Routes, Route 로 url 경로에 맞는 엘리먼트 보여주기 미리보기 02:43
Link 로 Client Side Routing 이해하기 02:42
Nested Routes 구성해보기 04:12
useParams 로 Dynamic Segments 처리하기 01:39
Ranked Route Matching 이해하기 01:32
useMatch 로 모든 경로 다루기 03:57
NavLink 로 active 상태 표현하기 04:35
나만의 Custom Link 만들기 02:10
useSearchParams 로 URL query string 활용하기 02:08
섹션 2. React Router with Data APIs
RouterProvider 와 createBrowserRouter, createRoutesFromElements 로 Data APIs 시작하기 04:14
Route 컴포넌트가 아닌 router 오브젝트로 Data APIs 시작하기 02:34
loader 와 useLoaderData 이용하기 03:07
action 과 Form 을 이용해서 submit 처리하기 08:26
Form 대신 fetcher.Form 활용하기 01:21
action 의 request 와 params 사용하기 03:53
errorElement 를 이용해서 Error 다루기 03:13
Lazy Loading 04:36
defer 로 로더 지연시 UI 보여주기 미리보기 02:31
섹션 3. 원리 이해하기
브라우저와의 상호작용 살펴보기 07:38
표준 API 로 라우팅 처리 작성하기 (1) 08:02
표준 API 로 라우팅 처리 작성하기 (2) 09:25
Remix 팀의 history 라이브러리 알아보기 (1) 09:15
Remix 팀의 history 라이브러리 알아보기 (2) 06:03
React Router 프로젝트 살펴보기 04:57
어떤 Router 를 사용해야 할까요? 06:00
강의 게시일 : 2023년 09월 14일 (마지막 업데이트일 : 2023년 09월 14일)
수강평 총 2개
수강생분들이 직접 작성하신 수강평입니다.
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
tessjds thumbnail
4
loader 이후 action, fetcher등 왜 이걸 설명하는지 언제 써야하는지에 대한 상세한 설명이 부족하여 따로 구글링하였습니다.
2024-02-10
박찬양 thumbnail
5
쉽고 정확하게 설명해 주셔서 이해가 잘 됩니다. 좋은 강의 감사합니다!
2023-08-23