
손에 익는 Next.js - 블로그 만들기
하조은
Next.js로 개인 블로그를 만들며 Next.js를 손에 익혀봐요!
초급
Next.js, React, 블로그
공식 문서로 최신 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
1,042
명
수강생
80
개
수강평
45
개
답변
4.8
점
강의 평점
3
개
강의
마플, 뱅크샐러드 거쳐 현재는 당근에서 프론트엔드 엔지니어로 일하고 있습니다.
"난 네가 필요해", "너의 존재가 나에게 힘이 돼"라는 말을 좋아합니다. 이웃의 필요를 채워주고 힘이 되어 주는 것, 그게 사랑이라고 믿습니다. 좋은 강의로 여러분의 필요를 채우고 힘이 되어드릴 수 있도록 노력하겠습니다.
전체
22개 ∙ (1시간 54분)
1. Intro: 안녕하세요
05:06
2. Next.js를 배우는 이유
07:10
3. Next.js는 무엇인가?
04:23
4. Next.js 13
02:30
6. 라우팅(Routing)
05:01
7. 페이지 간 이동
01:54
8. 스타일링
03:30
10. 메타데이터(Metadata)
03:05
전체
68개
4.9
68개의 수강평
수강평 15
∙
평균 평점 4.9
수강평 1
∙
평균 평점 5.0
수강평 26
∙
평균 평점 4.8
5
1년미만 주니어 개발자입니다. 갑작스레 프리랜서 개발자로 일하게 되었는데. Next 13기반 프로젝트여서 이 강의만 보고 투입되었습니다. 에센셜하게 반드시 알아야 하는 부분들을 공식문서 토대로 잘 설명해주시고, 질문에 대한 두루뭉술한 대답이 아닌 명확하고 상세한 답변을 제공해주셔서 수강생에게 해주시는 답변들을 주르륵 보고있노라면, 강의의 별책부록을 보고있는 느낌이 들었습니다. 부족한 자신감을 지식으로 채울 수 있도록 성심성의껏 도와주고 계신다는 느낌을 받았기에. 답례로 드릴 것이라곤 보잘것 없는 이런 수강평뿐이네요. 수강과 연관된 평은 아니나. 혹시 여유되신다면 예비/주니어 개발자분들은 강사님의 블로그 포스팅을 한번 훑어보시면 좋겠습니다. 우리가 개발자로서 고민하는 안개같은 고민을 대신 모아서 적어 놓은 것 같기도하고, 읽다보면 어떤 개발자가 될지 생각에 빠지게 되기도 하며, 회사와 내가 서로를 선택하는 과정을 글을 통해 간접체험 할수 있습니다. 재밌고 읽다보면 감정이입이 되서 심오(?)해집니다. 글만 봐도 좋은 개발자이심이 보입니다. 네카라쿠배당토같은 타이틀만 보며 자책하던 스스로에게 큰 물음표를 던지게 해주셔서 정말 감사합니다. 스스로를 돌아볼 줄 알고 글을 통해 본인의 상황과 능력 등을 정의할 줄 아는 하조은님 같은 개발자가 되어야겠노라-. 하고 목표를 세웠네요. 좋은 스승님이십니다.
수강평 6
∙
평균 평점 4.5
5
내가 Next.js를 배울 때 이 강의로 시작했으면 훨씬 덜 답답했을텐데..! 라는 생각이 계속 나는 강의입니다. 강사님의 외부 강연과 유튜브 영상 등을 통해 강사님을 이전부터 알고 있었는데 이렇게 강의를 내셨다고 해서 들어보게 됐어요. 강의를 들어보니 확실히 공식 문서를 제대로 읽지 않고, 일단 이렇게 하면 이런 기능이 된다!식의 실무 위주로만 배웠던 학습법의 단점들이 커버되는 느낌입니다. 마치 친절한 학교 선배가 옆에서 이야기 하듯이 설명을 해주는 느낌이라 듣기도 편했고, 'use client'면 CSR인줄 이때까지 알았는데 바로 아니라고 설명해주고 시작하는 부분에서 뭔가 사람들이 간과하기 쉬운 점들을 탄탄하게 채워가며 기본기를 잘 다질 수 있는 좋은 강의라는 느낌을 받습니다.
수강평 6
∙
평균 평점 4.3
₩25,300