Skip to main content

[Udemy] Next.js & React - 완벽 정복 가이드 수강 후기

· 8 min read

들어가며​

2023년 11월부터(벌써 5개월이 지났다) 글또 9기를 시작했다. 글또에는 글에 진심인 사람들과, 배울 점이 많은 사람들이 정말 많다. 좋은 자극을 받는 것도 좋은데, 몇 가지 혜택(?)도 받을 수 있었다. 그 중 하나가 유데미 강의를 무료로 들어볼 수 있는 기회였다! 이번 포스팅은 그렇게 듣게된 유데미 강의 중 [Next.js & React - 완벽 정복 가이드 (incl. Two Paths!)]에 대한 수강 후기이다.

참고로, 나는 Next.js & React 모두 모르는 상태로 수강을 신청했다. 강의 설명 부분의 다음과 같은 문구를 보고 용기를 얻었다.

  • 본 강의 수강을 위한 NextJS 사전 시직은 필요하지 않습니다.
  • ReactJS 지식이 있으면 좋겠지만, React 전체 복습 모듈도 있습니다.
  • 아주 기초부터 시작하니 초보 지원자도 강의를 편안하게 들을 수 있습니다.

여담으로 그동안 실무에서는 Data Engineer & MLOps Engineer로 일했어서, 프론트엔드와는 거리가 먼 개발을 했었다. 하지만, 모름지기 개발자라면 원하는 것들은 모두 만들 수 있어야 한다고 생각해서, 이번 기회에 프론트엔드도 해보고 싶어서 신청했다. 무엇보다 실제 client와 소통하기 위해서는 프론트엔드는 필수적이기에, 반드시 익혀야 하는 기술이라고 생각했다.

강의 내용​

강의 대상​

  • 수준을 한 단계 끌어올리고 프로덕션 준비가 완료된 React 앱을 구축하고자 하는 React 개발자
  • 풀스택 React 앱 구축을 목표로 하는 React 개발자
  • 본 강의를 수강하여 가장 인기있고 수요가 많은 테크 스택으로 작업하고자 하는 웹 기초 개발자
  • IT 기술 업계에 커리어를 시작하는데 목표를 둔 신입생 및 취업준비생

다루는 내용​

  • NextJS란 무엇인가? NextJS를 왜 사용하는 걸까?
  • 왜 (대부분의 경우에) React만으로는 충분하지 않을까?
  • NextJS 프로젝트 처음부터 생성하기 & 프로젝트 이해하기
  • 파일 기반 라우팅 작업하기
  • 동적 라우트와 catch-all 라우트 추가하기
  • 페이지 사전 렌더링 및 서버 사이드 렌더링의 다양한 형태 구현하기
  • 데이터 작업하고 데이터 페칭을 추가해 앱에 사전 페칭하기
  • 서버 액션으로 양식 제출 처리하기
  • 파일 업로드 처리하기
  • 동적 및 정적 페이지 사전 생성하기
  • 페이지로 메타데이터 등의 최적화 추가하기
  • NextJS 이미지 컴포넌트를 통해 이미지 최적화하기
  • API 라우트 또는 서버 액션을 통해 풀스택 앱 구축하기
  • React Context를 통해 앱 전반에 걸친 상태 관리하기 (NextJS 앱 내에서)
  • NextJS 앱에 인증 추가하기
  • 다양한 앱에 이와 같은 핵심 개념 적용해 보기!
  • React.js 전체 복습 모듈 (모두 같은 수준에서 시작할 수 있도록 하기 위함)
  • 배운 내용을 복습할 수 있고, 핵심 기능만을 빠르게 훑어볼 수 있는 NextJS 요약 모듈

목차​

  1. 시작하기
  2. (Optional) React 복습하기
  3. NextJS 핵심 (앱 라우터)
  4. 페이지 & 파일 기반 라우팅
  5. 프로젝트 시간: 파일 기기반 라우팅 작업하기
  6. 페이지 사전 렌더링 & 데이터 페칭
  7. [프로젝트] 페이지 사전 렌더링 & 데이터 페칭
  8. NextJS 앱 최적화하기
  9. API 라우트를 통해 백엔드 코드 추가하기 (풀스택 React)
  10. [프로젝트] API 라우트
  11. 앱 전반 상태 작업하기 (React Context)
  12. 완성형 앱의 예시: 처음부터 끝까지 블로그 구축하기
  13. NextJS 앱 배포하기
  14. 인증 추가하기
  15. (Optional) NextJS 요약
  16. 마무리

사담​

가장 좋았던 것은 (Optional)로 되어 있는 부분이었다. [React 복습하기], [NextJS 요약] 부분인데, 바쁜 현대인을 위한 요약 섹션이다. 특히, React도 모르는 상태에서 들어서, [React 복습하기] 부분은 정말 도움이 많이 되었다. 모든 강의를 꼼꼼하게 듣는 것도 괜찮지만, [NextJS 요약] 강의를 듣다가 더 딥다이브 하고 싶은 부분에 대한 강의를 보거나, 외부 자료를 찾아보는 방식도 추천한다.

총평​

다음과 같은 니즈가 있다면, 위 강의를 한 번 고려해보자!

  • 프론트앤드 한 번 해보고 싶은데? 나도 웹사이트 한 번 만들어보자!
  • React, NextJS를 많이들 쓰는데, 뭔지 한 번 배워보고 싶다!
  • 핵심 개념을 빠르게 배우고, 프로젝트에 적용하면서 배우고 싶어!

프론트엔드를 처음하는 사람도 이해할 수 있게 쉽게 설명하고, 중요한 내용들을 알차게 배울 수 있는 강의였다. 하지만 강의 내용이 많기 때문에 전부를 듣지는 못했다(총 강의 시간은 32시간이 넘어간다…). 개인적으로 학습하고, 프로젝트도 진행해보고 하려면 정말 많은 시간이 소요될 것으로 보인다. 그래서 나는 [React 복습하기] & [NextJS 요약]을 알차게 활용해서 필요한 부분만 들었는데, 이것으로도 많이 배울 수 있었다.

다음 스텝으로, 나한테 필요한 웹 사이트를 만들어서 실제로 운영해보려고 한다. 실제 트래픽도 받아보고, 이런 저런 기능들을 추가해보면 재밌을 것 같다! 기능 개발할 때도 이 강의는 좋은 레퍼런스로 활용할 예정이다. 아무튼, “프론트앤드 한 번 해보고 싶다!” 라는 생각이 있다면, 추천하는 강의이다!!