손에 익는 Next.js - 공식 문서 훑어보기
공식 문서로 최신 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를 사용해 본 적은 있지만 새로운 개념에 대해 이해하지 못하고 있었어요.
마음먹고 새로운 기술을 이해해 보려고 노력하는 과정에 이번 강의를 만들게 됐어요. 가르칠 때 가장 많이 배운다는 걸 잘 아실 거예요. 배워서 남 주자는 마음으로 배우고 공부해서 이 강의를 준비했습니다. 이번 강의를 통해 여러분에게 아래와 같은 가치를 전달해 드리려고 해요.
- 1️⃣ 많은 프레임워크 중 Next.js를 배워야 할 이유를 알려드려요.
- 앞으로 프론트엔드 엔지니어로서 새로운 도구를 선택할 때 좋은 기준이 되는 지혜도 얻어가셨으면 좋겠습니다.
- 2️⃣ Next.js 13 버전에서 알아야 할 핵심 개념을 짚어드려요.
- 새로운 라우팅 시스템인 App Router을 필두로 서버 컴포넌트(Server Component), 데이터 페칭(Data Fetching), 캐싱(Caching) 그리고 재검증(Revalidating)까지 훑어보면서 "알고 보니 어렵지 않네" 하는 생각을 하셨으면 좋겠습니다.
- 3️⃣ 학습한 핵심 개념, 앱을 만들어 보면서 활용해요.
- 이 과정에서 실수도 하고, 에러도 마주하면서 실무에서 알아두면 좋을 깨알 정보를 얻어가셨으면 좋겠습니다.
이런 분을 생각하며 만들었어요 💁♂️
😢 Next.js... 나만 몰라
React를 배우고 실무에서 사용하고 있어요. 하지만 아직 Next.js는 제대로 배워본 적이 없어요. 다들 Next.js에 대해 이야기하는 데 저만 모르는 것 같아 불안해요.
📌 남들이 새로운 기술을 이야기한다고 꼭 배워야 하는 건 아니죠. 정말 필요할 때 배우셔도 늦지 않아요. 하지만 동료 개발자들과 함께 Next.js에 대해 이야기하고 싶으시다면 제 강의가 도움이 될 것 같습니다!
😵💫 공식 문서 보는 것도 어려워요
Next.js 13 버전을 배우려고 공식 문서를 봤는데도 이해가 가질 않아요. 누군가 같이 공식 문서에서 핵심을 요약해 주고 같이 공부할 수 있으면 좋겠어요.
📌 공식 문서는 분명 좋은 학습 자료이지만, 분량이 방대해서 부담스러울 수 있죠. 경험 있는 선배가 필요한 부분을 짚어준다면 시간 대비 높은 효율로 학습할 수 있지 않을까요? 이번 강의는 Next.js의 공식 문서를 기반으로 핵심 개념을 요약했어요.
🤔 실제론 어떻게 써야 하지?
공식 문서를 보고 따라 했는데 생각한 것처럼 동작하지 않아요. 뭐가 문제인지 모르겠어요. 검색을 해봐도 Next.js 13이 나온 지 얼마 되지 않은 탓인지 제대로 된 결과를 찾기가 어렵네요.
📌 공식 문서에 나와 있는 코드를 따라 하다 보면 생각처럼 동작하지 않는 경우를 만나게 되죠. 저도 강의를 준비하면서 당황스러웠던 적이 몇 번 있어요. 이 강의에서는 실제 동작하는 코드를 공유해 드려요.
이 강의를 통해 얻는 것들 💎
1. 기술을 바라보는 관점이 변해요
많은 기술이 그렇듯 Next.js 역시 문제 해결을 위해 세상에 등장했다고 생각해요. 저는 강의에서 핵심을 전달하고, 각각이 도구로써 어떤 의미가 있는지 설명해 드리고 싶어요.
- Next.js가 세상에 있기까지 JavaScript 프레임워크가 어떻게 변했는지 이해할 수 있어요.
- 문제 해결의 도구로써 Next.js가 배울만한 가치가 있는 도구라는 점을 이해할 수 있어요.
2. 언제든 꺼내볼 수 있는 학습 자료가 생겨요
좋은 강의는 오래도록 머릿속에 남는다고 생각해요. 하지만 우리의 기억력은 한계가 있죠. 필요할 때면 언제든 찾아볼 수 있는 핸드북과 소스 코드를 제공해서 실제적인 도움이 되고 싶어요.
- Next.js 공식 문서에서 핵심만을 요약한 핸드북을 제공해요.
- 강의에서 함께 만든 프로젝트의 소스 코드를 제공해요.
- 질문에 최대한 신속하게 답변드려요. 수강생 많아지면 별도의 채널을 운영해요.
무엇을 배우게 되나요? 📚
총 세 개의 섹션으로 구성되어 있어요.
섹션 1.
왜 Next.js를 배우는가?
Next.js가 세상에 있기까지 어떤 일이 있었는지 살펴봐요. JavaScript의 등장부터 jQuery, AngularJS, React와 같은 도구가 어떤 문제를 해결하려고 했는지 이해할 수 있는 시간으로 준비했어요. 자연스럽게 Next.js가 등장하게 된 배경을 알게 되실 거예요!
섹션 2
Next.js 기본 배우기
Next.js의 공식 문서에서 핵심만을 추렸어요. Next.js가 무엇인지 살펴보고 Next.js 13에서 달라진 점을 확인할 수 있어요. 새롭게 도입된 서버 컴포넌트(Server Component)은 물론이고 파일 시스템 기반의 라우팅(Routing), 데이터 페칭(Data Fetching), 메타데이터(Metadata)까지 이해하실 수 있어요!
.png)
섹션 3.
Next.js 손에 익히기
앞선 챕터에서 배운 내용을 실제 코드로 옮겨보는 과정이에요. 날씨 앱을 만들며 머릿속에만 있던 개념을 실제로 써먹어 볼 수 있어요. 날씨 API를 직접 호출해 보고 데이터 페칭, 캐싱(Caching), 재검증(Revalidating)까지 해보면서 Next.js를 손에 익히게 되실 거예요!
.png)
참고해주세요 📢
실습 환경과 학습 자료에 대해 안내드려요! 저는 맥북 에어 M1 8GB 메모리 모델을 사용했어요.
실습 환경
- 운영 체제 및 환경: macOS, Node.js 18.17.0
- 사용 도구: VSCode
- 사용 서비스: Vercel, WeatherAPI, TimeAPI
학습 자료
강의를 듣기 전에
- 무료로 공개된 강의를 먼저 들어보시길 권해드려요.
- 뱅크샐러드에서 했던 클린코드 관련 발표를 보시는 것도 강의 스타일을 이해하시는 데 도움이 되실 거예요.
이런 분들께
추천드려요!
학습 대상은
누구일까요?
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