46,200원
초급자를 위해 준비한
[프론트엔드, 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 로드맵 강의 제작
커리큘럼
총 79 개
˙ 7시간 9분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. Intro
1 강
∙ 5분
섹션 1. NextJS 설치하기
6 강
∙ 26분
섹션 2. NextJS 배포하기
2 강
∙ 7분
섹션 3. NextJS 핵심 개념(이론)
7 강
∙ 39분
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
6 강
∙ 27분
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 강
∙ 38분
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
9 강
∙ 38분
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
7 강
∙ 56분
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
7.7 PlayListCard - 3
09:03
섹션 8. YTMusicClone - Explore
7 강
∙ 45분
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
3 강
∙ 17분
섹션 10. YTMusicClone - Playlist
6 강
∙ 33분
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
5 강
∙ 24분
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
14 강
∙ 1시간 8분
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. 완주를 축하합니다.!
1 강
Outro & 기술적 차별성 디벨롭 & Part2 예고
강의 게시일 : 2024년 03월 22일
(마지막 업데이트일 : 2024년 05월 07일)
수강평
총 15개
수강생분들이 직접 작성하신 수강평입니다.
4.5
15개의 수강평
5점
4점
3점
2점
1점
VIEW
추천 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
저는 솔직히 개발 능력이 없다고 생각하고 퍼블리싱 이외에는 개발자라고 할 수 없을 정도로 지식이 없습니다
이 강의를 들으면서 어떤 언어가 있는지 알게 되었고 새로운 언어와 기술에 장점 및 단점에 대해 배울 수 있었습니다
그리고 입문자에게는 어려운게 맞아요 하지만 추후 제가 기술을 채화했을때 다시 돌려보면 진짜 좋을 것 같다는 생각이 너무 많이 들었습니다 하나의 가이드 라인 같은거죠! 아예 몰랐을때와 조금이라도 알게 되었을때의 차이는 많이 큰것 같네요 정말 유익한 시간이였습니다
2024-04-30
next.js가 낯선 저에게 배운 내용을 토대로 더 많은 것을 도전하고 싶게 만드는 강의입니다.
폴더 구조부터 프론트 서버 배포까지 전체 과정을 실습하면서,
CSR과 SSR을 바탕으로 Next.js의 RSC와 RCC의 개념들을 배우고 실제로 적용해볼 수 있어 좋았습니다.
더 나아가 유지보수와 확장성에 대해 한번 더 생각하게 되며,
Tailwind CSS와 shadcn를 이용하여 반응형 UI 및 빠른 UI 작업도 도움이 많이 되었습니다.
이제는 이 기술들을 활용하여 개인 프로젝트에 적용해보려 합니다. 감사합니다.
2024-04-30
우선 클론코딩으로 빠르게 프로젝트는 만드는데는 최고입니다. 만들고 나서 스스로 코드를 복습하는데 시간이 필요해요. 7시간 안에 YoutubeMusic 프로젝트 전반을 구현해보는 점이 좋네요.!
2024-05-02
next js 의 개념들을 빠르게 배울수 있어서 좋았습니다 Tailwind CSS, shadcn를 사용하여 빠르고 쉽게 ui을 구성할수 있어서 좋았습니다
2024-05-02
전반적으로 Next.js 프로젝트를 시작하는데 도움이 많이 되었습니다. 특히나 리액트만 쓰다가 넘어왔는데 CSR, SSR 차이점에 대해서 짚어주니 공식문서 볼때 백그라운드가 잘 되었어요.!
2024-05-09