React와 TypeScript로 시작하는 프론트엔드 개발 로드맵

장기효(캡틴판교)

JavaScript

React

TypeScript

입문 대상

총 9개 코스

292명 참여중

조회수

7,075

40% 할인

4개 남음•전체 구매 적용

쿠폰 받기

일 잘하는 FE 개발자가
반드시 공부하는 기술이 있다?

React, Next.js, TypeScript, Webpack, Git. 프론트엔드 개발자 취업을 준비할 때, 실무에서 일을 잘하기 위해 꼭 알아야 하는 기술입니다.

이 로드맵은 취준생이나 신입 혹은 주니어 개발자가 실무에서 꼭 학습해야 하는 프론트엔드 기술 스택으로 구성되어 있어요. 로드맵과 함께라면 어려워 보이는 기술도 쉽고 빠르게 배울 수 있습니다! 프론트엔드 개발에 막 입문한 분들부터 주니어 개발자까지. 프론트엔드 실무자가 입을 모아 말하는 실무에서 꼭 알아야하는 프론트엔드 지식을 학습해 보세요.

프론트엔드 필수 기술 4대장, 왜 공부해야 할까요?

React

생산성이 높고 유지보수가 편리한 프론트엔드 필수 라이브러리.

Next.js

Next.js는 웹 앱을 제작하고 배포하는 데 강력한 도구.

TypeScript

개발 생산성은 높이고 에러 발생은 줄여주는 프론트엔드 필수 언어.

Webpack

애플리케이션의 성능을 높이고 로드 시간을 줄여주는 모듈 번들러.

로드맵 미리보기

'React와 TypeScript로 시작하는 프론트엔드 개발 로드맵'의 학습 순서와 수강평을 미리 확인해 보세요!

NEW 1. Amazing JavaScript - 입문

프론트엔드 개발을 위해 필요한 자바스크립트 기초 지식. 실무자로서 꼭 알아야 하는 필수 지식들을 쉽고 빠르게 다룹니다!

생생한 수강평 ⭐

무료 강의라고 보기에는 너무 훌륭한 명강의였습니다. 특히 비동기 함수의 처리에 대해 왜 필요한지, 어떻게 사용하여 왔는 지, 왜 그렇게 만들었는 지등 체계적으로 단계적 설명을 해 주셔서 너무 많은 것을 배웠습니다. 이번에도 역시 믿고 듣는 판교님 강의였습니다.~~

2. 만들면서 배우는 리액트 : 기초

귀여운 고양이 짤방을 만들면서 취업 필수 기술인 리액트의 기본을 학습합니다.

생생한 수강평 ⭐

리액트를 처음 공부하는 사람에게는 추천하기에 딱 좋은 구성의 강의라고 생각합니다. 리액트는 이 강의로 시작하세요~ ^^

- 수강생 이*** 님

3. 팀 개발을 위한 Git, GitHub 입문

국내 Git 베스트셀러 저자와 함께 팀 개발에서 협업할 수 있는 도구인 Git을 배웁니다.

생생한 수강평 ⭐

이렇게 짧은 시간에 깃과 깃허브를 실무에 적용할 수 있는 수준으로 이끌어 주실 줄 몰랐는데, 정말 좋은 강의 감사드립니다. 숙달되려면 개인적으로 조금 연습이 필요하겠지만 개인적으로 깃과 관련된 최고의 강의라고 생각이 듭니다.

- 수강생 돈*** 님

4. 만들면서 배우는 리액트: 컴포넌트 설계와 리팩토링

할 일 관리 앱을 만들면서 리액트의 동작 원리, 컴포넌트 설계, 리팩토링 방법을 배워봅니다.

생생한 수강평 ⭐

리액트의 핵심 개념인 state와 컴포넌트 설계에 대해서 짧은 시간에 이해할 수 있는 강의입니다. 길지 않아 가볍게 볼 수 있고, 정주행 후에 코드를 안보고 처음부터 다시 짜보면 효과적으로 학습할 수 있습니다.

- 수강생 임** 님

5. 프론트엔드 개발자를 위한 웹팩

프로젝트 환경을 분석하거나 스스로 구성할 수 있는 웹팩을 익힙니다. 새롭게 나온 웹팩 버전에 맞춰 리뉴얼되었으니, 실습 중심으로 더 쉽게 웹팩을 배워보세요!

생생한 수강평 ⭐

정말 기초부터 따라갈 수 있는 쉽고 편안한 설명, 그리고 그 쉬움을 구현해 주는 정성이 들어간 교안 (웹팩 핸드북) 덕분에 웹팩을 잘 이해하고 갑니다~ 감사합니다!

- 수강생 콩** 님

NEW 6. Next.js 시작하기

React를 시작할 때 꼭 알아야 하는 Next.js 프레임워크. 입문자 관점의 쉬운 설명과 실무자가 만족하는 심도 깊은 동작 원리 이해까지 다룹니다.

생생한 수강평 ⭐

저는 사수 없이 일하고 있는 3개월 차 개발자입니다. next.js를 가르치는 강의는 많이 보실 수 있지만, 왜?를 가르쳐 주고 궁금증을 일으키게 하는 강의는 찾기 쉽지 않다고 생각합니다. 현업에서의 꿀팁과 이 코드를 "왜" 작성해야 하는지 알려주셔서 너무 좋았습니다. 그런 의미에서 쉬지 말고 일해주십시오.. 그동안 저는 가르쳐 주신 것을 현업에 녹아내고 있겠습니다.

- 수강생 민* 님

7. React와 Vue로 배우는 TypeScript 필수 개념 (feat. ChatGPT)

실무에서 많이 사용되는 React와 Vue의 코드를 작성하면서 타입스크립트 필수 개념을 익힙니다.

생생한 수강평 ⭐

실무에서 Typescript를 사용하고 있긴 하지만 캡틴 판교님의 엄청난 팬이기에.. 강의 구매해서 들어봤습니다! 언제나 들어도 깔끔하고 쉬운 강의네요. React 강의도 기대하고 있겠습니다. 감사하고 사랑합니다!

- 수강생 콩** 님

8. 타입스크립트 입문 - 기초부터 실전까지

프론트엔드 개발 역량을 한 단계 높여줄 타입스크립트 강의입니다.

생생한 수강평 ⭐

여러 프로젝트도 만들어 보면서 따라 할 수 있어서 더 머리에 잘 들어오는 것 같습니다. 그리고 개념도 하나하나 잘 설명해 주시는 것 같아서 어려움 없이 타입스크립트 공부를 하고 있습니다. 타입스크립트를 체계적으로 배우고 싶으신 분들께 추천드려요!

- 수강생 dol*** 님

NEW 9. 프론트엔드 테스팅
능력 있는 프론트엔드 개발 실무자가 되고 싶다면 꼭 들어야 할 테스트 강의. 테스팅 입문부터 실전까지 한방에 끝냅니다.

생생한 수강평 ⭐

회사에서 테스트코드를 작성해보자고 말이 나왔는데 이전에 작성해둔 코드가 있는것도 아니고 혼자 공부해서 작성해야 하는 상황인데 구글링으로 막막하던 차에 바로 수강하였습니다. 환경 설정이나 오류 나는 부분에서 잘 설명해주셔서 다른 강의보다 따라가는 부분에서 시간을 덜 뺏기고 작업할 수 있어 좋습니다.

- 수강생 김** 님