-
[드림코딩by엘리] 리액트 강의 회고오로지 개발/React 2020. 11. 14. 15:09
드림코딩 by 엘리 강의를 수강하고 남기는 회고입니다.
리액트 혼자서 공부하기..?
처음 리액트를 접했을 때 개념과 작동원리가 생소하게 느껴졌다.
공식문서를 가장 열심히 챙겨 보았지만, 주먹구구식으로 이곳저곳에서 지식을 쌓는 듯했다..
그러다 마침 유튜브에서 엘리의 자바스크립트 역사 영상을 접하게 되었고 순식간에 관련 영상들까지 해치워버렸다.
명쾌하고 명료한 설명에 흩어져 있단 나의 JS 지식들이 정리되는 느낌을 받았다.
(+엘리 특유의 밝고 긍정적인 톤 +명확한 딕션은 덤!)
그래.. 이 분이라면 나의 리액트 지식도 집합시켜주실 수 있을 거야! 하는 확신이 생겨 홀린 듯 강의를 수강하게 되었다.
그리고 완강한 지금, 그 선택에 매우 만족하고 있다.
가장 기본적인 리액트의 컨셉과 구조 이해부터, 활용법 그리고 최적화 등 내 가려운 곳을 적절하게 긁어줬던 강의였다.
강의를 열심히 들으며 따라갔지만, 엘리가 가장 강조했던 것은 아무래도 학습할 방향이었다고 생각한다.
덕분에 혼자서 리액트를 공부하는데 많은 도움이 되었다!
세 가지 프로젝트로 다양한 상황 경험해보기
첫 번째 프로젝트는 Habit Tracker라고, 기본적인 CRUD를 리액트에서 어떻게 구현하는지 잘 보여준 프로젝트였다.
Class Component로 먼저 State와 Props 그리고 Lifecycle 함수까지 이해한 뒤,
function component로 변환하고 memo 등으로 성능을 최적화하는 흐름이 특히 좋았다.
두 번째 프로젝트는 Youtube Clone Coding이었다.
Youtube API를 이용하여 실제로 서버에서 데이터를 받아와 키워드로 검색하고,
비디오 리스트를 보여주고 비디오 플레이어에 재생되고 있는 동영상을 관리하면서 State를 적절히 사용하는 방법을 알았다.
이 프로젝트에서는 반응형으로 구현해야 하는 것까지 생각한 후 미디어 쿼리를 이용하여 리팩토링 한 부분이 도움이 많이 됐다.
대망의 마지막 프로젝트, Business Card Maker
이 프로젝트에서 엘리는 "스스로 생각해보고 다음 강의에서 만나자!" 하는 부분이 인상 깊었다.
어떤 기능을 하는 컴포넌트를 만들 것인지 설명을 해준 다음, 코드에 대한 설명을 하는 강의가 다음에 이어져 있는 형식이었다.
물론 이전의 프로젝트도 모두 그런 형식이었지만, 보다 강하게(?) 스스로 해보길 권하는 프로젝트였다.
Firebase를 이용한 Authentication과 Realtime database 사용으로 보다 편리하게 프론트엔드 구현에 집중할 수 있었고
Cloudinary를 이용한 이미지 업로드 또한 배울 수 있어 좋았다.
설정부터 배포까지 한 번에 정리할 수 있는 강의
챕터가 11개나 되는데(12시간 분량..) 강의를 소개하며 어떤 흐름으로 공부하면 좋은지에 대한 팁을 알려준다.
리액트를 개발하며 필요한 개발툴과 익스텐션에 대한 설명도 충분히 다룬다.
또, 프로젝트를 직접 배포할 수 있는 방법까지 설명해주기 때문에 정말 처음부터 끝까지 책임지는 강의라 표현하고 싶다.
특히나 많은 학생들이 소통할 수 있는 공간도 마련하면서(슬랙), 여러모로 만족도가 높았다.
망각 곡선을 타지 않도록 꾸준히 다시 들어가 복습하여, 온전히 내 것으로 만들 생각이다!
강의 별점은, 말하지 않아도 당연히 ⚛⚛⚛⚛⚛
'오로지 개발 > React' 카테고리의 다른 글
React 개발 환경 직접 구축해보기 - 1. 리액트가 작동하는 방식 (0) 2021.01.15 [Redux] 대체 무엇인가! 왜 쓰는가? (0) 2020.12.26 [React] Typescript VS코드 error : Cannot use JSX unless the '--jsx' flag is provided. (1) 2020.12.02 [React] Component와 PureComponent로 알아보는 state (0) 2020.10.06