초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.
이런 걸
배워요!
리액트 라우터를 이용한 기본적인 클라이언트 사이드 라우팅
리액트 라우터 6.4 이후에 새롭게 추가된 Data APIs 사용법
SPA 개발의 코어! 리액트 라우터
핵심만 빠르고 간결하게 알려드립니다.
리액트 개발자라면 꼭 알아야 할
React Router 완전 정복
SPA(싱글 페이지 애플리케이션) 웹 앱을 개발할 때 사용하는 React Router(react-router-dom, 리액트 라우터)를 다룹니다.
리액트를 할 줄 아는 프론트엔드 개발자라면, React Router를 당연히 알고 있어야 합니다. 하지만 중요도에 비해 적당히 아는 만큼만 사용하는 경향이 강합니다.
이 강의에서는 브라우저 주소창과 리액트 애플리케이션 사이의 관계를 도와주고, 발전시키고 있는 최신 버전 react-router-dom 라이브러리를 배우게 됩니다.
강의 특징
코드를 타이핑하며 익힙니다
코드를 직접 타이핑하며 React Router의 기능과 사용법을 자연스럽게 익힐 수 있도록 구성하였습니다.
빠르고 간결한 호흡으로 진행합니다
흐름을 따라가며 단기간에 React Router의 개념을 배울 수 있습니다.
💡 수강 전 확인해주세요
- 실습은 macOS 환경에서 진행되었습니다. 하지만 Windows에서도 가능합니다.
- Node.js 및 Visual Studio Code를 사용합니다.
- React에 대해 기본적인 학습을 마친 상태로 가정하고 수업을 진행합니다.
- 실습의 속도가 빠르게 느껴질 수 있습니다. 흐름을 이해하며 빠르게 보시는 것을 의도하였습니다. 또한, 빠르게 언급되는 개념들이 다소 어려울 수 있습니다. (질문을 남겨주시면 어렵게 느껴지는 개념들에 대해 보강할 계획이 있습니다.)
이런 분들께
추천드려요!
학습 대상은
누구일까요?
리액트 라우터에 대해 빠르고 자세히 학습하고 싶은 리액트를 막 배운 초보 프론트엔드 개발자
리액트 라우터를 사용해야 하는데 단기간에 개념을 익히고 싶은 프론트엔드 개발자
선수 지식,
필요할까요?
React
JavaScript
안녕하세요
이웅재입니다.
수강생 수
11,456
수강평 수
119
강의 평점
4.7
강의 수
5
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분)
수업에 대한 설명
01:45
개발 환경에 대한 안내
03:35
Nested Routes 구성해보기
04:12
useMatch 로 모든 경로 다루기
03:57
나만의 Custom Link 만들기
02:10
Lazy Loading
04:36