공개되지 않은 강의로
수강이 제한됩니다.
수강이 제한됩니다.
중급자를 위해 준비한
[풀스택, Next.js] 강의입니다.
실시간 동기화와 반응형 디자인을 갖춘 풀스택 애플리케이션 구축: 직관적인 Notion 클론 만들기로 당신의 웹 개발 실력을 한 단계 업그레이드하세요. 실제 프로젝트 경험으로 빠르게 성장할 수 있는 완벽한 기회입니다! (Powered by Antonio Erdeljac)
✍️
이런 걸
배워요!
이런 걸
배워요!
최신 웹 기술 활용: Next.js 14 및 React를 사용하여 현대적인 웹 애플리케이션을 구축하는 방법을 배웁니다.
실시간 데이터베이스 구축: Convex를 활용하여 실시간으로 데이터를 처리하고 동기화하는 방법을 배웁니다.
Notion 스타일의 편집기 개발: React를 사용하여 직관적이고 강력한 문서 편집 기능을 구현합니다.
라이트 및 다크 모드 전환: 사용자의 선호에 따라 인터페이스 테마를 변경하는 기능을 구현합니다.
계층적 문서 관리: 무한 계층적인 자식 문서 구조를 만들고 관리하는 방법을 배웁니다.
효율적인 파일 관리 시스템: 파일 업로드, 삭제 및 교체 기능을 포함한 포괄적인 파일 관리 시스템을 구축합니다.
사용자 인증 및 보안: 안전한 사용자 인증 시스템을 구현하여 애플리케이션을 보호합니다.
반응형 웹 디자인: 모든 기기에서 완벽하게 작동하는 반응형 디자인을 구현합니다.
웹 게시 기능: 사용자가 자신의 노트를 웹에 공유할 수 있는 기능을 개발합니다.
파일 복구 시스템: 삭제된 파일을 복구할 수 있는 기능을 구현하여 데이터 손실을 방지합니다.
사용자 경험 향상: 확장 및 축소가 가능한 사이드바, 매력적인 랜딩 페이지, 문서별 커버 이미지 등을 통해 풍부한 사용자 경험을 제공합니다.
이런 분들께 추천드려요!
🎓
학습 대상은
누구일까요?
학습 대상은
누구일까요?
풀스택 개발에 관심 있는 개발자: 최신 웹 기술을 활용한 풀스택 개발에 관심이 있는 개발자들에게 이상적입니다.
개인 프로젝트나 포트폴리오 구축을 원하는 분들: 실제로 사용할 수 있는 풀스택 애플리케이션을 만들면서 자신의 포트폴리오를 강화하고자 하는 분들에게 적합합니다.
자기 주도 학습을 선호하는 분들: 자신의 속도에 맞춰 학습하고, 실제 프로젝트에 적용해보고자 하는 분들에게 적합합니다.
기업용 혹은 개인용 협업 도구 개발에 관심 있는 분들: 협업 도구나 문서 관리 시스템 개발에 관심이 있는 개발자나 학생들에게 유용합니다.
초급 및 중급 웹 개발자: 기본적인 웹 개발 지식을 가지고 있으나, 실제로 동작하는 풀스택 애플리케이션을 구축하는 경험을 쌓고 싶은 개발자들.
프리랜서 개발자: 독립적인 프로젝트 또는 클라이언트 프로젝트를 위해 다양한 기술 스택을 습득하고 싶은 프리랜서 개발자들.
기업의 IT 및 개발팀 구성원: 회사의 내부 프로젝트나 시스템 개발에 참여하고자 하는 IT 전문가들.
취미로 코딩을 배우는 사람들: 코딩을 취미로 배우며, 자신만의 프로젝트를 만들어 보고 싶은 사람들.
기존의 웹 개발자들을 위한 진화된 학습 기회: 현재의 기술 스택을 넘어서 새로운 기술을 배우고자 하는 경험 많은 웹 개발자들.
📚
선수 지식,
필요할까요?
선수 지식,
필요할까요?
HTML, CSS, and JavaScript 지식
React 기초 지식
Typescript (강의 내에서 알려드려요)
안녕하세요
Su 입니다.
Su 입니다.
커리큘럼
총 60 개
˙ 6시간 35분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0.
1 강
섹션 1. [sucode] 환경 설정
5 강
∙ 7분
"강의를 시청하실 때는 영상 하단에 있는 노트도 함께 확인해주세요!!"
[sucode] 00. Visual Studio Code 확장프로그램
미리보기
01:20
[sucode] 01. 환경 설정
미리보기
02:13
[sucode] 02. 폴더 설정 - [organization routes]
미리보기
04:01
"프로젝트를 시작하기 전에, 필요한 모든 사진을 다운로드해서 public 폴더에 저장하는 것을 잊지 마세요. 이 단계는 프로젝트 진행에 매우 중요합니다!
섹션 2. [sucode] Notion Landing Page Part1 - Layout
6 강
∙ 32분
[sucoe] Notion Landing Page: 이번 섹션의 구현 결과물입니다
미리보기
00:05
[sucode] 03. Notion Landing Page - [Heading]
미리보기
07:44
[sucode] 04. Notion Landing Page - [Heroes]
미리보기
03:55
[sucode] 05. Notion Landing Page - [Footer]
미리보기
07:02
[sucode] 06. Notion Landing Page - [Navigation]
미리보기
06:21
[sucode] 07. Notion Landing Page - [Darkmode]
미리보기
07:11
섹션 3. [sucode] Notion Landing Page Part2 - Clerk and Convex
4 강
∙ 20분
[sucode] Notion Landing Page - Clerk and Covex: 이번 섹션의 구현 결과물입니다
00:14
[sucode] 08. convex 소개 및 설정
04:12
[sucode] 09. clerk_convex 소개 및 설정
06:09
[sucode] 10. 네비게이션바 인증로직 적용
09:48
섹션 4. [sucode] Notion Sidebar 생성 Part1
4 강
∙ 26분
[sucode] Notion Sidebar: 이번 섹션의 구현 결과물입니다
00:07
[sucode] 11. Notion Sidebar #1 - [사이드바 기본 레이아웃]
08:46
[sucode] 12. Notion Sidebar #2 - [사이드바 접고 펼치는 기능 구현 상태값 정의]
09:50
[sucode] 13. Notion Sidebar #3 - [사이드바 접고 펼치는 기능 구현]
07:56
섹션 5. [sucode] Notion Documents 구성요소
3 강
∙ 12분
[sucode] Notion Documents: 이번 섹션의 구현 결과물입니다.
00:06
[sucode] 14. Notion Documents Elements - [소개 페이지]
00:09
[sucode] 15. Notion Documents Sidebar- [최상단에 로그인된 사용자 아바타 및 이름 렌더링]
12:10
섹션 6. [sucode] Notion Documents Database 스키마 및 APIs 생성
3 강
∙ 16분
[sucode] 16. Notion Document Schema 생성
03:58
[sucode] 17. Notion Document APIs 생성 - Document 생성
08:39
[sucode] 18. Notion Document APIs 생성 - Document 읽기
03:30
섹션 7. [sucode] Notion Sidebar 생성 Part2
5 강
∙ 37분
[sucode] Notion Sidebar Part2: 이번 섹션의 구현 결과물입니다.
00:13
[sucode] 19. Notion Sidebar - [문서 생성 버튼 추가]
06:17
[sucode] 20. Notion Sidebar - [기능 구현에 필요한 프로퍼티 설정]
07:36
[sucode] 21. Notion Sidebar - [Document API 수정 및 로딩 스켈레톤 생성]
04:32
[sucode] 22. Notion Sidebar - [중첩 문서 구현(Nested Documents)]
18:57
섹션 8. [sucode] Notion Document Archiving(아카이빙 - 문서 삭제 및 복원)
6 강
∙ 53분
[sucode] Notion Document Archiving: 이번 섹션의 구현 결과물입니다.
00:14
[sucode] 23. Notion Document Archiving API 구축 [isArchived 속성 업데이트]
04:59
[sucode] 24. Notion Document Archiving - [UI 구축 및 적용]
09:40
[sucode] 25. Notion Document Archiving #1 - [기본 Trash Box UI 구축]
04:31
[sucode] 26. Notion Document Archiving #2 - [Trash Box APIs 구축]
08:57
[sucode] 27. Notion Document Archiving #3 - [UI에 Trash Box APIs 적용]
24:52
섹션 9. [sucode] Notion Document Sidebar - 검색기능 & 설정기능
3 강
∙ 25분
[sucode] Notion Siebar Search Feature: 이번 섹션의 구현 결과물입니다.
00:08
[sucode] 28. Notion Sidebar Search Feature - [검색 기능 구현]
14:34
[sucode] 29. Notion Sidebar Settings Feature - [설정 기능 구현]
10:37
섹션 10. [sucode] Notion Document Components Part1 - 문서 제목 & 베너
5 강
∙ 41분
[sucode] Notion Document Navbar [제목 & 배너]: 이번 섹션의 구현 결과물입니다.
00:23
[sucode] 30. Notion Document Navbar Part1 - [문서 제목 렌더링]
10:51
[sucode] 31. Notion Document Navbar Part2 - [문서 제목 렌더링]
13:40
[sucode] 32. Notion Document Banner Part1 - [배너]
07:42
[sucode] 33. Notion Document Banner Part2 - [배너]
08:47
섹션 11. [sucode] Notion Document Components Part2 - 툴바 [아이콘+ 커버이미지]
6 강
∙ 1시간 4분
[sucode] Notion Document Toolbar: 이번 섹션의 구현 결과물입니다.
00:31
[sucode] 34. Notion Document Toolbar Part1 - [툴바 - 아이콘 + 타이틀]
13:19
[sucode] 35. Notion Document Toolbar Part2 - [툴바 - 아이콘 + 타이틀 마무리]
11:38
[sucode] 36. Notion Document Toolbar Part1 - [툴바 - 커버이미지]
10:11
[sucode] 37. Notion Document Toolbar Part2 - [툴바 - 커버이미지]
15:50
[sucode] 38. Notion Document Toolbar Part3 - [툴바 - 커버이미지 마무리]
12:42
섹션 12. [sucode] Notion Document Editor Components
3 강
∙ 22분
[sucode] Notion Document Editor: 이번 섹션의 구현 결과물입니다.
00:25
[sucode] 39. Notion Document Editor Part1 - [에디터 레이아웃 구현]
07:46
[sucode] 40. Notion Document Editor Part2 - [에디터 마무리]
13:56
섹션 13. [sucode] Notion Document Preview
1 강
∙ 18분
[sucode] 41. Notion Document Preview
18:46
섹션 14. [sucode] Deployment
1 강
∙ 7분
[sucode] 42. Deployment
07:58
섹션 15. 참고강의
4 강
∙ 9분
[sucode] 1. Cloudinary 설정
01:42
[sucode] 2. Cloudinary 사진 업로드
03:07
[sudoce] 3. Cloudinary 이미지 렌더링
03:42
[sucode] 4. Cloudinary 위젯
01:22
강의 게시일 : 2024년 02월 01일
(마지막 업데이트일 : 2024년 02월 04일)
수강평
수강생분들이 직접 작성하신 수강평입니다.
아직 평가를 충분히 받지 못한 강의 입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!😄️️
모두에게 도움이 되는 수강평의 주인공이 되어주세요!😄️️