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 로드맵 강의 제작
커리큘럼
총 78 개
˙ 7시간의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 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
6 강
∙ 47분
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
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년 03월 22일)
수강평
총 6개
수강생분들이 직접 작성하신 수강평입니다.
4.7
6개의 수강평
5점
4점
3점
2점
1점
VIEW
추천 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
평소 NextJS 14를 이용해서 개발하면서, 이런저런 의문점이 많았어요.. 서버 컴포넌트를 잘 이용하고 있는건지, NextJS에서 지원해주는 다양한 최적화 기능들을 잘 사용하고 있는건지.. 그런 의문점들이 모두 해결이 되는 명강의였어요. 덕분에 NextJS를 조금이라도 더 이해하는데 사용하는 것에 정말 큰 도움이 되었습니다!!
또한, 제가 알지 못했던 라이브러리들을 학습하면서, 제 사이드 프로젝트에 꼭 적용해보고 싶다는 생각이 들었어요.
NextJS 14를 잘 활용해보고 싶으신 분들께는 강추드리는 강의입니다!
2024-03-25
Next를 공부하다가 놓친 부분들에 대해서 알 수 있었습니다!
초보자도 쉽게 따라할 수 있고 상태관리, 브라우저 렌더링 등의 기본적인 지식도 채울 수 있어서 도움이 된 강의입니다!
보다 많은 사람이 시청해서 이론뿐만이 아니라 실전도 채워가면 좋겠어요:D
2024-03-26
Next.js를 공부하려고 공식 문서도 보고 했지만 잘 읽히지 않아서 전 강의를 먼저 보는 편입니다. 강의를 통해 기본적인 내용을 이해한 후에 공식 문서를 보면 더 빠르게 이해되는 것 같아요. 보통은 강의를 먼저 보고 핵심 기능들을 습득한 뒤 공식 문서에서 키워드 수준으로만 기억합니다.
다른 강의에서 볼 수 없었던 워크북이 좋았네요.!
2024-04-08
Next를 사용하고 있지만,
Next를 라우팅으로만 사용하고 있었던 주니어 개발자입니다.
Next를 이용하는 이유 중 하나가 랜더링 최적화라고들 하잖아요. 그런데 서버 사이드 컴포넌트가 작동하는 방식에 아는 지식도 없고 투자할 시간도 부족했기 때문에 이유를 모를 에러가 발생하면, "use client"를 붙여가면서 주먹구구식으로 코딩하기 바빴던 것 같아요.
그런데 이 강의에서 CSR, SSR, Hydration의 렌더링에 관한 지식을 바탕으로 RSC, CSC 를 알려주셔서 앞으로 Next를 더 잘 활용하고, SEO 측면에서도 보다 나은 코딩을 할 수 있을 것 같아요.
또 7시간 안에 압축적으로 전달해주기 때문에 주말에 큰 맘먹고 한 번에 다 들을 수 있다는 점도 좋은 것 같아요. 강의 잘 들었습니다. 감사합니다 ㅎㅎ.
2024-04-08