ThreeJS와 SpringAI로 만드는 3D 지구본 아티클 서비스
Neo
ThreeJS와 SpringAI로 만드는 3D 지구본 아티클 서비스 나만의 챗봇과 ThreeJS를 통해 3D 지구본 아티클 서비스를 만들어 보세요!
Basic
React, Kotlin, Spring Boot
Next.js 풀스택 Notion 서비스 만들기
실시간 동기화와 반응형 디자인을 갖춘 풀스택 애플리케이션 구축: 직관적인 Notion 클론 만들기로 당신의 웹 개발 실력을 한 단계 업그레이드하세요. 실제 프로젝트 경험으로 빠르게 성장할 수 있는 완벽한 기회입니다! (Powered by Antonio Erdeljac)
이런 걸 배울 수 있어요
최신 웹 기술 활용: Next.js 14 및 React를 사용하여 현대적인 웹 애플리케이션을 구축하는 방법을 배웁니다.
실시간 데이터베이스 구축: Convex를 활용하여 실시간으로 데이터를 처리하고 동기화하는 방법을 배웁니다.
Notion 스타일의 편집기 개발: React를 사용하여 직관적이고 강력한 문서 편집 기능을 구현합니다.
라이트 및 다크 모드 전환: 사용자의 선호에 따라 인터페이스 테마를 변경하는 기능을 구현합니다.
계층적 문서 관리: 무한 계층적인 자식 문서 구조를 만들고 관리하는 방법을 배웁니다.
효율적인 파일 관리 시스템: 파일 업로드, 삭제 및 교체 기능을 포함한 포괄적인 파일 관리 시스템을 구축합니다.
사용자 인증 및 보안: 안전한 사용자 인증 시스템을 구현하여 애플리케이션을 보호합니다.
반응형 웹 디자인: 모든 기기에서 완벽하게 작동하는 반응형 디자인을 구현합니다.
웹 게시 기능: 사용자가 자신의 노트를 웹에 공유할 수 있는 기능을 개발합니다.
파일 복구 시스템: 삭제된 파일을 복구할 수 있는 기능을 구현하여 데이터 손실을 방지합니다.
사용자 경험 향상: 확장 및 축소가 가능한 사이드바, 매력적인 랜딩 페이지, 문서별 커버 이미지 등을 통해 풍부한 사용자 경험을 제공합니다.
Next.js 풀스택 Notion 서비스 만들기
🌟 환영합니다! Notion 서비스 만들기 강의로 여러분을 초대합니다! 🌟
현대 디지털 시대에서 정보를 효과적으로 관리하고 조직하는 것은 더 이상 선택이 아닌 필수가 되었습니다. 그 중심에는 'Notion'과 같은 강력한 도구들이 있습니다. 이제, 여러분도 그러한 도구를 직접 만들 수 있는 기회를 갖게 되었습니다.
이 강의는 단순히 기술을 가르치는 것을 넘어, 창의적이고 실용적인 애플리케이션을 실제로 구축하는 여정에 여러분을 초대합니다. 여러분은 실시간 데이터베이스 구축부터 사용자 인터페이스 디자인, 모바일 최적화에 이르기까지, 하나의 완성된 제품을 만드는 모든 과정을 경험하게 될 것입니다.
이 강의는 단순한 이론 학습에 그치지 않습니다. 실제로 코드를 작성하고, 문제를 해결하며, 창의적인 아이디어를 실현하는 과정을 통해, 여러분은 진정한 개발자로 성장할 수 있을 것입니다.
Powered by Antonio Erdeljac
구현 기능 요약
1. 실시간 데이터베이스 🔁
2. Notion 스타일 편집기 📝
3. 라이트 및 다크 모드 전환 🌗
4. 무한 계층 문서 시스템 🌲
5. 휴지통 및 소프트 삭제 기능 🗑
6. 사용자 인증 시스템 🔒
7. 파일 업로드 및 삭제, 교체 📂
8. 실시간으로 변경되는 문서 아이콘 🌟
9. 확장 가능한 사이드바 ➡🔀⬅
10. 모바일 환경 최적화 📱
11. 웹에 노트 게시 기능 🌐
12. 완전히 접을 수 있는 사이드바 ↕
13. 랜딩 페이지 🛬
14. 각 문서의 커버 이미지 설정 🖼
15. 삭제된 파일 복구 기능 🔁📄
학습 내용🤖![]()
1. 실시간 데이터베이스: 데이터베이스 선택과 설정 방법을 배우고, 실시간으로 데이터를 동기화하는 원리와 서버-클라이언트 간 통신 방법을 익힙니다.
2. Notion 스타일 편집기: 사용자 친화적인 텍스트 편집기를 만들기 위한 기본적인 요소와 리치 텍스트 기능을 구현하는 방법을 학습합니다.
3. 라이트 및 다크 모드 전환: 사용자 선호에 따라 인터페이스 색상을 전환하는 방법과 CSS를 사용한 테마 관리 기술을 배웁니다.
4. 무한 계층 문서 시스템: 트리 구조 데이터 관리와 재귀적 컴포넌트 디자인을 통해 복잡한 정보도 체계적으로 관리하는 방법을 다룹니다.
5. 휴지통 및 소프트 삭제 기능: 삭제된 데이터를 효율적으로 관리하는 전략과 사용자 인터페이스 디자인을 배웁니다.
6. 사용자 인증 시스템: 보안을 강화하는 인증 프로토콜과 소셜 로그인 통합 방법에 대해 학습합니다.
7. 파일 업로드 및 관리: 파일 업로드 메커니즘과 클라우드 스토리지 통합, 파일 메타데이터 관리 방법을 익힙니다.
8. 실시간 문서 아이콘 변경: 사용자가 아이콘을 실시간으로 변경할 수 있게 하는 UI 업데이트 기술을 배웁니다.
9. 확장 가능한 사이드바: 사용자가 사이드바를 자유롭게 조절할 수 있도록 하는 반응형 디자인과 애니메이션 기술을 학습합니다.
10. 모바일 환경 최적화: 모바일 기기에 맞춘 반응형 웹 디자인과 인터랙션, 성능 최적화 방법을 다룹니다.
11. 웹에 노트 게시: 노트를 웹에 게시하는 방법, SEO 최적화, 소셜 미디어 통합 전략을 배웁니다.
12. 접을 수 있는 사이드바: 사용자의 작업 공간을 최대화하기 위한 사이드바 디자인과 상태 관리 기술을 학습합니다.
13. 랜딩 페이지 디자인: 효과적인 첫 인상을 주는 랜딩 페이지 디자인 원리와 사용자 참여 증진 전략을 배웁니다.
14. 문서 커버 이미지 설정: 개별 문서에 맞는 커버 이미지를 설정하고, 이미지 처리 및 최적화 기술을 익힙니다.
15. 삭제된 파일 복구 기능: 데이터 백업 및 복구 전략, 사용자 인터페이스 디자인, 데이터 무결성 보장 방법을 학습합니다.
이 강의는 위의 주제들을 통해 실제로 애플리케이션을 구축하는 데 필요한 기술적 지식과 실무적인 접근 방법을 제공합니다.
사용 기술💻![]()
🚀 여러분의 창의력을 발휘하고, 자신만의 Notion 스타일 애플리케이션을 세상에 선보일 준비가 되셨나요? 지금 바로 이 강의에 참여하셔서 그 가능성을 탐색해보세요! 🚀
이런 분들께
추천드려요
학습 대상은
누구일까요?
풀스택 개발에 관심 있는 개발자: 최신 웹 기술을 활용한 풀스택 개발에 관심이 있는 개발자들에게 이상적입니다.
개인 프로젝트나 포트폴리오 구축을 원하는 분들: 실제로 사용할 수 있는 풀스택 애플리케이션을 만들면서 자신의 포트폴리오를 강화하고자 하는 분들에게 적합합니다.
자기 주도 학습을 선호하는 분들: 자신의 속도에 맞춰 학습하고, 실제 프로젝트에 적용해보고자 하는 분들에게 적합합니다.
기업용 혹은 개인용 협업 도구 개발에 관심 있는 분들: 협업 도구나 문서 관리 시스템 개발에 관심이 있는 개발자나 학생들에게 유용합니다.
초급 및 중급 웹 개발자: 기본적인 웹 개발 지식을 가지고 있으나, 실제로 동작하는 풀스택 애플리케이션을 구축하는 경험을 쌓고 싶은 개발자들.
프리랜서 개발자: 독립적인 프로젝트 또는 클라이언트 프로젝트를 위해 다양한 기술 스택을 습득하고 싶은 프리랜서 개발자들.
기업의 IT 및 개발팀 구성원: 회사의 내부 프로젝트나 시스템 개발에 참여하고자 하는 IT 전문가들.
취미로 코딩을 배우는 사람들: 코딩을 취미로 배우며, 자신만의 프로젝트를 만들어 보고 싶은 사람들.
기존의 웹 개발자들을 위한 진화된 학습 기회: 현재의 기술 스택을 넘어서 새로운 기술을 배우고자 하는 경험 많은 웹 개발자들.
선수 지식,
필요할까요?
HTML, CSS, and JavaScript 지식
React 기초 지식
Typescript (강의 내에서 알려드려요)
커리큘럼
전체
60개 ∙ (6시간 35분)
해당 강의에서 제공:
수업자료
강의 게시일:
마지막 업데이트일:
수강평
아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!
비슷한 강의
같은 분야의 다른 강의를 만나보세요!
![[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)Course Thumbnail](https://cdn.inflearn.com/public/courses/332907/cover/2975d3d7-5dcc-4e2a-977c-98b11134cfb6/332907.jpg?f=avif&w=420)
![[코드팩토리] [초급] 8시간만에 끝내는 코드팩토리의 Typescript 완전정복 풀코스Course Thumbnail](https://cdn.inflearn.com/public/courses/330970/cover/3c24c2b8-9dc1-44ed-af4e-2b58542a6504/330970-eng.png?f=avif&w=420)
![[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)Course Thumbnail](https://cdn.inflearn.com/public/files/courses/332375/cover/01k3x8ecea6jym1d28qcc6zcds?f=avif&w=420)