BEST
개발 · 프로그래밍

/

프론트엔드

Next.js 시작하기

React를 시작할 때 꼭 알아야 하는 Next.js 프레임워크. 입문자 관점의 쉬운 설명과 실무자가 만족하는 심도 깊은 동작 원리 이해까지. Next.js를 한방에 해결합니다.

(4.8) 수강평 63개

수강생 548명

Next.jsReactJavaScript
Thumbnail

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

이런 걸
배워요!

  • Next.js 14(최신 버전)

  • Next.js 실무 프로젝트 폴더 구조

  • Next와 React 컴포넌트 설계

  • Next.js 실무 코딩 팁

  • React

  • JavaScript

  • NPM

  • REST API

  • 네트워크와 HTTP 프로토콜

  • 성능 최적화

Next.js를 많이 쓰던데 어떻게 배워야 할까요? 🤔

React 프로젝트를 시작하기 위해 거의 0순위로 선택되는 Next.js 프레임워크. React도 아직 잘 모르겠는데 Next.js는 어떻게 배우면 좋을까요?

개발 방식이 자유로운 React에 규칙을 더하고, 개발자들이 챙겨야 하는 라우팅과 성능 등을 알아서 챙겨주는 Next.js 프레임워크. 방대한 Next.js 공식 문서 앞에 혼자서 길을 잃을 필요가 없습니다. Next.js 공식 문서보다 이해하기 쉬운 한글 교안이 있으니까요. ❤


수년 간 입문자의 관점에서 어려운 기술들을 쉽게 설명해 온 캡틴판교가 이번엔 Next.js를 뽀개드립니다. 입문자를 배려한 쉬운 용어 설명과 눈으로 직접 보여주는 동작 원리부터 실무자를 사로 잡는 렌더링, 네트워크, 성능, 하이드레이션 등 실무 개념 설명까지. Next.js 시작하기 강의가 여러분을 도와드립니다.

이 강의의 특징

📌 REST API를 연동하여 쇼핑몰 사이트를 만들면서 Next의 기초 개념부터 고급 개념까지 모두 체득합니다.

📌 짧은 시간 안에 코드를 빠르고 정확하게 작성하는 11년차 프런트엔드 개발자의 꿀팁 대방출

📌 크롬 개발자 도구, HTTP 프로토콜, 성능 최적화 등 실전에서 꼭 알아야 하는 지식들도 같이 알려드립니다

📌 중간 중간 배운 내용을 소화할 수 있는 실습이 곳곳에 배치되어 있습니다.

📌 CSR, SSR, Hydration, 클라이언트 네비게이션 등의 모든 개념은 브라우저를 직접 까서 같이 눈으로 보고 이해해요.

📌 언제 어디서나 쉽게 접근할 수 있는 웹 사이트 기반 강의 교안이 제공됩니다.

이런 분들께 추천해요

Next.js 프로젝트를 시작해요.

React도 잘 모르는데 Next.js로 회사 프로젝트를 해야 돼요.
개발을 쉽게 하려면 어떤 개념들과 기술을 알아야 하나요?

React로 취업을 준비하고 있어요.
채용 공고마다 자격 요건에
Next.js가 들어가 있는데
회사에서 실제로 요구하는 역량이 무엇인가요?

잘하는 프런트엔드 개발자는
어떻게 일하는지 궁금해요
네카라쿠배에서 인정받는 개발자는 어떤 역량을 갖추고 있을까요?
숙련된 실무자가 알고 있는 지식과 노하우가 궁금합니다.

수강 후에는

  • Next.js로 웹 애플리케이션을 구현하는게 쉬워집니다.

  • 코드를 더 정확하고 빠르게 작성하는 스킬이 생깁니다.

  • 클라이언트 레벨의 지식 뿐만 아니라 서버, 네트워크, 성능 최적화에 대해서도 알게 됩니다.

  • 실무에서 프로젝트 생성부터 폴더 구조화 등의 전반적인 컨벤션까지 자신감 있게 주도할 수 있어요.

이런 내용을 배워요.

개발환경

실무 프로젝트 폴더 구조와 실무 개발 환경 설정 방법

Next.js의 기본 개념에 기반한 폴더 구조 설계 방법과 ESLint, Prettier를 이용해 코드 타이핑을 줄이고 개발 생산성을 줄이는 방법을 배워봅니다.

React + Next.js의 필수 개념과 문법들

작성한 코드의 흐름을 정확히 이해할 수 있게 친절하고 구체적인 도식으로 설명합니다. CSR, SSR, Hydration 뿐만 아니라 React, JavaScript 필수 문법까지 모두 설명해 주는 혜자 강의 🎁

네트워크, HTTP, 성능 최적화에 대한 깊은 이해

웹 페이지가 그려지기까지의 리소스 요청과 렌더링 과정에 대해 눈으로 직접 보여드리면서 설명합니다. 서버, CDN, HTTP, 성능 최적화 등 입문자 관점에서 낯선 용어는 모두 풀어서 설명해 드려요 ❤

코드를 짧은 시간에 빠르고 정확하게 작성하는 방법과 숙련된 실무자의 단축키 꿀팁

실무자의 중요한 스킬 중 하나인 코딩 실력과 구현 역량. 짧은 시간 안에 많은 기능을 정확하고 빠르게 구현할수 있는 단축키와 코딩 꿀팁을 대방출합니다 🚀

이 강의를 만든 사람 👨‍💻

장기효 (캡틴판교)

"인프런이 만난 사람" 인터뷰


수강 전 참고 사항

실습 환경

  • 운영 체제 및 버전(OS): 강의에서 Mac을 쓰지만 Windows 관련 단축키도 모두 설명합니다.

  • 사용 도구: VSCode

학습 자료

  • 언제든지 편하게 볼 수 있는 웹 사이트 교안이 제공됩니다 😄

  • 소스 코드를 확인할 수 있는 깃헙 리포지토리도 제공돼요 📘

  • 보면서 더 많은 지식을 채울 수 있는 무료 교육 영상과 자료도 다수 제공됩니다 ❤

선수 지식 및 유의사항

위즈 띠배너 모음
도라 띠배너 모음 (3)

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • Next.js를 시작하는 입문자

  • React와 Next.js를 한번에 배우고 싶은 입문자

  • Next.js 실무 개발이 궁금한 프런트엔드 개발자

  • Next.js에 관심 있는 웹 개발자

선수 지식,
필요할까요?

  • React 기본 문법(위 선수 지식에 안내된 강의를 듣고 오시는 걸 추천드려요)

  • JavaScript 기본 문법

안녕하세요
장기효(캡틴판교)입니다.

인프런에서 8년째 지식을 공유하고 있습니다. 🏠 기술블로그, 💻 깃헙

📗 Do it! Vue.js 입문, 쉽게 시작하는 타입스크립트, 나는 네이버 프런트엔드 개발자입니다. 책 3권 집필
📖 Cracking Vue.js, 타입스크립트 핸드북, 웹팩 핸드북. 온라인 무료 가이드북 3권 집필
👨‍💻 캡틴판교의 프론트엔드 개발 유튜브 채널 운영 - 취준생, 주니어 개발자들의 고민을 들을 수 있는 곳
🥤 캡틴판교의 카카오톡 오픈 채팅방 운영 - 프런트엔드 개발 최신 정보와 업계 동료들의 생각과 고민을 들을 수 있는 곳

커리큘럼

전체

70개 ∙ (7시간 57분)

강의 게시일: 
마지막 업데이트일: 

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!