초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.
이런 걸
배워요!
리액트 라우터를 이용한 기본적인 클라이언트 사이드 라우팅
리액트 라우터 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
안녕하세요
이웅재입니다.
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