[KR] 241230 - KDC 프로그래머 이도행 최종 버전 Details
개발자 커리어 확장을 위해 쉽게 배우는
최신 리액트&타입스크립트
프로그래머 이도행
학습 정보를 확인하세요!
모집 기간 2025년 1월 23일(목) ~ 2월 13일(목) 23:59
수강 기간
2025년 2월 17일(월) ~ 3월 24일(월)
수강료
322,500원 (내일배움카드 90% 지원, 자기부담금 32,250원 결제)
C/C++과 Java에 익숙해도 React는 막막하지 않으신가요?
React의 원리를 제대로 이해하고,
최신 기술로 확장성과 유지보수 높은 코드를 작성해보세요.
블로그 후기작성하고 국비지원부터 콜로소 유료강의까지 !
새해엔 배움이 X2
최대 40만원 상당 콜로소 유료 강의 제공
콜로소 온라인 단기 완성반만의
초강력 혜택 한 눈에 보기
수강생 모두에게 드리는
테크니컬 디렉터 이도행의 모던 리액트 클래스만의 특별 혜택
-
리액트 프로젝트로 경험하는 커리어 성장23회차 강의 무한 학습 -
게임부터 나만의 Chat GPT까지 제작하는프로젝트 소스 코드 5개 -
필요할 때 바로바로 핵심만 골라 볼 수 있는핵심 강의 자료 PDF
-
보너스 강의'주니어 개발자를 위한 개발자의 성장 조건 5가지' -
보너스 강의'리액트 실무 활용을 위한 필수 언어 타입스크립트 기초 문법' -
성장하는 개발자를 위한 멘토링수강생들이 궁금해 하는 핵심적인 질문들에 현직 실무자 멘토님들이 실시간으로 답변해드립니다.
잠깐, 내일배움카드만 있다면
교육 과정은 물론 혜택까지 챙길 수 있습니다!
-
내일배움카드가 이미 있어요!
로그인 후 수강 신청하세요.
-
내일배움카드가 아직 없어요!
신청서 제출 후 카드 발급을 직접 도와드릴게요.
POINT 1
넥슨과 NC소프트 출신,
실무 경험으로 검증된 개발 전문가!
국내 최대 게임기업에서 다져진 실무 노하우
넥슨과 NC소프트에서 수년간 개발자로 활약하며 쌓아온 실무 경험을 바탕으로, 실전에서 바로 통하는 개발 스킬을 전달합니다. 단순한 이론 강의가 아니라, 현업에서 실제로 사용되는 노하우와 트렌드를 배우며 한 단계 더 성장할 기회를 제공합니다. 최고의 강사진과 함께 시작하세요!
POINT 2
게임처럼 재미있게! 지루할 틈 없는 개발 강의
수료생 100% 만족, 게임 기반 학습의 즐거움
게임을 활용한 학습 방식으로 지루할 틈 없이 재미있게 배우세요. 강의 중 지친다는 말은 금물! 수강생들의 열띤 호응과 100% 수강 완료율이 이를 증명합니다. 새로운 방식으로 배우고, 강의를 듣는 순간순간 흥미와 성취감을 느낄 수 있는 경험을 제공합니다.
POINT 3
실습 중심 커리큘럼으로 완성도 높은 포트폴리오 제작
실습이 곧 학습이다, 실전형 포트폴리오 완성
실습을 최우선으로 설계된 커리큘럼을 통해, 수강생 여러분의 포트폴리오가 더욱 빛나게 됩니다. 강의 중 배우는 내용을 실제 프로젝트에 바로 적용하며, 완성도 높은 결과물을 만들어낼 수 있습니다. 실무에 활용 가능한 포트폴리오를 손에 쥐고, 자신 있게 다음 도전을 준비해 보세요!
BIG 혜택 부활!
이번 기회 놓치면 끝!
클래스 예제
흥미진진한 예제로 이해하는 리액트의 모든 것
-
간단한 퀴즈 -
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를 만들어보세요.
* 해당 이미지는 클래스의 이해를 돕기위한 예시 이미지입니다.
커리큘럼
커리큘럼을 보여드려요
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 소개
- 프론트와 백엔드 모두 배포해보기
인터뷰
테크니컬 디렉터 이도행
Question.01
평소 작업 시 스스로의 강점은 무엇이라고 생각하시나요?
통찰력이라고 생각합니다. 개발자로서 무언가를 새로 학습할 때마다 피상적인 이해를 넘어 기술의 개념과 근본 원리를 파헤치고 새로운 통찰을 얻고자 노력합니다. 이러한 태도를 통해 개발자로서 성장을 이루고 문제 해결 능력을 키울 수 있었습니다. 또한 이를 바탕으로 많은 후배 개발자분들을 멘토링하며 선한 영향력을 실천해온 것 역시 저만의 강점이라고 생각합니다.
Question.02
말씀해주신 연사님만의 강점이 해당 강의의 커리큘럼에 어떻게 녹아 있을까요?
제가 게임 개발자로서 리액트를 통해 느낀 인사이트를 심층적으로 공유해 드리려 합니다. 리액트는 웹 개발에 주로 사용되지만, 분야를 막론하고 모든 개발자에게 유용한 기술입니다. 단순 예제와 실습을 넘어 훅의 원리와 내부 동작 방식 등 기존에 찾아보기 어려웠던 깊이 있는 내용까지 다루면서 리액트를 통해 확실하게 성장할 수 있는 법을 알려드립니다.
Question.03
이번 강의의 기획 의도와 연사님께서 생각하시는 차별화 포인트는 무엇일까요?
이번 강의는 개발자라면 누구나 들을 수 있는 리액트 클래스로 기획되었습니다. 개발자로서 리액트를 배우고, 타입스크립트 기반의 모던 리액트를 복습하고자 할 때 가장 효율적이고 빠르게 학습할 수 있는 방법을 제시해 드리려 합니다. 리액트는 지난 10년 이상 진화해 온 프론트엔드 프레임워크 발전의 정점에 있는 기술입니다. 이 강의에서는 리액트가 모든 개발자에게 영감을 줄 수 있는 이유와 리액트의 핵심 키워드 및 아키텍처에 대해 설명할 것입니다. 또한 저의 게임 개발 경력을 살린 실습과 예제로 학습의 재미를 더한 것 역시 이번 강의의 포인트입니다.
Question.04
마지막으로 수강생들, 후배분들께 드리고 싶은 말씀을 남겨 주세요.
개발자라면 누구나 매일 같이 업데이트되는 새로운 스킬을 습득하고 확실한 성장을 이루고 싶어 하는 마음이 있다고 생각합니다. 최신의 리액트를 재미있게 학습하고 싶으신 분, 성장이 더뎌진 것 같다고 느끼는 모든 개발자분들이 저와 함께 확실한 속도로 성장하는 자신을 경험해 가실 수 있길 바랍니다.
사용 프로그램 안내드립니다.
본 강의는 Visual Studio Code, Node.js 로 진행되며,
원활한 수강을 위해 가장 최신 버전의 해당 프로그램을 별도로 구매 및 설치해주시길 바랍니다.
*프로그램 및 준비물은 별도로 제공하지 않습니다.
