프로젝트로 배우는 React.js & Next.js 마스터리 클래스(이하 <프로젝트 React.js>)

왜 해당 강의를 선택했는가

프론트엔드 개발자를 이야기할 때 빼놓고 이야기하기 어려운 라이브러리, React.js는 첫인상이 좋았다. 부트캠프에서 처음 마주하여 강사님이 하라 는대로 하니 무엇이든 화면에 반영되어 동작하는 걸 확인할 수 있었다. 마치 살아있는 걸 마주하는 느낌이었다. 기본 동작 원리, 렌더링 과정은 이해하기 어려웠지만 어찌 됐든 구현하면 장땡이라고 생각했다. 그러나 그건 실수였다.

그래서 나는 지금껏 React.js를 쓸 줄 알았지만 ‘잘’ 쓸 줄 모른다는 것을 깨달았다. 프로젝트에 적용할 줄은 알지만 리렌더링을 줄이고 적절한 컴포넌트 구조는 어떻게 배치해야 하는지 감은 잡히지만 제대로 말할 수 없었다. 그래서 기획이나 인프라의 프론트엔드 외적인 것보다 프론트엔드에 집중할 수 있는 프로젝트를 원했다.

더불어 NextJS를 제대로 다뤄본 적이 없었고, 강의를 통해 기초부터 다뤄주면서 프로젝트도 같이 진행할 수 있었다.

유데미의 여러 프론트엔드 실습 강의 중에 <프로젝트 React.js>가 나의 부족한 점을 가장 채워줄 수 있을 것으로 생각하여 선택하게 되었다.

공부하는 방법

React.js가 초면이 아니기 때문에 강의를 가볍게 듣다가 조금이라도 모르는 것이 있으면 자세히 들어봤다. 예를 들면 리액트의 state, prop, hook의 경우는 빠르게 넘어갔다. 반면 CSR, SSR, SSG, ISR 등 웹 페이지의 렌더링 방식에 대해 대략 들어본 정도였기에 이번에 어떤 흐름을 가지는지, 언제 적합한지 알 수 있어서 묵혔던 학습 리스트를 하나씩 제거해 속 시원했다.

<프로젝트 React.js>에서는 총 4개의 프로젝트가 있는데, 실습 프로젝트의 경우 먼저 혼자서 해보고 결과물을 바탕으로 강의와 비교했다.

공부한 것을 포함하여 만든 프로젝트 결과물은 Github Repository에 기록하였다.

도움이 된 점

참고 자료를 통한 이해하기 쉬운 설명

어떤 프론트엔드 강의 경우 메모장으로 설명하거나, 참고 자료를 직접 구글링하면서 보여주는 강사님도 있었다. 더욱이 다운받을 수 있는 형태로 올려준 소스코드가 강의 화면과 일치하지 않거나, 버전 문제가 생겨 에러가 발생하는 경우도 있었다. 그럴 때마다 만족스럽진 못했지만, 한편으로 스스로 공부할 수 있는 시간을 더 많이 가지게 되어 자기 주도 학습 역량을 기르는 것이라 생각했다.

그런데 <프로젝트 React.js>는 강사님께서 직접 제작한 참고 자료와 함께 정돈된 설명으로 이해도를 높이는 데 힘써주신 게 느껴졌다. 유데미의 강의 화면을 캡처할 수 없기에 이미지로 첨부가 불가능하여 아쉽지만, 혹시나 어떤 방식으로 강의를 진행하는지 궁금하다면 강사님의 강사님 유튜브 채널 - 이정환 Winderlood의 여러 강의 영상을 통해 맛보기를 해도 좋을 것 같다.

특히나 React.js가 왜 Virtual DOM 구조를 이루는지 설명한 영상이 인상깊었고, 꼼꼼히 공부했는데, 이 부분을 면접 질문으로 받은 적이 있어서 강의에서 듣고 이해한 그대로 설명했더니 좋은 평가를 받은 적이 있다.

수강생 커뮤니티 운영

강의를 듣다가 질문이 있는 경우 유데미 질문에도 등록할 수 있지만 피드백이 빠른 편이 아니다. 그런 경우 강사님뿐만 아니라 다른 수강생도 함께 생각해 볼 만 한 문제와 답변을 공유할 수 있는 단체 채팅방이 마련되어 있다.

해당 채팅방에서 비록 질문을 한 적은 없지만, 그래도 다른 프론트엔드 분들은 어떤 것을 궁금해하는지, 어떤 프로젝트를 하는지 살펴볼 수 있어서 유심히 볼 때도 많다. 완강을 하더라도 당분간은 단체 채팅방에 남아서 필요한 정보가 있다면 살펴볼 예정이다.

아쉬운 점

현재 최신 기술과의 괴리

<프로젝트 React.js>의 가장 치명적인 아쉬운 점은 Next.js 13 이전 page router를 다룬다는 것이다. 또한 모든 프로젝트가 JavaScript로 이루어져 있다. 그래서 최신 반영 사항을 알고자 한다면 별도로 공부해야한다. 나는 TypeScript 사용을 익숙하게 만들기 위해 따로 TypeScript로 프로젝트를 세팅하고 공부했다.
물론 page router가 현재 아예 쓰지 않는 방식은 아니지만 Next.js 14가 나오면서 많은 프로젝트에서 app router를 쓰기 시작하고, Next.js에서 권장 사항도 app router이다. 그래도 현재 app router를 적용한 프로젝트를 보면서 어떤 식으로 형태가 변화했는지 비교할 수 있는 시간을 가지는 것도 흥미로웠다.

프로젝트의 난이도

총 4개의 프로젝트가 있지만 첫 두 개는 API가 별도로 필요하지 않은 간단한 프로젝트였다. 요구사항을 생각하고 준비하는 데에 품을 들일 필요가 없었다. Counter, Todo 이 두 프로젝트는 많은 사람들이 이미 해봤을 것이라 예상된다. 세 번째와 네 번째는 제공되는 API를 연결하는 요구사항도 있기 때문에 비교적 난도가 있지만 이 또한 그렇게 복잡한 것을 요구하진 않는다. 네 번째 프로젝트는 세 번째 프로젝트는 Next.js로 마이그레이션 하는 것이다.

누구에게 추천하는가

⭕️ 리액트를 써본 적 있지만 깊은 동작 원리를 설명하기 어려운 사람
⭕️ NextJS를 처음 시작하는 사람

❌ Typescript를 공부하고 싶은 사람
❌ NextJS의 app router를 배우고 싶은 사람
❌ 수준 높은 프로젝트를 다양하게 진행해 보고 싶은 사람

프로젝트로 배우는 React.js & Next.js 마스터리 클래스를 수강하기 전 고민하는 분들에게 도움이 됐으면 합니다.

해당 콘텐츠는 유데미로부터 강의 쿠폰을 제공받아 작성되었습니다.

#유데미 #온라인강의 #프론트엔드