Thumbnail
개발 · 프로그래밍 프론트엔드

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

(4.7)
6개의 수강평 ∙  165명의 수강생

46,200원

지식공유자: 도도(코딩루팡)
총 78개 수업 (7시간)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

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

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

✍️
이런 걸
배워요!
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를 개발하는 방법

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
Next.js 로 프로젝트를 시작하시려는 분
Next.js 을 기반으로 퍼블리싱을 마스터 하고 싶은 분
컴포넌트 라이브러리를 통해 빠르게 개발하려는 분
Next.js 기술스택을 늘리려는 FE개발자
📚
선수 지식,
필요할까요?
기초수준의 HTML, CSS, React

안녕하세요
도도(코딩루팡) 입니다.
도도(코딩루팡)의 썸네일
  • 프론트 개발자로 네카라쿠배 중 하나의 IT서비스 기업에 재직하고 있습니다. 😀

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

  • 🚀 Naver Boostcamp BE 멘토 경험

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

커리큘럼 총 78 개 ˙ 7시간의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 3. NextJS 핵심 개념(이론)
3.1 HTML+CSS+JS vs React.js vs Next.js 차이점 미리보기 04:12
3.2 랜더링 종류 - CSR, SSR, Hydration 06:27
3.3 컴포넌트 종류 - RSC, RCC, use client 05:00
3.4 React Suspense ( Streaming, Progressive Hydration ) 03:34
3.5 TailwindCSS 정리1 03:11
3.6 TailwindCSS 정리2 12:42
3.7 TailwindCSS 정리3 - 예제 04:27
섹션 4. NextJS AppRouter
4.1 meta, favicon 미리보기 02:26
4.2 page, params, searchParams 04:54
4.3 group folder 01:58
4.4 layout file 02:23
4.5 loading, error 10:51
4.6 rootLayout 에서 피해야 할 것 04:55
섹션 5. NextJS Sidebar
5.1 더미 데이터 넣기 미리보기 06:10
5.2 Sidebar 04:28
5.3 Sidebar - Logo 06:52
5.4 Sidebar - Navigator 13:18
5.5 Sidebar - PlayList 07:39
섹션 6. NextJS Header
6.1 Header 미리보기 02:33
6.2 Header - bg 08:33
6.3 Shadcn CLI Install 미리보기 02:11
6.4 relative, absoulte, sticky, padding 03:26
6.5 TailwindCss 반응형 디자인 방법 01:28
6.6 Header - search 03:17
6.7 Header - 반응형 만들기1 06:16
6.8 Header - 반응형 만들기2 04:54
6.9 Header - 반응형 만들기3 05:58
섹션 7. YTMusicClone - Home
YTMusicClone - Home 미리보기 02:34
7.2 zustand home 카테고리 11:53
7.3 PlayListCarousel 및 타이핑 10:22
7.4 PlayListCarousel - 1 07:19
7.5 PlayListCard - 1 07:31
7.6 PlayListCard - 2 07:56
섹션 8. YTMusicClone - Explore
8.1 Category 미리보기 05:33
8.2 PlayListCarousel 02:58
8.3 song card - 1 03:14
8.4 song card - 2 06:59
8.5 Rank - Layout bugFix 05:36
8.6 song card - 3 09:42
8.7 GenreListCarousel 미리보기 11:29
섹션 9. YTMusicClone - Library
9.1 dropdownmenu 미리보기 01:21
9.2 dropdownmenu-2 12:40
9.3 GridLayout PlayListCard 03:51
섹션 10. YTMusicClone - Playlist
10.1 permanentRedirect vs router hook 04:42
10.2 HeaderBgChanger 03:34
10.3 Header 06:32
10.4 Header 반응형 11:03
10.5 SongList 02:49
10.6 SongList Link 04:33
섹션 11. YTMusicClone - Channel
11.1 빌드 오류 수정 07:48
11.2 SSR - getPlaylistById 03:52
11.3 Channel Header 07:00
11.4 Button Typing 01:58
11.5 Channel 노래,앨범 section 04:19
섹션 12. YTMusicClone - Player
12.1 react-use 라이브러리 설치 미리보기 02:06
12.2 zustand - usePlayerState - 1 03:06
12.3 PlayerWrapper 02:34
12.4 PlayerWrapper > Height 02:14
12.5 사용자 경험 개선형 슬라이더 (shadcn-Slider) 05:22
12.6 zustand - usePlayerState - 2 05:46
12.7 zustand - usePlayerState - 3 03:24
12.8 useAudio 사용하기 02:09
12.9 Slider 노래 재생 연동 - 1 08:58
12.10 Slider 노래 재생 연동 - 2 02:38
12.11 Player UI 완성 04:59
12.12 autoNextPlay 07:41
12.13 Player UI 연동1 08:37
12.14 Player UI 연동2 08:28
섹션 13. 완주를 축하합니다.!
Outro & 기술적 차별성 디벨롭 & Part2 예고
강의 게시일 : 2024년 03월 22일 (마지막 업데이트일 : 2024년 03월 22일)
수강평 총 6개
수강생분들이 직접 작성하신 수강평입니다.
4.7
6개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
Robert June thumbnail
5
Next를 공부하다가 놓친 부분들에 대해서 알 수 있었습니다! 초보자도 쉽게 따라할 수 있고 상태관리, 브라우저 렌더링 등의 기본적인 지식도 채울 수 있어서 도움이 된 강의입니다! 보다 많은 사람이 시청해서 이론뿐만이 아니라 실전도 채워가면 좋겠어요:D
2024-03-26
지식공유자 도도(코딩루팡)
감사합니다. ~ Next.js 프로젝트 하시는데 큰 도움 되면 좋겠습니다. ㅎㅎㅎ
2024-03-26
성균관대학교이송목 thumbnail
5
Next를 사용하고 있지만, Next를 라우팅으로만 사용하고 있었던 주니어 개발자입니다. Next를 이용하는 이유 중 하나가 랜더링 최적화라고들 하잖아요. 그런데 서버 사이드 컴포넌트가 작동하는 방식에 아는 지식도 없고 투자할 시간도 부족했기 때문에 이유를 모를 에러가 발생하면, "use client"를 붙여가면서 주먹구구식으로 코딩하기 바빴던 것 같아요. 그런데 이 강의에서 CSR, SSR, Hydration의 렌더링에 관한 지식을 바탕으로 RSC, CSC 를 알려주셔서 앞으로 Next를 더 잘 활용하고, SEO 측면에서도 보다 나은 코딩을 할 수 있을 것 같아요. 또 7시간 안에 압축적으로 전달해주기 때문에 주말에 큰 맘먹고 한 번에 다 들을 수 있다는 점도 좋은 것 같아요. 강의 잘 들었습니다. 감사합니다 ㅎㅎ.
2024-04-08
지식공유자 도도(코딩루팡)
수강평 감사합니다. Next.js의 많은 기능들에 심리적 장벽이 생길 수 있지만요. 이 강의에서는 필요한 기능들과 중요한 기능을 모아봤어요.
2024-04-14
happyFE thumbnail
5
Next.js를 공부하려고 공식 문서도 보고 했지만 잘 읽히지 않아서 전 강의를 먼저 보는 편입니다. 강의를 통해 기본적인 내용을 이해한 후에 공식 문서를 보면 더 빠르게 이해되는 것 같아요. 보통은 강의를 먼저 보고 핵심 기능들을 습득한 뒤 공식 문서에서 키워드 수준으로만 기억합니다. 다른 강의에서 볼 수 없었던 워크북이 좋았네요.!
2024-04-08
지식공유자 도도(코딩루팡)
강의 후기 감사합니다!
2024-04-14
yeobi_01 thumbnail
5
평소 NextJS 14를 이용해서 개발하면서, 이런저런 의문점이 많았어요.. 서버 컴포넌트를 잘 이용하고 있는건지, NextJS에서 지원해주는 다양한 최적화 기능들을 잘 사용하고 있는건지.. 그런 의문점들이 모두 해결이 되는 명강의였어요. 덕분에 NextJS를 조금이라도 더 이해하는데 사용하는 것에 정말 큰 도움이 되었습니다!! 또한, 제가 알지 못했던 라이브러리들을 학습하면서, 제 사이드 프로젝트에 꼭 적용해보고 싶다는 생각이 들었어요. NextJS 14를 잘 활용해보고 싶으신 분들께는 강추드리는 강의입니다!
2024-03-25
지식공유자 도도(코딩루팡)
리액트 쓰다가 nextjs 쓰면 어렵죠 ㅎㅎㅎ 잘 들어주셔서 감사합니다.!
2024-03-25
권빵 thumbnail
5
1년차 개발자로써, 최신 트렌드를 따라가기 위해 nextjs를 공부하고자 했습니다. 그러나 14버전 이후에는 기존의 12버전 강의들은 조금 부족하다고 느껴져서 공식 문서를 통해 혼자서 공부하고 있었습니다. 하지만 경험이나 실력이 부족하여 독학에 어려움을 겪고 있었는데 이 강의로 제가 궁금했던 부분들이 대부분 해소되었네요. 지금 절반 정도 듣고 있는데, 굉장히 유익하고 만족스럽네요. 감사합니다.
2024-04-08
지식공유자 도도(코딩루팡)
수강평 감사합니다. ㅎㅎㅎ Nextjs 공식문서가 친절한 편임에도 이해에 시간이 걸릴 수 있습니다.~ 강의를 통해서 그런 시간을 단축시켰으면 성공입니다. ~
2024-04-14