리액트 개념정리 · 클론코딩

투두앱, 유튜브 클론코딩, 쇼핑앱을 통한 실전 연습

강의 오픈 1차 할인 🔥

정가 20만원 ➡ 16만원 11월 까지!

00
00시간
00
00

리액트 수강하면 TDD강의 무료 제공!

리액트 컨텍스트, 라우터, 쿼리 테스트 하는법 까지!

이번 강의 완강 하고 리뷰 남기면 테스트 강의가 무료로 제공됩니다.
그러니 열심히 강의 따라와 주세요!

(테스트 강의는 별도로 판매 하지 않습니다)

리액트 배우고! 테스트도 배우고!
나의 역량을 두배로 키울 수 있는 특별 기회!!
놓치지 마세요 🚀
공지확인하기🎖

리액트 기본부터 제대로 배우자

기본 개념부터 고급까지! 투두앱, 유튜브, 쇼핑앱 만들기앱을 통한 실전 연습!

  • 리액트 개념 정리

    리액트 전반적인 컨셉과 개념을 차근차근 함께 정리해요. 다양한 프로젝트를 통해 재밌게 하지만 꼼꼼하게 배울거예요. 사용 하는 툴부터 하나씩 알려드리고 단순 주입식이 아니라, 다양한 챌린지를 통해 능동적으로 배워갈 수 있게 안내해 드려요. 그리고 공식 사이트를 통해 어떻게 더 확장해서 배워 나가면 좋은지 알려 드립니다. 개발툴을 어떻게 활용해서 개발실력을 향상할 수 있는지 배워보세요!

  • 유튜브 클론 코딩

    유튜브 API를 이용한 키워드 검색, 채널정보, 연관된 비디오 목록 받아오기, 비디오 재생등 유튜브를 클론코딩 해봅니다. 리액트 라우터와 리액트 쿼리를 이용해 실무 실력도 쌓아봅니다. 여러가지 챌린지를 통해, 직접 만들어 보면서 배운 개념을 100% 활용해 볼거예요!. 첫번째 투두앱 챌린지에서는 순수 PostCSS를 사용해서 다크모드를 구현했다면, 유튜브 에서는 Tailwind를 사용해 봅니다. 다양한 실무팁 배워가세요!

  • 쇼핑앱 만들기

    Firebase를 이용한 사용자 로그인, 실시간 서버 데이터베이스를 이용해 봅니다. 고객이 제품을 보고 장바구니에 담는 기능, 관리자는 새로운 제품을 추가할 수 있는 기능도 구현해 볼거예요. Firebase + Cloudinary 서비스를 이용해서 앞으로 다양한 사이드 프로젝트를 만들어 보실 수 있도록 사용법을 알아보고 활용해 봅니다. 챌린지 형태로 진행되는 프로젝트를 통해 문제 해결 능력도 기르고 좋은 코딩 습관도 알아갈 수 있어요.

새롭게 리뉴얼된 리액트 강의 입니다. (새로운 내용/프로젝트 추가! 더 풍성한 내용들 가득!)

2020년에 런칭했던 리액트 강의 기존 수강생들에게는 무료로 제공해 드립니다.

한번 등록하면 끝나는 관계가 아니라, 계속 꾸준히 보너스 강의와 업데이트 까지!

수강생 분들을 향한 책임감과 애정 느껴지시나요? :)

강의가 끝나면 여러분들은?

어떤 것이 완성 되나요? (소개 영상)

왜 리액트?

왜 리액트?

프론트엔드 개발자라면 리액트죠!

웹개발을 쉽게 할 수 있게 도와주는 자바스크립트 프레임워크/라이브러리중 리액트의 인기가 선두적으로 치솟고 있습니다. 최근 몇년간 가장 핫한 웹 프레임워크에서 1등을 차지했죠. 많은 기업에서 리액트를 이용하고 있기 때문에, 리액트를 배워두면 취직에도 좋고, 원하는 사이드프로젝트도 쉽고, 빠르게 뚝딱 만들수 있어요.

리액트 제대로 배워보고 싶나요?

리액트 제대로 배워보고 싶나요?

개념부터 활용까지 이번에 정확하게 완성하고 싶다면?

단순히 개념만 알려주는 강의? 너무 심플한 예제들로만 구성된 강의? 프로젝트 완성형 강의? 현업에서 프로젝트 해본적 없는, 실무 경험 없는 강사의 강의? 아닙니다! 개념부터 꼼꼼하게! 하지만 실전형 프로젝트로 실력을 탄탄하게 쌓아가고 싶으신 분들이라면 드림코딩, 여기에서 제대로 배워보세요.

재밌는 개념 설명

재밌는 개념 설명

리액트와 다양한 내용을 습득

리액트 개념과 현재 트렌트 그리고 리액트를 개발하는데 필요한 툴들까지 하나씩 재밌게 알아 봅니다. 외에도 최근 뜨고 있는 세가지 CSS 라이브러리를 사용해보고 전격 비교도 해봅니다! 구현뿐 아니라 깔끔한 코드를 작성 하는 팁까지 알려 드립니다. 아마츄어처럼 리액트 작성 하지 않기, 성능 관련 팁들, DI로 개발자 답게 코드 작성 하는법, 이것은 그냥 보너스죠!

다양한 챌린지로 능동적으로 배우기!

다양한 챌린지로 능동적으로 배우기!

많은 예제 프로젝트로 재밌게 배워요

첫번째 리액트 강의를 만들었던 노하우와 그동한 수강생들이 가장 힘들어 했던 부분들을 녹이고 녹여서 챕터4와 챕터5 에서 다양한 예제 프로젝트를 통해 재밌지만 심도있게 리액트의 모든것을 배워봅니다! Props, State, Render뿐 아니라, 리액트 훅, 상태 관리, useReducer, Immer 라이브러리, 커스텀 훅 만들어 보기, Context API 등 다양한 내용들 익혀볼거예요! 유후!

제공되는 강의 플래너

제공되는 강의 플래너

강의 안내서를 통해 더 능동적으로 완성!

각 챕터마다 달성해야 하는 목표를 세우고, 진행 안내서를 통해 조금더 능동적으로 강의를 완성 할 수 있습니다. 함께 제공되는 노션 강의 계획 & 노트 정리 템플릿을 통해 따라 오시면 더 재밌게 진행 할 수 있어요. 개발자 답게 생각하고 사고하는 능력 이 강의를 통해 향상하세요!

실전1. 다크모드 지원 투두앱

실전1. 다크모드 지원 투두앱

리액트 개념 정리 실습 프로젝트

배웠던 개념을 총 정리할 수 있는 첫번째 챌린지 프로젝트! 다크모드 지원을 위해 CSS 라이브러리를 쓴다? 아니요! PostCSS(순수CSS)를 사용해도 얼마나 깔끔하고 간편하게 구현할 수 있는지 알아봅니다. 로컬 저장소에 저장하는 심플한 투두앱을 만들어 보면서 리액트에 대한 자신감을 쌓아볼거예요.

실전2. 유튜브 클론코딩

실전2. 유튜브 클론코딩

유튜브 프론트엔드 클론 코딩

챌린지를 통해 스스로 유튜브앱을 만들어 봅니다. Tailwind, 리액트 라우터, 리액트 쿼리를 이용해서 재밌게 만들어 볼거예요. 오픈 APIs를 포스트맨으로 테스트 하는법, 실제 구현사항과 분리하는 법, 현업 테크닉도 배워갑니다. 유행하는 영상 목록 및 키워드 검색, 영상 재생, 채널 정보, 연관된 비디오들 등 기능들을 구현하면서 리액트 재밌게 써볼거예요.

실전3. 쇼핑몰 만들기

실전3. 쇼핑몰 만들기

쇼핑몰 웹사이트 만들기

Firebase를 이용한 OAuth 로그인, 실시간 데이터베이스를 사용해 봅니다. Cloudinary 서비스를 이용해서 제품의 이미지를 업로드 하는 기능도 구현해 보고, 사용자, 제품 정보 추가, 수정, 삭제 등 백엔드와 CRUD 통신하는 방법을 익혀볼거예요. 이 프로젝트를 통해서 그동안 생각만 했었던 멋진 아이디어를 직접 구현 할 수 있는 자신감을 쌓을 수 있습니다.

강의 리뷰

강의를 완성하신 드림코더님들 수강평

  • 실용주의 리액트 강의

    오랜 시간 C/C++과 델파이로 펌웨어, 데스크탑 애플리케이션, CS 프로그램 등을 만들어왔습니다. 개발 흐름이 웹이나 웹을 이용한 애플리케이션으로 변해가는 것을 느꼈기에 웹에 대한 관심은 꾸준히 가졌고 여러 강의도 들어봤습니다. 그런데도 막상 무언가를 만들려고 하면 막히고 결국 익숙한 방식으로 개발을 하게 되더군요. 아는 선배형이 "CS 개발자들이 웹 개발을 시작할 때 아키텍쳐를 잘 이해하지 못하고 힘들어한다"고 했었는데 정말 그렇더군요. 백엔드와 프론트엔드로의 분리와 둘 간의 상호작용이나 웹 특유의 무상태 특성 등에 대한 낯섬과 그 처리 방식을 이해하기 너무 어려웠습니다. 그나마 벡엔드는 델파이에도 좋은 프레임워크가 많아서 쉽게 구현가능하여 많이 익숙해졌으나 프론트 엔드는 그렇지 못 했습니다. 프론트 엔드 쪽에서 공부해야할 내용의 방대함과 트렌드의 빠른 변화 때문에 어디서부터 시작해서 무엇을 거쳐야 하는지도 정하기도 힘들었습니다. 노마드코더님과 엘리님의 유튜브 동영상과 강의를 보면서 HTML, CSS, JS 기본을 공부한 후 리액트를 프론트 엔드 공부의 시작점으로 잡게 되었습니다. 노마드코더님, 벨로퍼트님, 코딩애플님 등 다양한 분들의 강의가 있었는데 세세하면서도 간결하게 최적화되어 있는 엘리님의 강의가 좋았기에 엘리님의 리액트 강의를 선택하였습니다. 분량도 많고 제가 잘못 알고 있는 부분들도 많았으며 CSS와 JS 쪽의 공부가 부족한 것을 느껴서 따라가는 것이 힘들었습니다. "CSS로 기본적인 스타일링을 할 수 있다"와 "순수 자바스크립트로 프로그래밍이 가능하다"는 조건을 제가 잘못 생각했습니다. 저는 정말 말 그대로 "가능하다"면 적합한 줄 알았거든요.;; 보통은 함수형 컴포넌트 + 리액트 훅을 이용하는 방법을 설명만 하는 것에 비해 엘리님은 클래스 컴포넌트, 함수형 컴포넌트 비교를 하며 두 방법의 차이점을 설명하고 어떤 상황에서 왜 써야하는지를 설명해 주십니다. 강의 내내 "왜"라는 부분을 빼먹지 않습니다. 어떤 기능이나 도구가 어떤 문제를 해결하기 위해 만들어졌는지, 실제로 어떻게 구현하고 사용하는지, 앞으로 어떻게 변화할지 등등, 다른 곳에서는 보기 힘든 좋은 내용들이었고 생각을 하게 만들었습니다. 그리고 단순한 지식전달보다 자기주도적 학습이 가능하도록 다양한 리소스들을 제공해주셔서 좋았습니다. 프로젝트는 어떻게 구현할지, 어떤 기술과 도구를 사용할지에 대한 리서치 등으로 시작하고 개발의 대부분은 구현과정 중에 맞딱드리는 문제를 해결하는 것인데 강의 내용이 큰 도움이 되었습니다. 엘리님의 강의를 본 뒤부터 개발자 가이드 등의 문서나 MDN부터 보는 경우가 많아졌습니다. ^^ 좋은 강의에 감사드립니다. 전혀 불만도 없고 솔직히 아직 다 소화도 못 했습니다. 그렇지만 조금 욕심내자면... 수업에 적합한지를 판별하는 조건에 조금은 구체적인 조건을 제시해주셨으면 좋겠습니다. 이력서 지원 메일의 링크 클릭하면 필요한 직무능력 목록이나 간단한 코딩테스트 문제 나오는 것처럼요. ^^; 노션 등에 기억 회상용 챕터 정리 요약 노트가 있었으면 합니다. 엘리님은 리소스를 많이 챙겨 주셨지만 더 많은 리소스를 바라게 되네요.;;

    dark.ryu76
    dark.ryu76
  • 닥치면 뭐든지 하든 풀스텍 개발자 입니다.

    아닙니다. 닥치면 뭐든지 개발하고 싶은 풀스택개발자가 되고 싶은 현업에 개발을 하고 있는 개발자 입니다. 풀스택이라기에 프론앤드 스킬이 좀 부족한 백앤드에 머물고 있는 상태이지요...^^ 출퇴근시간에 유투브를 자주 봅니다. 최근 엘리님 강의가 나주 올라 오더군요. 5년전 StartUp CTO 로 근무하면서 AngularJS+TypeScript로 개발하여 런칭을 하였습니다. 그당시 도입을 했지만 프론앤드 개발참여보다는 백앤드와 PM역활이 주다 보니 깊이 있게 접근하지 못했습니다. 그후 이직을 하면서 이력서에 프론앤드 경험을 기술 하였지만... 정작, 바로 코딩에 들어가 직접 개발하기는 기본이 많이 부족하더군요. 이직해 보니 외주로 개발되어 납품받은 프론트앤드가 리액트로 개발되어 있었습니다. Data는 목업으로만 작업 되어 있었는데. 그때 백앤드 API 태우는 작업을 하면서 리액트에 접근하게 되었습니다. 최근에는 단독으로 리액트로 웹사이트에 일부페이지만 적용하는 서비스를 하게 되었는데, 퀄리티가 많이 떨어 졌습니다. 학습이 절실히 필요했고 나름 유투브 보면서 공부하던 중에 엘리님 드림코딩까지 오게 되었습니다. 엘리님 강의 하는 스타일이 수십년 개발만 해왔던 제 귀에도 쏙쏙 들어 옵니다. 왠지 개발 스타일이 비슷해서 였을까요...^^ 현재는 리액트로 또다른 프로젝트 개발을 시작하게 되었는데, 시작을 어떻게 하지 고민하다가 강의 결제하고 3일동안 밤새워 완강을 하였습니다. 완강하고 바로 프로젝트 시작했고 현재 DB 연결하고 디자인 입혀나가는 작업을 하고 있습니다. 현업에서는 Firebase 대신에 AWS RDS를 사용하고 있습니다. 기존에 사용하던 Saas도 PostCSS로 변경해 보았습니다. 장단점이 있기는 하지만 scss를 경험해 본 제게는 PostSCC가 더 가볍고 친숙한것 같아요...^^ YouTube Clone Coding도 따라해 보았습니다. 제 아내가 운영하는 Youtube 채널만 뽑아서 따로 웹사이트로 하나 만들어 줘야겠어요.^^ Besiness Card Maker를 하면서 Firebase와 Cloudinary 연결하며 작업할때는 또 다른 희열을 느꼈어요. 현업에서는 AWS에 EC2, RDS를 사용하고 S3에 이미지를 저장하고 있습니다만, 백앤드에서 PHP로 처리 하고 있던차에 프론앤드에서 바로 처리해 버리니 환상적이었죠...^^ 프론앤드 스킬이 좀 올라가면 유료 결재하고 서비스 이용해 보려구요.. 제게는 너무도 유익한 강의였습니다. 엘리님을 진작에 알게 되었다면 좋았겠다 싶었습니다. 이번프로젝트 완료하고 TypeScript랑 NodeJS 수강하러 가겠습니다. 지금은 한번에 달리려니 힘드네요. 엘리님! 드림코딩에 React Native 강의가 있었으면 합니다. 리액트를 공부하다 보니 ReactNative도 공부하고 싶은 뽐뿌가 오네요...^^ 드림코딩과 함꼐 대체 불가능한 뭐든지 다 할 수 있는 시니어 개발자가 되고 싶습니다. 엘리샘 고맙습니다. 타국에서 항상 건강하시고 행복하세요.

    itsddan
    itsddan
  • 리액트강의와 타입스크립트 강의를 의미있게 본 수강자 입니다.

    초등학생시절 방과후 활동으로 배우게된 '나모웹에디터'를 시작으로 항상 홈페이지제작에 관심을 가지고 살았습니다. 중학생시절에도 컴퓨터 사설 A/S센터를 기웃거리며 컴퓨터와 친해졌고 고등학교도 컴퓨터 특성화고등학교를 갔었죠. 군대에들어가 군용인트라넷을 유지보수하며 지내기도 했었구요 하지만 개발에 막연한 감정이 있었습니다. 시키는대로 하긴 하는데 막상 어떻게 시작하는지는 잘 몰랐거든요. 미리 목업된 디자인을 구하거나 CSS 프레임워크 또는 그누보드와 같은 php빌더 툴을 쓰기나 했지 어떻게 해야하는지는 잘몰랐거든요. 어느순간부턴 얕은 경험보다 깊은 경험이 필요한 시기가 찾아왔고 첫단추를 어떻게 끼워야하나 구름에 붕 뜬 기분으로 수년이 지나왔습니다. 항상 일을하는 도중 마음의 기저에는 '그래서 개발을 어떻게 시작해야되;'가 깔려있었거든요. 그러던중 엘리님의 유튜브 강의들을 보게되었습니다. javascript의 기초를 배우기 위함이였지만 아무리 기초이론을 봐도 '그래서 개발을 어떻게 해야하는거야?' 라는 마음은 속 시원히 해결되지 않았고 그러던중 엘리님이 강의도 하신다는것을 알게 되었습니다. 리액트의 개념정리와 클론코딩은 딱 저에게 필요한 강의였고 수업을 들으며 한국의 웹에이전시의 생태계와 미묘한 차이가 있는 다른 나라의 생태계도 알게되며 10년간 안개가 껴있던 답답함이 해결되었습니다. 강의를 들으니 javascript의 심화과정이 더 궁금해져 'typescript와 객체지향' 강의 까지 보게되었으며 이 강의들은 저에게 컴퓨터공학의 재미를 알게되어 지금은 조금 늦은감이 있지만 '사이버대학'을 지원하여 컴퓨터공학과정을 수료하고 있습니다. 아직 현업에서는 vue.js나 react.js에 template를 마크업해 주는 일을 하고 있지만 날이 갈수록 Front-End의 이해도가 올라가며 협업에 도움이 되고 있습니다. 아직은 취미에 그치는 개발이지만 배운것을 토대로 전문성을 익히고 현업에서도 일해보고 싶은 마음이 생기네요. 간만에 기존에 개념잡는 용도로만 들었던 '객체지향과 타입스크립트'를 다시듣기위해 왔는데 TDD강의를 한다니.. 이전과 마찬가지로 현업의 마지막 단계인 TDD나 backend에 대한 갈증이 있었는데 그런 강의가 버젓이 있어 또 한번 놀람을 금치 못하였습니다. 이후 강의들도 기쁘게 수료할 예정이며 제 이력서에는 늘 수료한 과목으로 '드림코딩 사이트의 리액트와 타입스크립트'가 있을 예정입니다. ps. 서른살이 넘어가고 인터넷에 글을 남기는것이 극도로 싫어 사실 TDD도 그냥 돈주고 보고 싶었습니다 ㅜㅜ...하지만 강의 수료자의 리뷰에 한해서만 받을 수 있다고하니 이기회에 장황하게 글을 적었습니다. 질문이나 동영상에 리플을 남기지 않아 직접적으로 힘이 되어주지 못하였지만 항상 고마움을 느끼고 주위 사람들에게 홍보 하고 있습니다. 굉장히 많은 도움이 되고 있습니다. 감사합니다.

    thepub03
    thepub03
  • 필요한 것을 어떻게 읽고 가져다 쓸수 있는지를 배웠던 리액트강의!!

    저는 엘리쌤의 무료 유튜브강의부터 포트폴리오,자바스크립트101강의까지 듣고 정말 자바스크립트에 대해 빠삭하게 공부하고(관련서적을 3번은 읽은것같아요) 리액트강의를 듣게 되었습니다. 사실 코딩 입문자로서 전체적인 흐름을 볼 수 도 없었고 코드 자체를 이해하고 적용하는데 급급했던 것 같습니다.자바스크립트 101까지는 코드자체에 대한 공부를 많이했다면 리액트는 제가 실제 프로젝트를 할때 어떻게 데이터를 받아오고 원하는 기능을 외부에서 찾아서 적용시키는지를 배울 수 있었던 강의였던 것 같습니다. 자바스크립트를 워낙 열심히 공부하고 오랜시간 공을 드린만큼 리액트 강의자체는 오히려 어렵다고 느껴지지가 않고 훨씬 쉽게 다가왔습니다!! 자바스크립트가 저는 훨씬 어렵게 느껴지더라구요 아무래도 처음 코딩을 배워서 그런것도 있는것같습니다. 자바스크립트에서 호되게 당하고 나니 새로운 언어를 배우는게 '아..또 얼마나 고생을 할까..이건 얼마나 시간이 걸릴까' 두려웠습니다. 하지만 저의 코딩구원자 엘리쌤강의라면 충분히 잘 해낼 수 있을 것이라는 확신을 가지고 시작했고 너무나 성공적이였습니다. 자바스크립트를 통해 프로그래밍이 어떻게 동작하는지,코드자체에 대한 공부는 많이해서 작은 규모의 프로젝트는 잘 만들 수 있었지만, 외부에서 API를 어떻게 받아오고 좀 규모있는(?) 프로젝트를 만드는 것에는 전혀 감이 잡히지 않아서 그 부분에 대해 목 말라있었는데 그 부분에 대해 자신감을 얻을 수 있는 강의였던 것 같습니다. 이제는 코딩을 하는 것에서 그치지 않고 좀 더 넓은 시야를 가지고 조금은 더 큰 규모있는 프로젝트를 만들 수 있는 사람이 된 것 같아 저에게 이런 자신감을 불어넣어주신 엘리쌤께 감사드린다는 말씀 전해드리고 싶습니다. 그래서 리액트강의를 듣고나서는 문서를 찾고 읽고 적용하는것에 굉장히 재미가들렸(?)습니다 하하하 그 전까지는 제가 제일 힘들어 하는 부분이 이 부분이였습니다. 개발자는 스스로 문제를 정확히 인지하고 해결방법을 찾고 적용시킬수 있는 '문제해결능력'이 중요하다는 것을 누누히 들었기 때문에 이 부분이 잘 안되서 너무너무 우울하고 '나는 능력이 없는건가..' 자책도 많이했습니다. 생각해보면 많이 넘어지고 고통스러운 시간이 있을 수록 더 단단해지고 좋은 개발능력으로 돌아온 다는 것을 배웠기 때문에 제가 또 하나 얻은 점은 코딩이 잘 안되고 힘들면 '아...나중에 엄청 훌륭한 개발자가 되게하려고 이렇게 난제를 주시는구나'이렇게 긍정적으로 생각하고 차근차근 풀어나가려고 노력하게되었습니다. 무언가 문제가 잘 안풀릴때는 자책하지 마시고! 당연한것이라 받아들이시고! 긍정적으로! 엄청 훌륭한 개발자가 되기위해 피와 살이 되는 과정이라고 생각하시길 바래요^^

    jsj0471
    jsj0471
  • 실습 프로젝트 전까지 수강한 소감

    저는 원래 백엔더였다가 6개월 정도 리액트 프로젝트를 하면서 풀스택으로 전환하고 있습니다. 프로젝트 초반에는 백엔드 아키텍쳐랑 Rest API 표준 잡느라 리액트는 남들이 해논거 카피해서 수정하는 수준이었습니다. 근래에 프론트엔드에 직접 간여하는 일이 잦아졌고 복잡한 UI를 구성하느라 리액트 공부에 목말라 있던 차였습니다. 엘리님 말씀대로 직접 닥쳐보고 의구심이 들어야 개념이 머리에 쏙쏙 들어옵니다. 여기까지 3~4일 걸렸는데 너무 재미있었습니다. 첫번째로는 남들은 어떻게 코딩하지 라는 궁금함이 항상 있었는데 좋은 선생님을 통해 잘 배우게 됐습니다. 심지어 파일명은 소문자로 합니다라는 간단한 것도 개발팀에서 표준으로 삼고자 하면 여타저타 말이 많은데요, 알려주시는 실무 팁들이 도움이 많이됩니다. 두번째로는, 목차에 다 표현되지 않지만 중요한 개념들을 전부 다루고 있다는 점입니다. 저도 처음에 공식문서의 Main Concept를 먼저 훑었기 때문에 강의가 소홀했다면 중요 개념이 빠졌는지 눈치챌 수 있었거든요. 여기까지 보신 분들은 더 진행하기 전에 Main Concept 문서로 지금까지 배운것을 정리한다면 이후 프로젝트를 위한 기초 체력 다지기가 될 것 같습니다. 이제 문서보는 속도도 훨씬 빨라졌을 겁니다. 세번째로는, 다른 개발자들과 토론할 때, 이론을 제시할 수 있을만큼 개별 지식들이 촘촘히 연결됐습니다. 마침, 렌더링이 반복되는 문제 때문에 어떻게 해야하나 고민 중이었는데 많은 도움이 되었습니다. 지금까지 배운 지식만큼만 프로젝트 초반에 제가 알았더라면 여러가지를 바로 잡을 수 있었을텐데 하는 아쉬움이 크지만 지금이라도 체계적으로 이론을 재정립할 수 있어 엘리 선생님께 감사하다는 말씀을 드리고 싶습니다. 알찬 강의 만들어 주셔서 감사합니다. 앞으로 실습 프로젝트도 많이 기대됩니다. Edit - 후반부 마친 소감 FireBase 의 realtime database 같은 것을 소개해 주셔서 신선했습니다. 이미지 관리하는 서비스도 그렇구요. 엘리님은 분명히 기술력이 있는 회사에서 실력있는 동료들과 경력을 쌓고 계신 것 같습니다. 저는 런던의 핀테크 스타트업에서 일해본 경험이 있는데, 도전적이고 개발자들의 자율성이 높은 회사라 새로운 서비스들을 빠르게 비교하고 적용해 보면서 다양한 경험을 쌓을 수 있었습니다. 그렇게 좋은 환경에서 배운 꿀팁들은 강의를 업으로 하는 분들의 강의에서는 좀처럼 나오지 않습니다. 후반부 프로젝트를 하면서 주요개념을 성능을 고려하면서 때론 꿀팁을 얹어서 재미있게 풀어주셨습니다. 막판에 달리는 듯한 느낌도 들긴 했지만 전체적으로 친절하게 잘짜여진 강의라고 느꼈습니다. 감사합니다!

    jake.ryu
    jake.ryu
  • 드디어 완강!

    드디어 완강을 했습니다! 저번 브라우저 101때보다 더 능동적으로 공부하고 싶어서 셋업부분까지만 보고 그 다음부터는 아예 다음 강의 안보고 스스로 구현하고 완성했습니다. API를 처음 이용해서 며칠동안 진도 못나가고 전전긍긍할 때, 아 이 부분만 볼까? 고민하면서도 끝까지 절때 보지않고 스스로 구현하고 완성하니 더 큰 성취감이 생겼습니다. 그리고 나서 강의를 보니 피드백을 받는 것 같아서 제가 코드를 구성할 때 리액트처럼 컴포넌트 단위로 나눠서 아직 생각못하는 것도 깨닫기도 하고, 어떻게 나눠서 써야되는지도 다시 배웠습니다. 그리고 다시 복습차원에서 프로젝트를 구현하니 기억에도 많이 남고, 특히 스스로 한번 구현해봤다는 점에서 공식문서를 볼때 막연한 두려움이 없어지는 게 좋았습니다. 그리고 바쁘다 바빠 현대사회 알쏭달쏭 모바일 세상에서 API나 라이브러리가 영상 찍으신 시점이랑 강의를 듣는 시점이랑 개개인의 차이가 있을 수 있어서 업데이트가 높은 확률로 됐을 가능성이 있습니다. 그래서 스스로 안해보고 엘리님의 코드를 그냥 수동적으로 따라 적으려고하면 오류가 나기 쉽고 그러면서 내가 어떤 코드를 작성하고 있는지 이해도도 떨어지고 흥미도 떨어질 것 같습니다. 그래서 스스로 다 구현하고 보니 그런 두려움과 불편함이 없었습니다. 강의 토론창에 오류에 대한 질문들이 많았는데 저 스스로 완전히 구현해보는 경험이 없었다면 왜 오류가 나고 어디서 문제가 생기며 공식문서를 잘 읽지도 못해서 업데이트된 부분에 대해서 대비를 못했을 것입니다. 그 다음으로 강의에서 가장 좋았던 점은 물론 리액트에 대한 전반적인 개념이해와 설명도 있지만 다양한 라이브러리를 설명해주시고 단지 이 프로젝트에서만이 아니라 끝나고 저만의 새로운 프로젝트를 만들 때 같이 사용할 수 있는 정보들을 알 수 있었습니다. 지난 번 브라우저 101강의를 다듣고 마지막 리팩토링하실 때 클래스를 이용하시면서 아 이부분은 너무 이해가 안간다... 모르겠다... 했었는데 그 이후에 JS공부하고 돌아보니 class를 어떻게 이용하신 건지 이해가 가더라고요. 물론 지금도 강의를 완강했지만 마지막 부분 컴포넌트 나누고 useCallback사용하고 등등 정확하게 이해는 안되고 뿌옇지만... 리액트 꾸준히 공부하고 제 프로젝트 만들면서 부족한 부분들 더 알아보고 채우겠습니다 좋은 강의 감사합니다 API를 사용하면서 공식문서들에 대한 막연한 두려움이 없어졌고 이를 통해 새로운 저만의 프로젝트 많이 만들어볼게요~

    ungun96
    ungun96
  • 이 강의는 리액트 강의가 아닙니다.

    처음에 리액트를 시작하려고 할 때 블로그나 공식문서를 보면서 공부하려고 했지만, 자바스크립트도 완벽하게 이해하지 못한 수준이라 리액트의 개념을 이해하지 못했습니다. 그러던 중, 유튜브에서 엘리님의 강의가 있는 것을 보았습니다. 유튜브로 css와 html을 재밌게 배웠던 기억이 있어서 바로 수강신청을 했습니다. 수업을 진행하기 앞서 리액트에 대한 두려움을 가지고 있었는데 수업이 진행될 수록 두려움은 자신감으로 변했습니다. 엘리님의 수업방식은 자기주도학습에 초점을 두었습니다. 하지만 온전히 자기스스로 학습하는 것이 아니라 자기가 스스로 학습할 수 있게 길을 제시해줍니다. 엘리님이 순수 만드신 노션 학습 페이지는 스스로 학습하기에 도움을 많이 받았다. 그 노션페이지를 이용하면 얼마나 학습했고 추가로 어떤 부분을 학습해야 하는 지 알 수 있어서 좋았습니다. 저는 이것을 아직도 활용하고 다른 공부를 할 때 도 이런 형식을 사용합니다. 또 정말 좋았던 점은 자습을 하기에 용이한 소스들도 제공해준다는 것입니다. 앨리님의 수업에는 3가지의 프로젝트가 있습니다. 우선 프로젝트를 진행하기 전에 리액트의 개념을 쉽게 state, virtual DOM 등 리액트를 사용하기 위해서 알아야할 개념들을 설명합니다. 다른 강의나 책에서 이해하지 못했던 내용들을 엘리님은 쉽게 설명해줍니다. 나중에 지식을 잊더라도 다시 참조할 수 있는 좋은 레퍼런스가 됩니다. 완벽하게 이해하지는 못한 지식은 프로젝트를 통해서 완벽하게 채워갑니다. 각 프로젝트들을 거치면서 점차 리액트에 익숙해져갑니다. 순수 리액트로 Habit Tracker를 만들고 유튜브 프로젝트에서는 API의 사용법 그리고 PostCSS라는 기술들을 접하게 해줍니다. 그리고 대망의 Business Card Maker 프로젝트에서는 지금까지 배웠던 모든 지식들을 활용합니다. 엘리님의 강의가 짧다고 생각할 수 있지만 사실 프로젝트를 해설을 보지않고 혼자 진행했다면 결코 짧은 강의는 아니었습니다. 하지만 이 과정을 거치면 현업에서도 리액트를 사용할 수 있을 것입니다. 엘리님의 강의는 단순히 리액트를 배우는 것이 아니라 개발자가 가져야할 태도, 개발자가 어떻게 학습해야하는 지에 대해 알려주십니다. 강의를 수강하면서 개발적인 면에서 많이 성장했고 전혀 돈과 시간이 아깝지 않았습니다. 앞으로도 엘리님의 강의가 있으면 무조건 수강하고 싶습니다.

    keumks0331
    keumks0331
  • 리액트에 대해 (어느 수준으로든) 궁금한 것이 있다면 꼭 수강해야 할 강의!

    여기저기서 주워온 모래와 돌로 엉기설기 쓰러지지만 않게 세워놓았던 제 리액트 실력(?)을 엘리님이 주시는 벽돌에다가 앞으로 필요할 때마다 튼튼한 벽돌 만드는 방법까지 알려주시고, 사이사이 시멘트도 발라주셔서 차곡차곡 다시 지을 수 있는 용기까지 생겼어요! 부트캠프에서 리액트를 배운터라 사실 강의를 들을까 말까 엄청 고민하다가 막상 혼자 토이 프로젝트를 시작해 보니 지금껏 배운 것을 토대로 응용하는 부분에서 막혀버려서 정말 답답했었어요. 드림코딩 리액트 수업을 들으면서 제가 미리 만들어 본 앱과 엘리님이 보여주신 솔루션의 차이를 보니 제 코드는 너무 복잡하더라구요. 하하.. 정확하게 몰라서 지금껏 배운 것들을 마구잡이로 넣어서 땜빵한 것 같은 그런 느낌.. 3가지 프로젝트가 각각 난이도가 달라서 리액트를 얼마나 알고 있는지와 상관없이 들으시면 좋을 것 같아요. 수업 듣기 전에는 약간 자만하고 있었는데 카드 메이커에서 좌절을 맛본 후 굉장히 동기 부여를 받았어요. 사실 지금 부트캠프 졸업이 코앞이라 마지막 프로젝트도 잘 마무리하고 취뽀까지 갈 수 있을지도 막막하고, 이런 코딩 실력으로 비전공자가 해외에서 인턴자리 하나 구할 수 있을까 하루에도 몇 번씩 갈대같이 흔들리지만, 엘리님이 늘 강조하시고 강의 마지막에도 덧붙여 주셨던 말씀 덕분에 흔들리는 와중에도 꾸준히 하다보면 실력은 늘거란 것을 등대삼아 나아가고 있어요. 기술은 어차피 변하고 지금 당장 어려운 것과 앞으로 마주하게 될 새로운 것들도 어떻게 하면 제것으로 만들 수 있을지 방법을 아니까요! (물론 방법을 안다고 했지, 다 안다고는 안했다...) 드림코딩 유투브만 보더라도 공식문서를 많이 강조하셔서 일단 들어는 가보지만 늘 그 용어들과 분량에 압도당해버리곤 했는데, 어떻게 접근해서 친해질 수 있을 지 알려주셔서 좋았어요. 그리고 강의노트를 비롯해 배운 것들을 복기할 수 있도록 노트를 공유해주셔서 필기덕후는 그저 황홀합니다🤩 참참, 저 드림코딩 리액트 강의 들을지 말지 한달 정도 고민했었거든요. 내가 다 알고있는 내용은 아닐지, 시간만 낭비하게 되는것은 아닐지 고민이 많았는데, 그 고민을 안했더라면 전 지금 이 강의를 세 번은 복습할 수 있었을 것 같아요! 정말로 수업을 듣고나니 이렇게나 얻은 것이 많은데 생각보다 적은 돈과 적은 시간을 투자한 것 같아서 과거의 고민하던 제가 딱해요. 목표하시는 바를 이루는 데 리액트가 필요하다면 꼭 한번 들어보세요!

    aanmeba
    aanmeba
  • 흔들리지 않는 실력을 갖추기 위한 후회 없는 선택

    국비 학원에서 자바를 6개월 간 배운 뒤 작은 스타트업 기업에 취직하였습니다. 주 사용 언어가 자바스크립트이고 프론트엔드에 있어 리액트를 주로 활용하는 곳이었습니다. 학원을 수료하고 얼마 지나지 않아 입사하게 되었기 때문에 허겁지겁 리액트의 기본 개념을 학습하고 바로 실무에 투입되었습니다. 사내에서는 회사 규모와 인력에 비해 많은 프로젝트들이 진행되고 있었고 코드의 퀄리티보다는 납품 기간을 최우선시하여 정신 없이 키보드를 두들길 수 밖에 없었습니다. 하지만 저는 흔들리지 않는 탄탄한 실력을 가진, 대체 불가능한 인재가 되는 것이 목표였기에, 당장 눈앞의 마감 기한만을 넘기기 위한 코딩을 하는 것에 위기감을 느꼈습니다. 목적과 논리에 맞으며, 나 자신과 다른 개발자들이 스무스하게 이해할 수 있고, 코딩을 하고 싶었습니다. 급한 대로 누덕누덕 기워서 만든 제품이 아니라, 안정성 있고 튼튼한 제품을 만들고 싶었습니다. 드림코딩의 강의는 이런 저의 갈증을 충족시켜주었습니다. 유튜브에서 엘리님을 처음 접하게 되었는데, 실력과 지식은 두 말 할 것 없이 뛰어나시지만, 개념과 원리, 목적을 중요시하고 늘 논리적으로 코드를 짜시는 개발자로서의 자세와 철학이 저의 이상과 맞아떨어졌고 자기관리 능력도 너무나 대단하셔서 몰래 저의 롤모델로 삼게 되었습니다. 요새 한국에서 개발자 열풍이 돌면서 많은 개발 강의들이 생겼는데 저는 그 중에서도 꼭 엘리님의 강의를 듣고 싶었습니다. 그리고 예상 대로, 후회 없는 선택이었습니다. 입사 전에 리액트 공식 문서를 쭉 보고, 틱택토나 todo 리스트 같은 작은 프로젝트들을 만들어봤었지만, 입사 후 시간에 쫓겨 정신 없이 코딩하면서 잊어버렸거나 놓치고 있었던 부분이 많았습니다. 그런 가장 기본적인 그런 부분들을 엘리님이 잡아주셨습니다. 특히 리액트에서 State를 취급하는 방식, 성능 관리에 있어 생각해야 할 부분들은 앞으로 리액트로 코딩하는 데 있어 꼭 염두에 두어야 할 사항들이었고 엘리님이 아니었으면 큰일(?)을 낼지도 모르는 노릇이었습니다. 그 외에도 사소한 부분까지 곳곳으로부터 엘리님의 인사이트를 얻을 수 있어 무척 유용했습니다. 다시 한 번 제로 베이스로 돌아가 강의를 따라오고 나니 한층 단단해진 것 같습니다. 역시 가장 중요한 것은 기본이었습니다. 앞으로도 엘리님과 드림코딩을 따라가고 싶습니다. 대체할 수 없는 인재가 되기 위해 부단히 공부하겠습니다. 너무나도 좋은 강의 정말 감사드립니다!!

    philosonasia
    philosonasia

내가 들어야 할까?

수업에 적합한지 확인해 보세요

  • HTML로 간단하게 부분적인 페이지나, 웹사이트를 만들 수 있다.
  • CSS로 기본적인 스타일링을 할 수 있다.
  • 순수 자바스크립트로 프로그래밍이 가능하다.
  • 리액트, 리액트 많이 들어봤지만 1도 모른다 하지만, 너무 배우고 싶다!
  • 리액트를 배웠지만 아직도 자신이 없다.
  • 능동적으로 실습을 하면서 열심히 달릴 준비가 되었다!
  • 15개

    챕터

  • 968분+

    동영상

  • 16시간+

    분량 강의

강의 커리큘럼

아래 커리큘럼과 미리보기를 보시고 신중하게 결정해 주세요

  1. 1.1 강의 소개
    05:34
  2. 1.2 챕터별 소개
    07:23
  3. 1.3 공부방법 (후배분들에게)
    05:49
  4. 1.4 강의 교안 사용법
    02:49
  5. 1.5 노션 활용법
    03:39
  6. 1.6 슬랙 가입하기 (채널안내, 중요!)
  7. 1.7 저작권 관련 안내사항 (중요!)
  8. 1.8 🚨 토론창 이용 공지사항 (꼭 읽어보고 이용하세요)
  9. 1.9 수강생 작품들 구경하세요 ✨
  1. 2.1 소개
    01:01
  2. 2.2 왜 리액트인가?
    03:55
  3. 2.3 라이브러리와 프레임워크 차이점
    03:35
  4. 2.4 리액트 철학
    04:45
  5. 2.5 컴포넌트 나누는 기준?
    03:05
  6. 2.6 리액트 동작 원리
    06:40
  7. 2.7 리액트 훅이란?
    03:58
  1. 3.1 챕터 소개
    00:28
  2. 3.2 기본 툴 설치
    03:42
  3. 3.3 기본 툴 설명
    04:01
  4. 3.4 북마크 해둘 사이트 3개 🔖
    07:00
  5. 3.5 프로젝트 만들기
    05:14
  6. 3.6 프로젝트 구조 살펴보기
    06:21
  7. 3.7 숨겨진 툴들 살펴보기
    04:26
  8. 3.8 중요한 툴들 설명
    02:42
  9. 3.9 브라우저 준비 및 익스텐션
    02:06
  1. 6.1 챕터 소개
    01:29
  2. 6.2 리액트에서 많이 쓰이는 CSS들
    01:20
  3. 6.3 PostCSS
    06:33
  4. 6.4 Styled Components
    05:37
  5. 6.5 Tailwind
    06:10
  6. 6.6 전격비교! 장단점
    06:19
  7. 6.7 주관적인 의견 (선호도)
    06:20
  8. 6.8 Tailwind 함께 공부하기
    08:16
  9. 6. ⬇ CSS 전체 코드 다운로드 받기

공식 수강 기간: 4주 + 추가 무료 복습 기간 제공!

리액트 개념 정리 및 3가지 실습 프로젝트

지금 엘리와 함께 시작하세요!

  • 엘리의 시그니처 강의

  • 평생 수강가능

  • Q&A 토론창 지원

  • 완강시 수료증 발급

  • 한국어 강의

  • 슬랙 커뮤니티 지원

여러분 미래에 투자하세요🎖

₩200,000₩160,000

취소 및 환불정책 대해 알아보세요

강사 소개

  • 엘리 | 드림 코더

    엘리 | 드림 코더

    Full-Stack(+mobile) Engineer | Engineering Manager

    뛰어난 강의력! 강의 맛집!으로 인정받은 15만+ 구독자 '드림코딩' 유튜브 채널 운영자 엘리! 삼성전자 임베디드/안드로이드 연구원으로 4년 근무 후, 해외에서 10년+ 현업에서 일한 경험까지 겸비! 안드로이드, 아이폰, 백엔드, 프론트엔드 개발자로 일했으며, 테크리더부터 팀장, 그룹장(엔지니어링 매니저)까지 리더쉽 포지션에서도 활동했습니다.탄탄하게 쌓아온 실무 경험과 성장했던 비법까지 여러분께 모두 전수해 드리고 싶습니다! 진정한 개발자란 현재 가지고 있는 지식과 경험, 노하우에 만족하고 멈춰 있는 것이 아니라 끊임없이 배움을 추구하며 열정적으로 살아 가야 한다고 믿고 있습니다. 그 열정, 강의를 통해 나눠드리고 싶어요! 함께 달려봅시다! 🎖

    자주 묻는 질문들