프로그래머 이도행 Details
모던 리액트로 확실하게 커리어 업그레이드
클래스 맛보기
프로그래머 이도행 클래스 1강 전격 공개
수강생 모두에게 드리는
테크니컬 디렉터 이도행의 모던 리액트 클래스만의 특별 혜택
-
리액트 프로젝트로 경험하는 커리어 성장23회차 강의 무한 학습 -
게임부터 나만의 Chat GPT까지 제작하는프로젝트 소스 코드 5개 -
필요할 때 바로바로 핵심만 골라 볼 수 있는핵심 강의 자료 PDF
-
보너스 강의'주니어 개발자를 위한 개발자의 성장 조건 5가지' -
보너스 강의'리액트 실무 활용을 위한 필수 언어 타입스크립트 기초 문법' -
성장하는 개발자를 위한 멘토링콜로소 커뮤니티를 통한 연사와의 Q&A
클래스 추천
이런 분들에게 추천합니다.
타입스크립트로 가장 최신 버전의 리액트를 마스터하고 싶은 주니어 개발자
모던 리액트로 실무 경험을 쌓고 나만의 경쟁력을 키우고 싶은 개발자 취준생
프론트엔드로 새로운 커리어를 시작하고 싶은 타 분야 개발자
수강생 리뷰
테크니컬 디렉터 이도행의 강의 후기
-
김**님개발을 잘 아는 사람은 많겠지만 이도행 코치님만큼 잘 가르쳐주시는 분은 없습니다. 마치 개별 멘토링을 하듯 충실한 커리큘럼으로 커리어 계획까지 만들어주는 강의입니다. 시작을 두려워하고 계시는 초보 개발자 분들께 반드시 추천하고 싶습니다.지루하지 않은 수업과 꼼꼼한 문제풀이로 단계마다 즐겁게 학습을 할 수 있었고, 다음 강의도 꼭 열어주시길 바라봅니다.
-
민**님현실적으로 나의 커리어를 발전시킬 수 있는 방법에 대해 진정으로 고민하게 해주는 수업이었습니다. 포장만 화려하고 실상은 허탈해지는 강의가 아닌, 솔직하고 구체적으로 수강자를 위해 유익한 정보를 알차게 전달해주는 강의였고 덕분에 개발자로서 진정으로 내게 필요한 것들에 대해 찾아갈 수 있었습니다.
-
전**님현업에서의 다양한 경험을 바탕으로 각종 개발 분야에 대한 커리어 로드를 제시해 주시고, 분류별 학습 가이드까지 잡아주신 덕분에 막막한 마음을 덜고 주니어로서 미래를 계획하는 데 정말 많은 도움을 받을 수 있었습니다. 내가 정말 개발자가 될 수 있을까? 어떻게 좋은 개발자가 될 수 있을까?와 같은 막연한 고민들에 빠져 계신 분들께서 솔루션을 얻어가실 수 있는 강의라고 생각합니다.
-
이**님진정한 개발자가 되기 위한 A to Z를 모두 알아갈 수 있는 강의였습니다. 개발자적 마인드뿐 아니라 구직 정보와 완강 후 공부법까지 구체적으로 알려주신 덕분에 저만의 방향도 설정해 나갈 수 있었습니다. 무엇보다 처음부터 끝까지 학생들을 응원해 주시는 모습에 저도 포기하지 않고 완강에 이를 수 있었습니다. 개발 직군에 관심이 있는 비전공자분들께 적극 추천합니다.
-
강**님새로운 프로그래밍 언어를 배우며 두렵고 불안하기도 했지만, 연사님의 강의를 하나하나 천천히 따라가다 보니 자신감을 갖고 해낼 수 있게 되었습니다. 특히 성장하는 개발자가 되기 위한 마인드셋이나 커리어에 대한 다양한 조언들을 통해 큰 도움을 얻을 수 있었습니다. 다른 강의들도 많이 만들어 주시길 바라봅니다!
BEFORE & AFTER
이 클래스가 특별한 이유
요즘 핫한 모던 리액트, 원리부터 쉽게 이해하기
효율적인 UI 구축과 탁월한 유지보수성으로 주목받는 리액트, 높아지는 수요에도 새로 배우기엔 막막하셨나요? 굵직한 회사에서 폭넓은 개발 경험을 자랑하는 테크니컬 디렉터 이도행이 명확한 설명과 체계적인 커리큘럼으로 실전에서 바로 응용 가능한 리액트 노하우를 모두 전해드립니다.
리액트만의 접근 방식과 선언형 UI, 더 이상 어려워하지 마세요. 코드를 해부하며 작동 원리를 제대로 이해하고, 몰입도 높은 6가지 프로젝트를 통해 리액트의 기본 개념과 최신 주요 기능을 모두 체화해봅니다. 개발자의 경쟁력을 강화시키는 트렌디한 리액트의 힘, 지금 콜로소에서 만나보세요.
클래스 예제
흥미진진한 예제로 이해하는 리액트의 모든 것
-
간단한 퀴즈 -
Tic-Tac-Toe 게임 만들기 -
반응 속도 테스트 만들기
-
To-Do 리스트 만들기 -
쿠키 클리커 -
나만의 ChatGPT
테크니컬 디렉터
이도행
안녕하세요. 테크니컬 디렉터 이도행입니다. 저는 라인게임즈, 직방, 엔씨소프트, 넥슨 등의 기업에서 다양한 프로그래밍 경력을 쌓아왔고, 경력의 절반 이상을 엔지니어링 리드나 팀 리드로 보냈습니다. 커리어 멘토로 활동하며 후배 개발자들의 성장을 지원하고, 스스로도 성장하는 개발자가 되고자 끊임없이 노력하고 있습니다.
이번 클래스에서는 게임으로 모던 리액트를 즐겁게 학습하며 다양한 분야의 개발자 여러분께 새로운 성장의 경험을 드리고자 합니다. 재밌게 학습을 진행하면서도 리액트의 원리와 노하우를 하나하나 꼼꼼히 다뤄보며 수강생분들이 리액트를 깊이 있게 이해할 수 있도록 도와드리겠습니다.

테크니컬 디렉터 이도행
현) 라인 게임즈 테크니컬 디렉터
이력 더보기
[이력]
2021~2024 직방 클라이언트 팀장
2021 엔씨소프트 시니어 소프트웨어 엔지니어
2018~2021 넥슨 엔지니어링 리드
2016~2018 넥슨 게임플레이 프로그래머
2013~2015 이스트소프트 클라이언트 프로그래머
클래스 특징
게임 제작으로 쉽고 재밌게 경험하는 모던 리액트
현시점 가장 인기 있는 프론트엔드 라이브러리, 모던 리액트를 간단한 게임 실습을 통해 쉽고 재미있게 학습해 봅니다. 단순한 이론 암기를 넘어 실무에서 바로 응용할 수 있는 숙련된 스킬을 배우고, 리액트를 학습할 수 있는 가장 즐거운 방식에 몰입해 보세요.
탄탄한 예제 실습으로 정복하는 트렌디한 리액트 & 타입스크립트
풀 사이클 프로젝트로 트렌디한 모던 리액트의 세계를 경험해 보세요. 적절한 도구와 라이브러리를 선택하고, 프로젝트에 애자일하게 통합시키며 기획부터 배포까지 실전처럼 배워봅니다. 알찬 실습으로 리액트 필수 스킬을 전부 여러분의 것으로 만들어 보세요.
성장하는 개발자를 위한 깊이 있는 리액트 핵심 인사이트 총집합
앱, 게임, 임베디드 등 어떤 분야의 개발자든 누구나 쉽게 배울 수 있도록! 원리와 흐름을 꼼꼼하게 파헤친 리액트의 핵심 인사이트를 그대로 전해드립니다. 다양한 개발 경험을 지닌 이도행 디렉터만의 확실하게 성장하는 리액트 노하우를 만나보세요.
클래스 구성
이런 것을 배웁니다
-
20분 만에 집중 공략하는 타입스크립트 핵심리액트에 적용하기 적합한 환경 설정부터 시작해 기본적인 타입스크립트의 사용법을 알아보고, 모던한 프론트엔드를 구성하는 타입스크립트만의 고유 기능과 핵심 문법을 학습해 봅니다. 실무에서 자주 쓰이는 타입스크립트의 필수 기능들을 빠르게 마스터해 보세요. -
10분만 배워도 바로 써먹는 스타일링 디자인프론트엔드 개발자의 업무에서 뗄 수 없는 핵심 요소, UI 디자인! Pico CSS를 통해 디자인을 템플릿화 하는 방법을 배우고, 커리큘럼 전반의 모든 스타일링을 관리해 봅니다. 예쁜 프로덕트로 UI의 미감과 개발자로서의 동기부여까지 함께 얻어 보세요. -
게임으로 배우는 타입스크립트의 기본 문법가장 직관적이고 흥미로운 인터랙티브 콘텐츠, 게임 제작 실습을 통해 타입스크립트와 리액트의 작동 방식을 다양하게 이해해 봅니다. 퀴즈, Tic-Tac-Toe 등 간단하고 쉬운 게임들을 통해 자연스레 타입스크립트의 기본 문법 틀을 익히고, 리액트의 핵심 기능을 빠르게 학습해 봅니다.
-
직접 만들고 즉시 활용하는 리액트의 꽃, Hook리액트를 배우며 가장 빠르게 성장하는 방법은 결국 자신만의 코드를 직접 만들고 활용해 보는 실전 학습에 있습니다. 강의에서 만든 Hook을 예제에 즉각 적용해 반응 속도 테스트 게임과 확장된 형태의 To-Do 리스트를 제작해 보고, 리액트 숙련도를 키워봅니다. -
게임 웹서비스, 제작부터 배포까지 실전 완성기획과 개발에서 시작해 하나의 프로젝트를 마무리하는 마지막 단계인 웹 배포까지 풀 사이클로 진행해 봅니다. Github 페이지를 통해 직접 제작한 쿠키 클리커 게임을 배포하고, 프로덕트를 준비하는 환경 세팅부터 하나의 웹 서비스 프로젝트가 진행되는 과정을 올인원으로 실습해 봅니다. -
GenAI API로 나만의 전용 Chat GPT 제작하기최근 개발계를 뜨겁게 달군 화두 Chat GPT와 같은 생성형 AI를 리액트로 직접 제작하는 프로젝트를 진행해 봅니다. 스스로 기획하는 웹디자인을 통해 더 편리하게 사용 가능한 나만의 Chat GPT를 만들어보세요.
* 해당 이미지는 클래스의 이해를 돕기위한 예시 이미지입니다.
- 평생 수강
- 최저가
한번 구매로, 평생 시청하세요.
12.31 (토) 가격이 인상됩니다.
조만간 가격이 인상될 예정입니다.
지금 구매하세요!
커리큘럼
커리큘럼을 보여드려요
SECTION 01. 왜 프론트엔드는 리액트가 점령했을까?
01. 모던 프론트엔드 101
- 프론트엔드의 발전 과정
- 브라우저 전쟁
- MVX Pattern의 시대
- 혼란을 종결한 리액트
02. 개발자라면 리액트와 타입스크립트를 배워봐야 하는 이유
- 리액트를 지금 당장! 배워야 하는 이유
- 리액트와 타입스크립트를 통해 얻을 수 있는 것
- 프론트 엔드 개발자가 아니더라도 리액트를 배우면 좋은 이유
SECTION 02. 리액트 시작하기
03. 시작이 반이다. : 개발환경 구축하기 (eslint, prettier, vscode, pico)
- Node.js 와 VSCode 설치
- 프로젝트 환경 세팅(eslint, prettier)
04. 모던한 프론트엔드를 구성하는 스크립트 언어 : 20분 만에 완성하는 타입스크립트
- 타입스크립트의 선언 방식
- 타입스크립트의 기본 타입들
- 타입스크립트의 타입 확장 방식
- 타입스크립트 심화
05. 프론트의 모든 건, 예쁘지 않으면 안 된다 :10분 만에 완성하는 리액트 스타일링
- CSS 스타일링 개요
- Classless CSS에 대한 소개
- Pico 다뤄보기
06. 리액트는 어떻게 표현될까? : React element 와 component
- 리액트의 엘리먼트와 컴포넌트
- 리액트의 모든 시작은 "불변성" 철학이다.
- 리액트가 표현하는 방법
- (실습)카운터 어플리케이션 만들기
07. TSX로 첫 리액트 컴포넌트 만들기 - 간단한 퀴즈 만들기
- 생산성 괴물 JSX/TSX 소개
- TSX 표현식 배우기
- 조건부 렌더링
- 어트리뷰트와 Props
- 리액트의 그룹화
- (실습)퀴즈 어플리케이션 만들기
08. 모던 컴포넌트 Functional Compoent - 간단한 To-Do 리스트 만들기
- 리액트 컴포넌트의 발전과정
- Stateless vs Stateful
- 불변성과 연결되는 Pure Function
- (실습)To-do 리스트 만들기
09. Tik-Tac-Toe 게임 만들기
- Tic-Tac-Toe 컴포넌트 제작
- Tic-Tac-Toe의 승리 로직 연결하기
- Tic-Tac-Toe 완성하기
SECTION 03. 리액트의 꽃, Hook
10. 리액트의 남은 반은 'Hook' 이다.
- 리액트를 최고로 만든 Hook
- Hook의 위치와 Hook 사용방법
- 다양한 기본 Hook 소개
11. useState와 useEffect만 제대로 알아보자
- useState와 useEffect Hook 소개
- useState는 어떻게 구현되어있는가?
- useEffect는 어떻게 구현되어 있는가?
- (실습) useState/useEffect 연습해보기
12. 기본 Hook들 실습하기
- 그외의 기본 Hook들 소개
- (실습) 기본 Hook들 실습해보기
13. 나만의 Hook을 만들어보자
- 나만의 Hook 만들어보기
- (실습) useTimeout 만들어보기
- (실습) useClickEffect 만들어보기
14. 반응 속도 테스트 게임 만들기
- 반응 속도 게임 소개
- 반응 속도 게임 만들어보기 (useTimeout이용)
15. To-Do 리스트 확장해서 트렐로 처럼 만들기
- 8강의 To-Do 리스트 점검해보기
- react-dnd 소개
- To-Do 리스트를 트렐로처럼 확장하기
SECTION 04. 쿠키 클리커 만들기
16. 쿠키 클리커 게임 기획하기
- 쿠키 클리커 게임 소개
- 쿠키 클리커의 기본 기획
- 쿠키 클리커 완성된 모습
17. 쿠키 클리커 컴포넌트 만들기
- 프로젝트 세팅하기
- 기본적인 UI와 컴포넌트 제작하기
18. 쿠키 클리커 Hook 연결하기
- 컴포넌트들을 이용해서 Hook 연결하기
- 연결된 Hook을 통해 쿠키클리커 완성하기
19. 쿠키 클리커 배포해보기(Github page)
- Github Page 소개
- Github Page용으로 React를 패키징해보기
- Github Page로 배포해보기
SECTION 05. 나만의 ChatGPT 만들기
20. 나만의 ChatGPT 기획하기
- 나만의 ChatGPT 소개
- 나만의 ChatGPT의 기본 모습을 기획해보기
- 나만의 ChatGPT가 완성된 모습
21. 나만의 ChatGPT 컴포넌트 만들기
- Nextjs로 프로젝트 세팅하기
- 기본적인 UI와 컴포넌트 제작하기
- React 18에 나온 Server Component와 서버사이드 렌더링에 대한 소개
22. 나만의 ChatGPT에 Hook과 API 연동하기
- ChatGPT API 혹은 Claude API 토큰 만들기
- 백엔드 API를 이용해 API 연결하기
- Hook들과 최종 연결하기
23. 나만의 ChatGPT 배포 (Vercel)
- Vercel 소개
- 프론트와 백엔드 모두 배포해보기
인터뷰
테크니컬 디렉터 이도행
사용 프로그램 안내드립니다.
본 강의는 Visual Studio Code, Node.js 로 진행되며,
원활한 수강을 위해 가장 최신 버전의 해당 프로그램을 별도로 구매 및 설치해주시길 바랍니다.
*프로그램 및 준비물은 별도로 제공하지 않습니다.
추천 클래스
당신이 놓치지 말아야 할
추천 클래스
