로드맵 썸네일

우아한형제들 프론트엔드 시니어 개발자의 웹 개발 로드맵

김정환

React
Node.js
Webpack
초급 강의 아이콘

초급 대상

4개 강의

로드맵 참여중인 유저 프로필 사진
로드맵 참여중인 유저 프로필 사진

376명 참여중

40% 할인

9개 남음전체 구매 적용
쿠폰 받기

로드맵 상세

웹 개발의 핵심 기술을
이해할 수 있도록 📌

이 로드맵은 빠른 웹 기술 유행에서 변하지 않는 핵심 기술을 배울 수 있는 학습 과정입니다. 기본기를 단단히 다져놔야 다양한 최신 기술을 이해하는 힘이 생기기 때문입니다.

웹 기술의 구조와 동작 원리를 이해하는 것이 로드맵의 목표입니다. 기술의 역할을 제대로 이해해야만 적재적소에 사용할 수 있기 때문이에요. 모든 이론 수업 후에는 이를 적용할 수 있는 실습을 마련해서 기술을 사용하는 방법도 익힐 수 있습니다. 이론과 실습의 반복을 통해 스스로 학습할 수 있는 능력을 키우실 수 있을 것입니다.

웹 기술의 원리 이해

웹 기술 사용법 습득

스스로 학습할 수 있는 능력 배양


이런 분들께 추천해요 🙋

학생 / 취준생 / 주니어 개발자

웹 개발자로 일하고 싶은데 어떻게 역량을 쌓아야 할지 막연할 수 있는데요. 그런 분들을 위해 그동안 만든 수업을 순서에 맞춰 구성했습니다.

웹 프론트엔드 역량을 키우고 싶은 백엔드 개발자

일을 하다 보면 본인이 맡은 개발 영역을 넘어서야 하는 시기가 있는데요. 이때 프론트엔드 개발에 관심이 있거나 해당 업무를 앞두신 분이라면 이 로드맵을 통해 프론트엔드 영역까지 나아가 보세요.


이런 걸 배워요 📚

[리액트 1부] 만들고 비교하며 학습하는 리액트

리액트의 핵심이 되는 진짜 기본 개념. 컴포넌트, 상태, 이벤트 처리, 조건부/리스트 렌더링, 컴포넌트 생명주기 등 리액트를 사용하는 개발자라면 반드시 알고 넘어가야 하는 개념을 배웁니다. 컴포넌트 역할 분담, 상태 끌어올리기 컴포넌트 재사용, 조합하는 방법을 통해 리액트 컴포넌트 설계 방법을 익혀 보세요.

[리액트 2부] 리액트 고급주제와 훅

리액트를 잘 사용하기 위해 반드시 알아야 할 고급 주제. 컨택스트,  고차 컴포넌트, 포탈 등 1부에서 다루지 않은 개념을 학습하고 이를 활용한 응용 기술을 직접 구현할 수 있습니다. 기본 훅과 추가 훅의 구조를 이해하고 함수 컴포넌트에서 효율적으로 사용하는 노하우를 배울 수 있습니다.

프론트엔드 개발 환경의 이해와 실습

이미 만들어 놓은 개발 환경을 이해할 수 있어요. 아예 처음부터 직접 개발 환경을 만들 수도 있고요. 웹팩을 이용해 모듈 시스템을 사용하고 개발 환경을 자동화하는 방법, 바벨을 사용해 최신 자바스크립트 문법을 사용할 수 있는 환경 구성, 린트를 사용해 동료와 협업하는 개발 환경을 만드는 방법을 배웁니다.

테스트주도개발(TDD)로 만드는 NodeJS API 서버

자바스크립트 언어로 백엔드 개발을 할 수 있는 NodeJS를 학습하고, 테스트 주도 개발(TDD) 방법으로 NodeJS를 이용해 API 서버 개발을 할 수 있습니다. 또한 NodeJS의 대표적인 웹 프레임워크 ExpressJS의 기초 원리를 이해하고, 모바일과 웹 서비스에서 사용하는 REST API 개발 방법을 학습할 수 있습니다.


로드맵 특장점 ⭐

확실한
원리 이해

본 로드맵에선 프론트엔드부터 시작해 백엔드 개발까지의 웹 개발 전반의 주요 지식을 공부할 수 있습니다. 각 기술의 구조를 탐구하고 원리를 이해하기 위한 이론 수업을 준비했는데요. 단순히 라이브러리를 사용하는 것에만 그치지 않고 기술의 목표와 의도, 그리고 애플리케이션에서의 역할을 완전히 이해하는 것이 특징입니다.

철저한
반복 실습

각 이론 수업 뒤에는 곧장 이를 활용할 수 있는 실습이 뒤따라오는데요. 반복되는 실습을 통해 기술 사용법을 몸에 익히려는 의도 입니다.


지식공유자 소개 ✒️


수강평 미리보기 👀

그동안 수강해 주신 분들의 수강평 중에 자랑할 만한 리뷰입니다. 수업 의도가 수강자 분들께 잘 전달되는 모습을 보면 뿌듯하고 보람을 느낍니다.

★★★★★

리액트를 처음 공부하며 어떻게 시작해야 할지 어려움이 있었는데, 간결하게 강의를 구성해 주신 덕분에 많은 도움을 받고 있습니다. 한 강의 당, 그리고 전체 강의 구성이 길지 않은 덕에 여러 번 반복해서 볼 수 있을 것 같다는 점도 장점입니다 :)

한편, 바닐라 자바스크립트도 다뤄주심으로 리액트가 어떤 문제점을 해결하기 위해 나타난 프레임워크인지 파악하기에 수월했습니다. 하지만 아직 둘 다 어려운 건 마찬가지네요.. ㅎ_ㅎ 이후로도 여러 번 보고 구현해가며 프론트엔드 개발 기초를 잘 다지도록 해야겠습니다. 좋은 강의 감사합니다.

"[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)" 수강평

★★★★★

웹팩을 참 막연하게 사용하고 있었는데 웹팩을 이해하는 데 정말 큰 도움이 되었습니다. 웹팩을 쓰고는 있지만 뭐가 어떻게 돌아가는 건지 아직도 감이 안 온다.. 하시는 저 같은 분들에게 정말 100번 추천하고 싶습니다. 보다가 재밌어서 새벽 늦게까지 볼 정도로 흥미롭게 봤습니다. 웹팩 심화까지 먼저 보고 아직 바벨, 린트는 못 봤는데 나머지 강의도 잘 보겠습니다! 좋은 강의 만들어 주셔서 정말 감사합니다. :D 김정환님 강의는 믿고 봅니다...

"프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)" 수강평

★★★★★

스프링만 공부하다, Nodejs를 공부하기 위해 처음 구매한 강의입니다. 공부했었던 스프링과 Nodejs를 차이점을 생각하며 배우니까 더 재밌는 것 같습니다. 특히나 Nodejs + Express 로 서버만을 구성하는 것이 아닌 TDD가 가미되어, 서버를 개발하는 과정을 더 잘 이해할 수 있었던 것 같습니다. 개인적으로는 김정환님의 심화된 Node.js 백엔드 강의가 나왔으면 하는 바램입니다. 잘 배우고 갑니다!

"테스트주도개발(TDD)로 만드는 NodeJS API 서버" 수강평

 

로드맵 상세

로드맵에 포함된 강의 썸네일
[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
리액트의 핵심이 되는 진짜 기본 개념

55,000

40% 할인

9개 남음전체 구매 적용
쿠폰 받기