채널톡 아이콘
BEST

Next.js 시작하기

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

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 기본 문법

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

47,274

수강생

4,524

수강평

3,812

답변

4.9

강의 평점

17

강의

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

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

더보기

커리큘럼

전체

70개 ∙ (7시간 57분)

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

수강평

전체

77개

4.8

77개의 수강평

  • damin200369님의 프로필 이미지
    damin200369

    수강평 1

    평균 평점 5.0

    5

    100% 수강 후 작성

    강의 잘 들었습니다! 후속으로 나올 강의들도 기대하겠습니다 :) 핵심도 핵심이지만, 강의에서 하나하나 설명해주시고 특히 정리해서 제공해주시는 노트가 너무 좋습니다!

    • 강의 특장점들을 잘 짚어주셔서 감사합니다. 다음 강의도 빨리 들고 올게요! :)

  • 퇴근하고싶어님의 프로필 이미지
    퇴근하고싶어

    수강평 2

    평균 평점 5.0

    5

    84% 수강 후 작성

    갑자기 Next.js를 할 일이 생겨서 막막했던 신입 개발자 입니다...ㅜㅜ 포지션도 백엔드라 기존에 프론트 관련 프레임워크를 다룰일이 별로 없어서 뭐부터 접근해야할까 막막했는데 사회 초년생에게 부담 없는 가격으로 너무 재밌게 수강했습니다!! (저렴하다고 퀄리티가 떨어지지 않습니다!! ) 다른 수강평에서 디테일에 대한 아쉬움을 말씀하시는 분들도 있는데, 어느정도 사전 학습이 되어있는 분들이 듣기를 추천드립니다... 저는 개인적으로 오히려 군더더기가 없고 필요한 디테일을 다시 상기시켜주신다는 느낌으로 잡아주시고 가주셔서 너무 좋았습니다!! 심화편 기원 오늘부터 물떠놓고 기도합니다!!

    • 민갱님의 프로필 이미지
      민갱

      수강평 2

      평균 평점 5.0

      5

      100% 수강 후 작성

      판교 캡틴님 강의는 처음 수강하네요 저는 사수 없이 일하고 있는 3개월 차 개발자입니다. 제가 많은 강의를 들어보았지만 다른 분들 이야기 하시는 것처럼 흡입력이 굉장히 좋으시네요! 빠른 호흡으로 몇 일만에 목표를 잡아두고 1차 완강을 해내었습니다. 물론 흡입력도 좋았지만 궁극적으로 "이건 다음 강의에서 알려드릴게요." 하시는데 궁굼해서 계속적으로 다음 강의를 듣게 되네요. nextjs 를 가르치는 강의는 많이 보실 수 있지만, 왜? 를 가르쳐 주고 궁굼증을 일으키게 하는 강의는 찾기 쉽지 않다고 생각합니다. 궁극적으로 원론? 을 파헤쳐야 한다고 점점 생각이 드는데요! 그런 맥락에서 제 온라인 사수 라고 생각하고 현업에서의 꿀팁과 이 코드를 "왜" 작성해야 하는지 알려주셔서 너무 좋았습니다. (여타의 강의에서는 제가 못 찾거나 떠먹지 못할 수도 있었겠지만요 ..) 그런 의미에서 선생님 얼른 앱라우터를 이용한 심화 next 강의 가져와주세요 .. 쉬지말고 일해주십시오.. 그 동안 저는 가르쳐 주신 것을 현업에 녹아내고 있겠습니다..

      • 세상에.. 감동적인 수강평이네요 ㅋㅋ 쉬지 않고 일하고 있습니다. 다음 강의 나오면 선물로 드릴게요! 감사합니다 :)

    • Ara Jo님의 프로필 이미지
      Ara Jo

      수강평 3

      평균 평점 5.0

      5

      100% 수강 후 작성

      역시 캡틴판교! 필요한 부분을 딱 짚어주는 군더더기 없는 설명에 강의 보충 자료도 풍부하고 집중하기 딱 좋은 강의 길이 등등 정말 완벽한 강의였습니다 (귀에 딱딱 박히는 딕션에 멋진 목소리는 덤) 갑자기 next.js 안건을 맡게 되어 막막했는데 정말 많은 도움이 되었어요 생각날때마다 판교쪽으로 절 한번씩 올릴게요 앞으로도 소처럼 일해주세요 화이팅!

      • 민경언님의 프로필 이미지
        민경언

        수강평 8

        평균 평점 3.1

        4

        100% 수강 후 작성