강의

멘토링

커뮤니티

개발 · 프로그래밍

/

프론트엔드

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

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

(4.4) 수강평 37개

수강생 452명

먼저 경험한 수강생들의 후기

수강 후 이런걸 얻을 수 있어요

  • 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

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

Responsive Design + 인터랙티브 웹

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

Music Player with Zustand

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

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

안녕하세요
입니다.

3,952

수강생

162

수강평

93

답변

4.8

강의 평점

5

강의

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

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

  • 🚀 Naver Boostcamp BE 멘토 경험

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

커리큘럼

전체

80개 ∙ (7시간 6분)

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

수강평

전체

37개

4.4

37개의 수강평

  • kotlinjava님의 프로필 이미지
    kotlinjava

    수강평 21

    평균 평점 5.0

    5

    100% 수강 후 작성

    There's a lot of content about caching and performance optimization in Next.js, so I personally felt the need to study UI, but I wasn't drawn to HTML and CSS lectures. I happened to find this lecture and took it, and the instructor's skills are just on another level...lol. But surprisingly, as I followed along and typed, I felt like I was improving, maybe because it was becoming ingrained in my muscle memory. It was great for learning Shadcn and Tailwind. I'm looking forward to Part 2 coming out soon.

    • zmlee128891님의 프로필 이미지
      zmlee128891

      수강평 2

      평균 평점 4.0

      3

      100% 수강 후 작성

      It was so good, but the ending was a bit abrupt, so it was a little disappointing.

      • dodocoding
        지식공유자

        Thank you for taking the class. ~ I should have delivered it in a more systematic way, but I will see you again with a better class.

    • smc91191589님의 프로필 이미지
      smc91191589

      수강평 13

      평균 평점 5.0

      5

      100% 수강 후 작성

      I think this is the best of the nextjs lectures~ I listened to the good lectures~

      • dodocoding
        지식공유자

        Thank you 100% for taking the class! I will come back with a more upgraded lecture later. ~~

    • ghee3218844님의 프로필 이미지
      ghee3218844

      수강평 2

      평균 평점 5.0

      5

      11% 수강 후 작성

      • sthwin님의 프로필 이미지
        sthwin

        수강평 12

        평균 평점 4.3

        3

        100% 수강 후 작성

        I took the lecture to review React and Tailwind CSS. There were some parts where I felt like the explanation was a bit lacking, but I can't really say anything. There were also parts where I thought it would be better to just unify it with TypeScript. Still, it was very helpful while cloning.

        • dodocoding
          지식공유자

          Thank you for your review! I will come back with a better lecture next time. Thank you for listening to the lecture, which was lacking. If you have any questions in the future, I will answer them to the end.

      2025 블랙 프라이데이 깜짝 연장 할인 중 (1일 남음)

      ₩28

      24%

      ₩46,200

      도도(코딩루팡)님의 다른 강의

      지식공유자님의 다른 강의를 만나보세요!

      비슷한 강의

      같은 분야의 다른 강의를 만나보세요!