공식 문서로 최신 Next.js를 배워봅니다. 문제 해결의 도구로써 Next.js가 필요한 이유를 이해하실 수 있어요!
이런 걸
배워요!
문제 해결의 도구로써 Next.js의 필요성 이해하기
Next.js의 기본 개념과 App Router를 배우고 손에 익히기
React 18에서 등장한 서버 컴포넌트(RSC) 맛보기
당근 엔지니어와 함께 공부하는
Next.js 13! 💡
프론트엔드 개발자라면, Next.js
Next.js는 웹 앱을 제작하고 배포하는 데 강력한 도구입니다.
웹 앱을 빠르고 효율적으로 구축할 수 있게 하는 Next.js는 현재 넷플릭스, 나이키, 틱톡 등의 기업에서도 활발히 사용되고 있습니다.
마플, 뱅크샐러드 거쳐 현재는 당근에서 프론트엔드 엔지니어로 일하고 있습니다.
프론트엔드 엔지니어들은 매일 같이 쏟아지는 새로운 기술에 부담감을 느끼죠. 어쩌면 Next.js에 대해서도 부담감을 느끼고 계실지도 모르겠어요. 최근에는 React 18의 최신 기능을 도입한 Next.js 13 버전이 나오면서 그 부담감이 커졌을 것 같아요.
저 역시 그랬어요. Next.js를 사용해 본 적은 있지만 새로운 개념에 대해 이해하지 못하고 있었어요.
마음먹고 새로운 기술을 이해해 보려고 노력하는 과정에 이번 강의를 만들게 됐어요. 가르칠 때 가장 많이 배운다는 걸 잘 아실 거예요. 배워서 남 주자는 마음으로 배우고 공부해서 이 강의를 준비했습니다. 이번 강의를 통해 여러분에게 아래와 같은 가치를 전달해 드리려고 해요.
😢 Next.js... 나만 몰라
React를 배우고 실무에서 사용하고 있어요. 하지만 아직 Next.js는 제대로 배워본 적이 없어요. 다들 Next.js에 대해 이야기하는 데 저만 모르는 것 같아 불안해요.
📌 남들이 새로운 기술을 이야기한다고 꼭 배워야 하는 건 아니죠. 정말 필요할 때 배우셔도 늦지 않아요. 하지만 동료 개발자들과 함께 Next.js에 대해 이야기하고 싶으시다면 제 강의가 도움이 될 것 같습니다!
😵💫 공식 문서 보는 것도 어려워요
Next.js 13 버전을 배우려고 공식 문서를 봤는데도 이해가 가질 않아요. 누군가 같이 공식 문서에서 핵심을 요약해 주고 같이 공부할 수 있으면 좋겠어요.
📌 공식 문서는 분명 좋은 학습 자료이지만, 분량이 방대해서 부담스러울 수 있죠. 경험 있는 선배가 필요한 부분을 짚어준다면 시간 대비 높은 효율로 학습할 수 있지 않을까요? 이번 강의는 Next.js의 공식 문서를 기반으로 핵심 개념을 요약했어요.
🤔 실제론 어떻게 써야 하지?
공식 문서를 보고 따라 했는데 생각한 것처럼 동작하지 않아요. 뭐가 문제인지 모르겠어요. 검색을 해봐도 Next.js 13이 나온 지 얼마 되지 않은 탓인지 제대로 된 결과를 찾기가 어렵네요.
📌 공식 문서에 나와 있는 코드를 따라 하다 보면 생각처럼 동작하지 않는 경우를 만나게 되죠. 저도 강의를 준비하면서 당황스러웠던 적이 몇 번 있어요. 이 강의에서는 실제 동작하는 코드를 공유해 드려요.
많은 기술이 그렇듯 Next.js 역시 문제 해결을 위해 세상에 등장했다고 생각해요. 저는 강의에서 핵심을 전달하고, 각각이 도구로써 어떤 의미가 있는지 설명해 드리고 싶어요.
좋은 강의는 오래도록 머릿속에 남는다고 생각해요. 하지만 우리의 기억력은 한계가 있죠. 필요할 때면 언제든 찾아볼 수 있는 핸드북과 소스 코드를 제공해서 실제적인 도움이 되고 싶어요.
총 세 개의 섹션으로 구성되어 있어요.
Next.js가 세상에 있기까지 어떤 일이 있었는지 살펴봐요. JavaScript의 등장부터 jQuery, AngularJS, React와 같은 도구가 어떤 문제를 해결하려고 했는지 이해할 수 있는 시간으로 준비했어요. 자연스럽게 Next.js가 등장하게 된 배경을 알게 되실 거예요!
Next.js의 공식 문서에서 핵심만을 추렸어요. Next.js가 무엇인지 살펴보고 Next.js 13에서 달라진 점을 확인할 수 있어요. 새롭게 도입된 서버 컴포넌트(Server Component)은 물론이고 파일 시스템 기반의 라우팅(Routing), 데이터 페칭(Data Fetching), 메타데이터(Metadata)까지 이해하실 수 있어요!
앞선 챕터에서 배운 내용을 실제 코드로 옮겨보는 과정이에요. 날씨 앱을 만들며 머릿속에만 있던 개념을 실제로 써먹어 볼 수 있어요. 날씨 API를 직접 호출해 보고 데이터 페칭, 캐싱(Caching), 재검증(Revalidating)까지 해보면서 Next.js를 손에 익히게 되실 거예요!
실습 환경과 학습 자료에 대해 안내드려요! 저는 맥북 에어 M1 8GB 메모리 모델을 사용했어요.
학습 대상은
누구일까요?
Next.js의 주요 개념을 이해하고 싶으신 분들
React의 최신 기능을 써보고 싶으셨던 분들
JavaScript 프레임워크 선택에 고민이 있는 분들
선수 지식,
필요할까요?
HTML & CSS
JavaScript
React
TypeScript
마플, 뱅크샐러드 거쳐 현재는 당근에서 프론트엔드 엔지니어로 일하고 있습니다.
"난 네가 필요해", "너의 존재가 나에게 힘이 돼"라는 말을 좋아합니다. 이웃의 필요를 채워주고 힘이 되어 주는 것, 그게 사랑이라고 믿습니다. 좋은 강의로 여러분의 필요를 채우고 힘이 되어드릴 수 있도록 노력하겠습니다.
전체
22개 ∙ (1시간 54분)
Intro: 안녕하세요
05:06
Next.js를 배우는 이유
07:10
Next.js는 무엇인가?
04:23
Next.js 13
02:30
라우팅(Routing)
05:01
페이지 간 이동
01:54
스타일링
03:30
메타데이터(Metadata)
03:05