
React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
닭강정
React, Node.js, MongoDB를 활용해 회사 웹사이트를 직접 제작하는 과정을 배울 수 있는 실전 강의입니다. 간단한 React, Node.js 배경으로 풀스택 프로젝트를 같이 만들어요!
中級以上
React, Node.js, MongoDB
React, Electron, Zustand를 활용해 타이머 앱을 직접 제작하고 크로스 플랫폼(윈도우, 맥 OS, 리눅스)으로 배포까지 하는 실전 강의입니다. 익숙한 React 웹 개발을 시작으로, Zustand를 통한 전역 상태 관리와 최종 GUI 배포까지, 데스크톱 앱 개발의 전체 흐름을 배우실 수 있습니다!
Electron의 핵심 개념 및 개발 환경 구축
React를 활용한 데스크톱 UI/UX 개발
Zustand를 이용한 쉽고 강력한 상태 관리
개발부터 빌드, 배포까지 앱 제작의 전체 과정 경험
Electron과 React 간의 통신 (IPC) 활용
네, 가능합니다! 그것도 웹 개발을 하면서 한 번쯤은 써본 React와 같이 말이죠.
Python으로 저만의 프로그램을 만들고 싶어 PyQt를 접했던 기억이 납니다. 기능은 완벽했지만 투박한 디자인이 늘 아쉬웠습니다. 만약 우리가 매일같이 만들던 세련된 웹 페이지처럼, 데스크톱 앱을 만들 수 있다면 어떨까요?
이 강의에서는 단순히 이론만 배우지 않습니다. 여러분이 실생활에 사용할 수 있는 깔끔하고 실용적인 타이머 앱을 처음부터 끝까지 함께 만듭니다. React와 Tailwind CSS로 모던한 UI를 그리고, Zustand로 상태를 관리하며, Electron으로 실제 설치 가능한 앱(.exe, .dmg)까지 만들어보는 전 과정을 배우실 수 있습니다.
[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (With Zustand)
React + Electron 프로젝트의 마지막 단계인 '앱 배포' 과정만 필요하신가요? 이 강의의 Ch 10-4. Firebase Hosting 및 Ch 11. 앱 패키징 및 배포 챕터는 구매와 상관없이 누구나 무료로 수강할 수 있습니다. 여러분의 소중한 프로젝트 마무리에 도움이 되기를 바랍니다.
이 강의를 통해 완성될 타이머 앱입니다. 웹 버전으로 바로 체험하거나, 설치 파일을 다운로드하여 여러분의 컴퓨터에서 직접 실행해보세요.
웹에서 바로 확인하기 (Live Demo)
내 컴퓨터에 설치해보기 (Desktop App)
아래에서 사용 중인 운영체제(OS)에 맞는 파일을 다운로드하세요.
Windows:설치 파일 다운로드
🍎 macOS:설치 파일 다운로드
🐧 Linux:설치 파일 다운로드
이 강의는 여러분이 이미 알고 있는 React 지식을 기반으로 시작합니다. 우리는 React의 핵심인 컴포넌트 기반 개발 방식과 Hooks를 활용하여 타이머 앱의 모든 화면을 직접 만듭니다.
이 강의의 핵심입니다. Electron은 우리가 React로 만든 웹 프로젝트를 Windows(.exe), macOS(.dmg) 등에서 실제로 설치하고 실행할 수 있는 데스크톱 애플리케이션으로 만들어주는 다리 역할을 합니다. 복잡한 네이티브 언어 없이, 웹 기술만으로 어떻게 데스크톱 앱 개발 환경을 구축하고, 최종 결과물까지 만들어내는지 그 전 과정을 실습합니다.
복잡한 설정이 필요한 Redux 대신, 이 강의에서는 Zustand를 선택했습니다. 타이머의 '시작/정지' 상태나 남은 시간 같은 전역 상태를 최소한의 코드로 간결하게 관리하는 방법을 배웁니다.
실시간 투표, 댓글, 좋아요 같은 핵심 소셜 기능부터 카카오페이·토스페이 연동을 통한 결제 시스템까지!
단계별 실습으로 커뮤니티 플랫폼 구축과 수익화 전략을 한 번에 익혀보세요.
“내가 타이타닉에 탔다면 살아남을 수 있었을까?”라는 흥미로운 질문을 실제 데이터로 풀어봅니다.
PyTorch로 AI 모델을 만들고, FastAPI로 백엔드 서버, Next.js로 웹 인터페이스를 구현하며, AI와 웹 개발을 아우르는 풀스택 프로젝트를 완성할 수 있습니다.
A. 물론입니다! 하지만 Electron을 배우면 웹 브라우저를 넘어 사용자의 데스크톱으로 확장됩니다.
웹 앱은 인터넷이 연결된 브라우저 안에서만 동작하지만, Electron으로 만든 앱은 파일 시스템에 직접 접근하거나, 운영체제의 알림 기능을 사용하는 등 훨씬 강력하고 통합된 사용자 경험을 제공할 수 있습니다.
무엇보다 가장 큰 장점은, C#이나 Java 같은 새로운 언어를 배울 필요 없이 여러분이 가장 자신 있는 React 기술을 그대로 사용하여 이 모든 것을 구현할 수 있다는 점입니다.
네, 충분히 가능합니다! 이 강의는 Javascript 기초 지식만 있다면 누구나 따라올 수 있도록 구성되었습니다.
Electron: 'Electron이 무엇인지'부터 시작하여, React 프로젝트와 어떻게 연동하고 개발 환경을 설정하는지 차근차근 처음부터 함께 진행합니다. 사전 지식이 전혀 없어도 괜찮습니다.
Zustand: 일부러 Redux처럼 복잡하고 방대한 라이브러리 대신, 훨씬 직관적이고 코드량이 적은 Zustand를 선택했습니다.
A. 그렇습니다! 이 강의의 진짜 목표는 단순히 '타이머 앱'을 만드는 것이 아니라, 'React와 Electron으로 데스크톱 앱을 만드는 방법'을 여러분의 것으로 만드는 것입니다.
타이머 앱은 그 공식을 배우기 위한 가장 기초적인 예제일 뿐입니다. 강의를 완강하시면 아래와 같은 다양한 아이디어를 직접 구현할 수 있는 응용력을 갖게 될 것입니다.
매일 아침 시세를 알려주는 주식시세 트래커
API와 연동되는 나만의 날씨 정보 앱
할 일 목록을 관리하는 To-do 리스트
이 강의는 여러분이 상상하는 모든 데스크톱 앱을 만들 수 있는 방법을 알려드리는 과정입니다.
이 강의는 일반적인 사양의 데스크톱 환경이라면 어디서든 수강할 수 있도록 구성되었습니다.
Windows: Windows 10 이상
macOS: macOS 11 (Big Sur) 이상
Linux: Ubuntu 20.04 LTS 등 주요 배포판
강의에 필요한 모든 소프트웨어는 무료로 사용할 수 있으니 걱정하지 마세요.
코드 에디터: Visual Studio Code
런타임: Node.js (18.x LTS 버전 이상 권장) 및 npm (Node.js 설치 시 자동 설치)
기타: 가상머신(VM)이 필요할 수도 있습니다.
웹 개발용 프로그램들이 다소 무겁기 때문에, 아래 사양을 권장합니다. 하지만 최소 사양으로도 실습은 가능합니다.
CPU: Intel i3 / AMD Ryzen 3 이상
메모리(RAM): 8GB 이상 (최소 4GB)
디스크: 개발 도구 및 프로젝트 설치를 위한 10GB 이상의 여유 공간 (SSD 권장)
그래픽카드: 내장 그래픽으로도 충분합니다.
학습의 모든 과정이 하나의 공간에서 체계적으로 이루어질 수 있도록, 모든 자료를 Notion 페이지 하나로 통합하여 제공합니다.
챕터별 전체 소스 코드
각 챕터의 실습을 마친 후, 완성된 전체 코드를 제공합니다. 자신의 코드와 비교하며 놓친 부분을 확인하거나, 막혔을 때 참고용으로 활용하세요.
실습용 리소스 및 애셋
강의 실습에 필요한 아이콘, 이미지 파일 등을 직접 찾을 필요 없이 바로 다운로드하여 사용할 수 있도록 제공합니다.
All-in-One 관리: 별도의 파일을 다운로드하고 관리할 필요 없이, 단 하나의 Notion 링크만 즐겨찾기 해두면 모든 자료에 접근할 수 있어 매우 편리합니다.
지속적인 업데이트: 강의 내용에 변경 사항이나 추가 자료가 생길 경우, Notion 페이지에 즉시 반영하여 항상 최신 정보를 유지합니다.
학습 대상은
누구일까요?
React에 익숙하지만, 웹 브라우저를 넘어 자신만의 데스크톱 프로그램을 만들어보고 싶은 분
개발부터 배포까지, '완성된' 나만의 앱을 만들어 차별화된 포트폴리오를 구성하고 싶은 분
Redux의 복잡함 대신, Zustand와 같은 가볍고 현대적인 상태 관리 라이브러리를 실전 프로젝트를 통해 경험해보고 싶은 분
선수 지식,
필요할까요?
기초적인 JavaScript(ES6+) 문법
HTML, CSS에 대한 기본적인 이해
526
명
수강생
29
개
수강평
51
개
답변
4.8
점
강의 평점
6
개
강의
안녕하세요! 서강대학교 컴공과를 졸업하고 현재 대학원 진학을 준비 중인 학생입니다.
고등학교 때 우연히 풀스택 웹 개발과 파이썬을 활용한 자동 매매를 시작하면서 프로그래밍에 빠지게 되었습니다.
그 후 다양한 프로젝트와 프로그래밍 과외활동을 경험하며 실력과 노하우를 공유했습니다. 이러한 경험을 통해 프로그래밍을 처음 접하는 분들에게도 "이렇게 쉬울 수 있구나!"라는 느낌을 줄 수 있는 강의를 만들고자 노력하고 있습니다.
실용적인 예제와 친근한 설명으로 여러분의 학습을 돕고 싶습니다. 감사합니다.
전체
38개 ∙ (8시간 9분)
해당 강의에서 제공:
₩33,000
지식공유자님의 다른 강의를 만나보세요!
같은 분야의 다른 강의를 만나보세요!