인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
개발 · 프로그래밍

/

프론트엔드

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

React, Next.JS 14, TailwindCss, RadixUI, Shadcn, zustand 으로 YoutubeMusic 웹사이트를 클론합니다. NextJS 기초부터 UI 중점으로 웹프론트 기초를 마스터 할 수 있어요.!

(4.4) 수강평 33개

수강생 394명

Next.jsReactTailWindCSSzustand클론코딩
Thumbnail

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

이런 걸
배워요!

  • Next.js App Router

  • (이론) React Suspense ( Streaming, Progressive Hydration )

  • (이론) Next.js 랜더링 방식 및 CSR, SSR, Hydration

  • Next.js RSC, RCC, use client

  • TailwindCSS, RadixUI, Shadcn

  • YT Music Player CloneCoding

  • Zustand 상태관리

  • Typescript 타이핑 기초

  • 반응형 UI를 개발하는 방법

요즘 FE개발자에게 요구된다는 NextJS 기술스택!
NextJS 실무에 필요한 부분만 딱 담았어요 🍭

리액트 공부 후 NextJS를 공식문서만 보고 프로젝트를 진행하기는 어렵습니다.
그래서 YoutubeMusic Clone 코딩을 통해 빠르고 쉽게,
단 하루만에! NextJS를 잘 쓰실 수 있도록 강의를 만들었어요.
나만의 NextJS 프로젝트를 진행할때 이 강의는 Best 기반이 될 수 있습니다.

이 강의의 특징

📌 강의 필기 노트 안내 : 각 챕터별 Goal, 복습 포인트, 더 알아보기 (공식문서, 개념 등)

📌 강의 체크포인트 제공 : 코드를 따라 치지 않아도 괜찮아요! 챕터 별 Branch가 있습니다.

📌 이론 10% 실습 90% : 가장 어려운 랜더링, 서버컴포넌트, hydration 개념에 대해서 설명해요.

📌 포트폴리오 : 클론 코딩을 통해서 결과물을 얻어가실 수 있어요

이런 분들께 추천해요

React에서 Next로
확장 하고 싶어요!

React는 다룰 줄 알지만
Next에서 막혔다면,
이 강의가 딱이에요!

Next.js 프로젝트
만들고 싶어요!

Next.js 기반으로
당장 프로젝트를 해야 한다면,
좋은 길잡이가 될 거에요.

클론 코딩으로 쉽고
재밌게 체득하세요!

적절한 코드 베이스 바탕으로
나만의 프로젝트로 확장해보세요!

수강 후에는

  • 어떤 사이트를 보든 Next.js 로 클론 코딩 할 수 있어요. 😲

  • Next.js AppRouter를 통해서 프로젝트를 진행할 수 있습니다.

  • Zustand로 전역상태관리를 할 수 있어요.

  • 여러 가지 방식의 랜더링에 대한 이해와 PageRouter, React CSR, SSR, Hydration 알 수 있어요.

  • Vercel를 통해서 내가 만든 프로젝트를 다른 사람들에게 보여줄 수 있어요.

  • TailwindCSS + Radix UI + Shadcn 조합으로 누구보다 빠르게 UI 개발이 가능합니다.


이런 내용을 배워요 🏄🏾‍♀️

Next.js 14 AppRouter & ServerComponent

Next.js 14 AppRouter & ServerComponent

앱라우터로 전체 프로젝트 구조를 잡는 방법을 배웁니다. 그리고 언제 서버 컴포넌트를 사용해야 하는지 왜 서버컴포넌트가 필요한지 이론을 배우게 됩니다. FE 랜더링 변천사를 통해서 바닐라 JS > React > NextJS PageRouter > AppRoute 역사를 배워요.

Responsive Design + 인터랙티브 웹

Responsive Design + 인터랙티브 웹

모바일 및 태블릿 화면에 대응할 수 있는 전략을 소개합니다. 모바일 화면에서만 보이는 Drawer 등 UI Component 및 스타일링으로 디테일을 살렸어요. 추후 웹뷰로 감싸서 앱을 제작해 보면 어떨까요?

Music Player with Zustand

Music Player with Zustand

Zustand 전역 상태관리 도구를 사용해서, Player를 배웁니다. 사용자 경험을 향상하기 위한 디테일한 UI 스킬을 담았어요. Zustand로 어떤 페이지에서든 음악을 재생시키도록 이벤트를 연동합니다.

UI Components & Typescript

UI Components & Typescript

다양한 UI를 컴포넌트로 정리합니다. 그리고 필요한 경우 타입 스크립트를 적용하여 프로젝트에서 발생할 오류들을 사전에 막는 방법을 배웁니다.

수강 전 참고 사항

실습 환경

  • Node.js, VS Code, Github 를 사용합니다.


학습 자료

  • Github 및 챕터별 CheckPoint : Link

  • 필기 노트 및 워크북 제공 ! : Link

  • LiveDemo : Link

선수 지식 및 유의사항

  • 기본적인 HTML, CSS, React 지식

  • TailwindCSS로 스타일링 하고 있습니다. (+ 요약 강의가 있어요. 😀)

  • (*처음에 저는 TailwindCSS를 싫어했습니다. 하지만 처음에 러닝커브(1시간 정도) 개발 경험 향상 및 개발 속도가 압도적으로 빨라졌습니다.! 정말 후회 없으실 겁니다. )

지식공유자의
다른 강의가 궁금하다면?


이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • Next.js 로 프로젝트를 시작하시려는 분

  • Next.js 을 기반으로 퍼블리싱을 마스터 하고 싶은 분

  • 컴포넌트 라이브러리를 통해 빠르게 개발하려는 분

  • Next.js 기술스택을 늘리려는 FE개발자

선수 지식,
필요할까요?

  • 기초수준의 HTML, CSS, React

안녕하세요
도도(코딩루팡)입니다.

수강생 수

2,455

수강평 수

92

강의 평점

4.8

강의 수

4

  • 프론트 개발자로 네카라쿠배 중 하나의 IT서비스 기업에 재직하고 있습니다. 😀

  • 🚀 SW마에스트로 Expert 취업 멘토링

  • 🚀 Naver Boostcamp BE 멘토 경험

  • 🚀 FE 7Code 로드맵 강의 제작

커리큘럼

전체

80개 ∙ (7시간 6분)

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

수강평

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