Thumbnail
BEST
개발 · 프로그래밍 프론트엔드

[손에 익는 Next.js] Part 1 - 공식 문서 훑어보기 대시보드

(4.9)
53개의 수강평 ∙  546명의 수강생

25,300원

지식공유자: 하조은
총 22개 수업 (1시간 54분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

공식 문서로 Next.js 13을 배워봅니다. 문제 해결의 도구로써 Next.js가 필요한 이유를 이해하실 수 있어요! Next.js 14에서도 배운 내용을 모두 활용하실 수 있어요!

✍️
이런 걸
배워요!
문제 해결의 도구로써 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)까지 이해하실 수 있어요!

섹션 3.
Next.js 손에 익히기

앞선 챕터에서 배운 내용을 실제 코드로 옮겨보는 과정이에요. 날씨 앱을 만들며 머릿속에만 있던 개념을 실제로 써먹어 볼 수 있어요. 날씨 API를 직접 호출해 보고 데이터 페칭, 캐싱(Caching), 재검증(Revalidating)까지 해보면서 Next.js를 손에 익히게 되실 거예요!


참고해주세요 📢

실습 환경과 학습 자료에 대해 안내드려요! 저는 맥북 에어 M1 8GB 메모리 모델을 사용했어요.

실습 환경

  • 운영 체제 및 환경: macOS, Node.js 18.17.0
  • 사용 도구: VSCode
  • 사용 서비스: Vercel, WeatherAPI, TimeAPI

학습 자료

강의를 듣기 전에

  • 무료로 공개된 강의를 먼저 들어보시길 권해드려요.
  • 뱅크샐러드에서 했던 클린코드 관련 발표를 보시는 것도 강의 스타일을 이해하시는 데 도움이 되실 거예요. 

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
Next.js의 주요 개념을 이해하고 싶으신 분들
React의 최신 기능을 써보고 싶으셨던 분들
JavaScript 프레임워크 선택에 고민이 있는 분들
📚
선수 지식,
필요할까요?
HTML & CSS
JavaScript
React
TypeScript

안녕하세요
하조은 입니다.
하조은의 썸네일

마플, 뱅크샐러드 거쳐 현재는 당근에서 프론트엔드 엔지니어로 일하고 있습니다.

 

"난 네가 필요해", "너의 존재가 나에게 힘이 돼"라는 말을 좋아합니다. 이웃의 필요를 채워주고 힘이 되어 주는 것, 그게 사랑이라고 믿습니다. 좋은 강의로 여러분의 필요를 채우고 힘이 되어드릴 수 있도록 노력하겠습니다.

커리큘럼 총 22 개 ˙ 1시간 54분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의 및 강사 소개
섹션 1. 왜 Next.js를 배우는가?
섹션 2. Next.js 기본 배우기
Next.js는 무엇인가? 미리보기 04:23 Next.js 13 미리보기 02:30
서버 컴포넌트(Server Component) 06:08
라우팅(Routing) 05:01
페이지 간 이동 01:54
스타일링 03:30
데이터 페칭(Data Fetching) 06:44
메타데이터(Metadata) 03:05
섹션 3. Next.js 손에 익히기
프로젝트 소개 및 환경 설정 미리보기 04:56
페이지 구성하기 04:47
페이지 간 이동하기 05:55
페이지 스타일 입히기 05:04
날씨 API 사용하기 05:25
날씨 데이터 조회하기 1 05:02
에러, 로딩 페이지 만들기 03:48
날씨 데이터 조회하기 2 09:13
날씨 데이터 재검증하기 09:02
메타데이터 다루기 05:42
서비스 배포하기 05:57
섹션 4. 마치며
정리 & 후속 강의 예고 04:21
강의 게시일 : 2023년 09월 26일 (마지막 업데이트일 : 2023년 09월 26일)
수강평 총 53개
수강생분들이 직접 작성하신 수강평입니다.
4.9
53개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
Peter Cha thumbnail
5
내가 Next.js를 배울 때 이 강의로 시작했으면 훨씬 덜 답답했을텐데..! 라는 생각이 계속 나는 강의입니다. 강사님의 외부 강연과 유튜브 영상 등을 통해 강사님을 이전부터 알고 있었는데 이렇게 강의를 내셨다고 해서 들어보게 됐어요. 강의를 들어보니 확실히 공식 문서를 제대로 읽지 않고, 일단 이렇게 하면 이런 기능이 된다!식의 실무 위주로만 배웠던 학습법의 단점들이 커버되는 느낌입니다. 마치 친절한 학교 선배가 옆에서 이야기 하듯이 설명을 해주는 느낌이라 듣기도 편했고, 'use client'면 CSR인줄 이때까지 알았는데 바로 아니라고 설명해주고 시작하는 부분에서 뭔가 사람들이 간과하기 쉬운 점들을 탄탄하게 채워가며 기본기를 잘 다질 수 있는 좋은 강의라는 느낌을 받습니다.
2023-09-27
오일 thumbnail
5
리액트를 어느정도 아는사람이 듣기엔 이만한게 없네요 최고입니다. 쓸데없는 설명도없고 궁금한 부분만 쏙쏙 알려줘서 좋습니다.
2024-01-18
jinho kim thumbnail
5
next.js를 처음 배우면서 공식문서를 봐도 무슨 말인지 이해하기 힘들었는데 정말 핵심을 간략하게 잘 설명해주셔서 많은 도움이 된 것 같습니다~제가 인프런에서 여러 수업을 들었지만 댓글은 처음 남겨보는데요, 앞으로도 좋은 강의 많이 부탁드리겠습니다~
2023-12-14
jack thumbnail
5
"쉽다고 생각할수록 당연하고, 중요한 것 " 강의 너무 잘들었습니다. 감사합니다.
2023-09-30
nomoobii thumbnail
5
저희는 2인 개발팀인데 두 명 모두 백엔드 개발 경험만있고, 프론트엔드 공부를 조금은 해본 제가 프론트엔드 파트를 맡게 되었습니다. 짧게 Next.js 의 기능에 대해 다뤄볼 수 있어 좋았습니다. 여기서 배운 지식으로 프로젝트에 적용하면서 공부해보면 좋을 것 같네요!
2023-09-28