Inflearn brand logo image
Inflearn brand logo image
개발 · 프로그래밍

/

프론트엔드

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

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

(4.4) 수강평 35개

수강생 435명

Next.jsReactTailwindCSSzustand클론코딩

초급자를 위해 준비한
[프론트엔드, 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

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

3,429

명

수강생

134

개

수강평

81

개

답변

4.8

점

강의 평점

5

개

강의

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

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

  • 🚀 Naver Boostcamp BE 멘토 경험

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

커리큘럼

전체

80개 ∙ (7시간 6분)

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

수강평

전체

35개

4.4

35개의 수강평

  • 코틀린자바님의 프로필 이미지
    코틀린자바

    수강평 19

    ∙

    평균 평점 5.0

    5

    100% 수강 후 작성

    next js 에서 캐싱처리나 음.. 최적화 같은 성능 관련 내용은 많아서 개인적으로 ui 공부가 필요했는데 html css 강의를 듣자니 끌리지 않고 그랬는데 마침 이 강의가 있어서 수강했는데 실력이 넘사네요..ㄷㄷ 근데 생각보다 따라치다보니 몸에 익어서 그런가 실력이 늘었다고 느껴졌습니다 shadcn 테일윈드 배우기 좋았습니다 파트2 도 곧 나오길 기다릴게요

    • 한건희님의 프로필 이미지
      한건희

      수강평 2

      ∙

      평균 평점 5.0

      5

      11% 수강 후 작성

      • 주민규님의 프로필 이미지
        주민규

        수강평 1

        ∙

        평균 평점 5.0

        5

        100% 수강 후 작성

        • Moon님의 프로필 이미지
          Moon

          수강평 11

          ∙

          평균 평점 5.0

          5

          100% 수강 후 작성

          nextjs 강의중 최고인거 같아요~ 좋은 강의 잘들었습니다~

          • 도도(코딩루팡)
            지식공유자

            100% 수강 감사합니다.! 더 업그레이드 된 강의로 추후 찾아 뵙겠습니다. ~~

        • zmlee12님의 프로필 이미지
          zmlee12

          수강평 2

          ∙

          평균 평점 4.0

          3

          100% 수강 후 작성

          너무 좋았어요 다만.. 마지막부분이 너무 급하게 끝난거 같아서 좀 아쉽네요

          • 도도(코딩루팡)
            지식공유자

            수강해주셔서 감사합니다.~ 좀 더 체계적으로 전달드려야 했는데 더 나은 강의로 뵙도록 하겠습니다.

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

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

        Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)강의 썸네일

        Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

        도도(코딩루팡)

        Firebase의 SQL버전! Supabase를 통해 Next.js 풀 스택 기초를 마스터 할 수 있어요.!

        초급

        초급

        Next.js, supabase, React

        개발자 취업 전략 시크릿 - 7CODE (네카라쿠배 로드맵 완성)강의 썸네일

        개발자 취업 전략 시크릿 - 7CODE (네카라쿠배 로드맵 완성)

        도도(코딩루팡)

        프론트 개발자 취업에 필요한 단계를 7가지 코드로 정리했습니다. 저는 개발자 선배가 없어서 취준때 막연했는데, 이제 걱정하지 마세요. 😀

        입문

        입문

        면접, 기술면접, 포트폴리오

        React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)강의 썸네일

        React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)

        도도(코딩루팡)

        1시간안에 끝내는 React기반의 GPT AI서비스 강의 수강 후 나만의 AI GPT SASS 솔루션을 만들어 보세요.

        초급

        초급

        React, ChatGPT, JavaScript

        1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)강의 썸네일

        1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)

        도도(코딩루팡)

        Next.js + Cursor IDE 로 챗 프로그램을 한시간만에 구현하는 능력을 가질 수 있어요.

        입문

        입문

        nextjs, ChatGPT, React

        비슷한 강의

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

        초보자를 위한 Sass 기초 강의 & 자몽톡 클론코딩강의 썸네일

        초보자를 위한 Sass 기초 강의 & 자몽톡 클론코딩

        유노코딩

        Sass는 CSS의 확장 언어입니다. CSS의 단점을 보완해 뛰어난 생산성을 보장하며, 강력하고 간결합니다. 기초 구문을 배우고, 배운 내용을 활용한 클론코딩을 즐기면서 Sass를 배워보세요. 재미는 더하고 부담은 덜었습니다!

        초급

        초급

        Sass, 클론코딩, HTML/CSS

        Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)강의 썸네일

        Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

        도도(코딩루팡)

        Firebase의 SQL버전! Supabase를 통해 Next.js 풀 스택 기초를 마스터 할 수 있어요.!

        초급

        초급

        Next.js, supabase, React

        R3F(React + Three.js / Typescript)로 인터렉티브 포트폴리오 만들기강의 썸네일

        R3F(React + Three.js / Typescript)로 인터렉티브 포트폴리오 만들기

        코딩의세계 한태재

        React와 Three.js 를 한번에! 인터렉티브 웹의 기초인 Vector부터 GSAP까지 배울 수 있어요. 3가지 예제를 하나의 포트폴리오로 통합하는 팁과 노하우!

        초급

        초급

        인터랙티브 웹, Three.js, TypeScript

        Next.js 완벽 마스터 (v15): Notion 기반 개발자 블로그 만들기 (with Cursor AI)강의 썸네일

        Next.js 완벽 마스터 (v15): Notion 기반 개발자 블로그 만들기 (with Cursor AI)

        짐코딩

        최신 Next.js v15 App Router를 학습하며 Notion 기반의 실용적인 개발자 블로그를 함께 구축하는 강의입니다. 추가로 Cursor AI 활용법 등 다양한 인사이트도 얻을 수 있습니다.

        초급

        초급

        Next.js, CursorAI, React

        카페 24 베스트 쇼핑몰 디자인 클론코딩하기 (HTML + CSS)강의 썸네일

        카페 24 베스트 쇼핑몰 디자인 클론코딩하기 (HTML + CSS)

        같이코딩

        카페 24에 올라온 베스트 쇼핑몰 디자인을 직접 클론코딩해보며 빠르게 HTML과 CSS를 학습할 수 있습니다. HTML + CSS에 대한 기본적인 이론을 학습하고 직접 클론코딩을 통해 쇼핑몰 디자인을 완성하여 이론에서 배웠던 내용을 적용하고 견고하게 HTML과 CSS의 틀을 잡을 수 있게 강의를 구성했습니다

        입문

        입문

        클론코딩, HTML/CSS, 웹 디자인

        BBC 인터랙티브 페이지 "코로나19가 바꿀 사무실의 미래" 클론강의 썸네일

        BBC 인터랙티브 페이지 "코로나19가 바꿀 사무실의 미래" 클론

        1분코딩

        SNS에서 인기리에 공유되고 있는 BBC의 "코로나19가 바꿀 사무실의 미래" 인터랙티브 페이지의 핵심 기능을 똑같이 만들어 봅니다.

        초급

        초급

        인터랙티브 웹, 클론코딩

        따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)강의 썸네일

        따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

        John Ahn

        이 강의를 통해서 레딧 웹사이트를 처음부터 하나하나 만들어 보실 수 있습니다.

        초급

        초급

        클론코딩, Node.js, React

        1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)강의 썸네일

        1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)

        도도(코딩루팡)

        Next.js + Cursor IDE 로 챗 프로그램을 한시간만에 구현하는 능력을 가질 수 있어요.

        입문

        입문

        nextjs, ChatGPT, React

        모바일, 태블릿, pc 반응형 인스타그램 클론코딩강의 썸네일

        모바일, 태블릿, pc 반응형 인스타그램 클론코딩

        더코딩클럽

        이 강의를 통해 수강생은 HTML, CSS, JS로 인스타그램과 비슷한 웹서비스를 만들 수있습니다. ( 프론트만 구현했습니다! 백엔드 서버 구축은 차후 강의 촬영 예정입니다.)

        초급

        초급

        HTML/CSS, JavaScript, 클론코딩

        [풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)강의 썸네일

        [풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

        로펀

        풀스택 개발에 날개를 달아줄 Supabase! 3가지의 클론 프로젝트를 통해 Next.js 14와 Supabase로 실무 수준의 풀스택 개발을 하는 법을 속성으로 배우게 됩니다.

        초급

        초급

        Next.js, supabase, TailwindCSS

        비전공자도 가능한 초간단 단톡방 만들기 (바이브코딩, Cursor AI)강의 썸네일

        비전공자도 가능한 초간단 단톡방 만들기 (바이브코딩, Cursor AI)

        체험코딩

        이 강의를 모두 들으시고, 응용하면 여러분만의 사이트, 앱을 만들 수 있어요. 이 강의는 Cursor AI 를 이용하여, 우리 가족만을 위한 단톡방을 Web사이트로 만들면서, 코딩의 흐름을 자연스럽게 익혀보는 바이브코딩 입문 강의입니다. App 개발자 계정이나 맥북 없이, 윈도우 환경만으로도 개발을 몰라도 누구나 쉽게 따라 할 수 있고, 실제 웹사이트로 배포하는 법도 배웁니다.

        입문

        입문

        Firebase, Next.js, vercel

        웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크강의 썸네일

        웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

        코드캠프

        웹 개발을 활용해서 Android와 IOS에 서비스 가능한 모바일앱 개발을 할 수 있도록 도와주는 강의입니다.

        초급

        초급

        React, Next.js, expo

        [환상의족발] 디자인부터 코딩까지강의 썸네일

        [환상의족발] 디자인부터 코딩까지

        두노피

        맛있는 족발이에요~ 요즘 족발 장난 아니던데...꿀꺽

        초급

        초급

        Photoshop, HTML/CSS, 클론코딩

        찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)강의 썸네일

        찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)

        ludgi

        찍어먹는 Next.js 풀코스! GraphQL, Redis, RabbitMQ, Prisma, TailwindCSS, Docker Compose, Cypress, Prometheus, grafana 등 최신 기술로 실전 프로젝트를 완성하며, App Router와 Page Router까지 모두 경험합니다.

        중급이상

        중급이상

        Next.js, React, GraphQL

        [2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스강의 썸네일

        [2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

        정현우

        아이디어는 있는데 앱을 어떻게 개발해야할지 몰랐던 분들, 실전 프로젝트 4개를 만들어보면서 앱 개발을 마스터해봅시다!

        입문

        입문

        JavaScript, React, Node.js

        Tailwind CSS 실전 포트폴리오 퍼블리싱강의 썸네일

        Tailwind CSS 실전 포트폴리오 퍼블리싱

        코딩웍스(Coding Works)

        [Tailwind CSS 실전 포트폴리오 퍼블리싱]은 Tailwind CSS를 활용해 26가지 이상의 다양한 실전 예제 제작하는 과정입니다. 실전 예제를 빠르게 다양하게 제작하면 그 속에서 필수적인 이론을 설명합니다. 해당 강의는 개발자와 퍼블리셔가 만드는 Tailwind CSS 스타일링을 중심으로 제작되었습니다.

        초급

        초급

        TailwindCSS, HTML/CSS

        공식문서로 배우는 실전 타입스크립트강의 썸네일

        공식문서로 배우는 실전 타입스크립트

        어쩔코딩

        타입스크립트를 제대로 이해하려면 공식문서를 한번쯤 보셔야겠죠? 문서에서 중요한 부분들만 콕 집어서 알기 쉽게 전달해드리고 실전에 필요한 내용들도 같이 알려드리는 강의입니다!

        입문

        입문

        TypeScript, JavaScript, ES6

        앱 개발 입문을 위한 React Native 완벽 기초 클래스강의 썸네일

        앱 개발 입문을 위한 React Native 완벽 기초 클래스

        정현우

        앱 개발을 하고 싶은데 어디서부터 시작해야될 지 막막하신 분들을 위해 준비했습니다. 이 강의로 그 고민, 이젠 끝내세요!

        입문

        입문

        JavaScript, React, Node.js

        타입스크립트 코리아 : React with TypeScript 세미나강의 썸네일

        타입스크립트 코리아 : React with TypeScript 세미나

        이웅재

        타입스크립트와 리액트 관련 강좌입니다.

        중급이상

        중급이상

        React, TypeScript

        ₩32,340

        30%

        ₩46,200