강의

멘토링

로드맵

Programming

/

Desktop Application

[JavaScript GUI Development #1] Timer App with Electron + React (+ Zustand)

This is a practical course where you will directly create a timer app using React, Electron, and Zustand, and even deploy it to cross-platforms (Windows, macOS, Linux). Starting with familiar React web development, you can learn the entire flow of desktop app development, including global state management via Zustand and final GUI deployment!

(5.0) 1 reviews

79 learners

  • dakgangjung123
실습 중심
토이프로젝트
처음하는배포
electron
cross-platform
React
Electron
GUI
zustand

What you will learn!

  • Electron Core Concepts & Dev Env Setup

  • Desktop UI/UX Development with React

  • Easy and Powerful State Management Using Zustand

  • App dev-to-deploy process experience

  • Electron and React IPC Usage

자바 스크립트로 GUI 개발이 가능할까요?

네, 가능합니다! 그것도 웹 개발을 하면서 한 번쯤은 써본 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)에 맞는 파일을 다운로드하세요.

React: 익숙함으로 완성하는 아름다운 UI

이 강의는 여러분이 이미 알고 있는 React 지식을 기반으로 시작합니다. 우리는 React의 핵심인 컴포넌트 기반 개발 방식과 Hooks를 활용하여 타이머 앱의 모든 화면을 직접 만듭니다.

Electron: 내 코드를 진짜 '설치형 GUI'로

이 강의의 핵심입니다. Electron은 우리가 React로 만든 웹 프로젝트를 Windows(.exe), macOS(.dmg) 등에서 실제로 설치하고 실행할 수 있는 데스크톱 애플리케이션으로 만들어주는 다리 역할을 합니다. 복잡한 네이티브 언어 없이, 웹 기술만으로 어떻게 데스크톱 앱 개발 환경을 구축하고, 최종 결과물까지 만들어내는지 그 전 과정을 실습합니다.

Zustand: 가장 실용적이고 간편한 전역 상태 관리

복잡한 설정이 필요한 Redux 대신, 이 강의에서는 Zustand를 선택했습니다. 타이머의 '시작/정지' 상태나 남은 시간 같은 전역 상태를 최소한의 코드로 간결하게 관리하는 방법을 배웁니다.

React & FastAPI로 만드는 투표 커뮤니티 플랫폼: 결제 시스템으로 수익화까지!

실시간 투표, 댓글, 좋아요 같은 핵심 소셜 기능부터 카카오페이·토스페이 연동을 통한 결제 시스템까지!
단계별 실습으로 커뮤니티 플랫폼 구축과 수익화 전략을 한 번에 익혀보세요.

내가 타이타닉에 탔었다면?! PyTorch & Next.js로 생존 확률 예측 AI 웹 서비스 만들기

“내가 타이타닉에 탔다면 살아남을 수 있었을까?”라는 흥미로운 질문을 실제 데이터로 풀어봅니다.
PyTorch로 AI 모델을 만들고, FastAPI로 백엔드 서버, Next.js로 웹 인터페이스를 구현하며, AI와 웹 개발을 아우르는 풀스택 프로젝트를 완성할 수 있습니다.

궁금한 점이 있나요?

Q1. 웹 개발자인데, 굳이 Electron까지 배워야 할까요? 그냥 웹만 만들어도 되지 않나요?

A. 물론입니다! 하지만 Electron을 배우면 웹 브라우저를 넘어 사용자의 데스크톱으로 확장됩니다.

웹 앱은 인터넷이 연결된 브라우저 안에서만 동작하지만, Electron으로 만든 앱은 파일 시스템에 직접 접근하거나, 운영체제의 알림 기능을 사용하는 등 훨씬 강력하고 통합된 사용자 경험을 제공할 수 있습니다.

무엇보다 가장 큰 장점은, C#이나 Java 같은 새로운 언어를 배울 필요 없이 여러분이 가장 자신 있는 React 기술을 그대로 사용하여 이 모든 것을 구현할 수 있다는 점입니다.

Q2. Electron이나 Zustand는 처음인데, React 초보자도 따라갈 수 있는 수준인가요?

네, 충분히 가능합니다! 이 강의는 Javascript 기초 지식만 있다면 누구나 따라올 수 있도록 구성되었습니다.

  • Electron: 'Electron이 무엇인지'부터 시작하여, React 프로젝트와 어떻게 연동하고 개발 환경을 설정하는지 차근차근 처음부터 함께 진행합니다. 사전 지식이 전혀 없어도 괜찮습니다.

  • Zustand: 일부러 Redux처럼 복잡하고 방대한 라이브러리 대신, 훨씬 직관적이고 코드량이 적은 Zustand를 선택했습니다.


Q3. 이 강의를 듣고 나면, 타이머 앱 말고 다른 프로그램도 만들 수 있게 되나요?

A. 그렇습니다! 이 강의의 진짜 목표는 단순히 '타이머 앱'을 만드는 것이 아니라, 'React와 Electron으로 데스크톱 앱을 만드는 방법'을 여러분의 것으로 만드는 것입니다.

타이머 앱은 그 공식을 배우기 위한 가장 기초적인 예제일 뿐입니다. 강의를 완강하시면 아래와 같은 다양한 아이디어를 직접 구현할 수 있는 응용력을 갖게 될 것입니다.

  • 매일 아침 시세를 알려주는 주식시세 트래커

  • API와 연동되는 나만의 날씨 정보 앱

  • 할 일 목록을 관리하는 To-do 리스트

이 강의는 여러분이 상상하는 모든 데스크톱 앱을 만들 수 있는 방법을 알려드리는 과정입니다.

수강 전 참고 사항

실습 환경

이 강의는 일반적인 사양의 데스크톱 환경이라면 어디서든 수강할 수 있도록 구성되었습니다.

운영 체제 (OS)

  • 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)이 필요할 수도 있습니다.

권장 PC 사양

웹 개발용 프로그램들이 다소 무겁기 때문에, 아래 사양을 권장합니다. 하지만 최소 사양으로도 실습은 가능합니다.

  • CPU: Intel i3 / AMD Ryzen 3 이상

  • 메모리(RAM): 8GB 이상 (최소 4GB)

  • 디스크: 개발 도구 및 프로젝트 설치를 위한 10GB 이상의 여유 공간 (SSD 권장)

  • 그래픽카드: 내장 그래픽으로도 충분합니다.

학습 자료

학습의 모든 과정이 하나의 공간에서 체계적으로 이루어질 수 있도록, 모든 자료를 Notion 페이지 하나로 통합하여 제공합니다.

Notion 페이지에서 제공되는 것들

  • 챕터별 전체 소스 코드
    각 챕터의 실습을 마친 후, 완성된 전체 코드를 제공합니다. 자신의 코드와 비교하며 놓친 부분을 확인하거나, 막혔을 때 참고용으로 활용하세요.


  • 실습용 리소스 및 애셋
    강의 실습에 필요한 아이콘, 이미지 파일 등을 직접 찾을 필요 없이 바로 다운로드하여 사용할 수 있도록 제공합니다.


학습 자료의 특징

  • All-in-One 관리: 별도의 파일을 다운로드하고 관리할 필요 없이, 단 하나의 Notion 링크만 즐겨찾기 해두면 모든 자료에 접근할 수 있어 매우 편리합니다.

  • 지속적인 업데이트: 강의 내용에 변경 사항이나 추가 자료가 생길 경우, Notion 페이지에 즉시 반영하여 항상 최신 정보를 유지합니다.

Recommended for
these people

Who is this course right for?

  • For those familiar with React, but wanting to create their own desktop program beyond web browsers.

  • For those seeking a unique portfolio by building their own 'complete' app, from dev to deployment.

  • For those who want to experience lightweight and modern state management libraries like Zustand through a real-world project, instead of Redux's complexity

Need to know before starting?

  • Basic JavaScript(ES6+) Syntax

  • Basic understanding of HTML, CSS

Hello
This is

525

Learners

29

Reviews

51

Answers

4.8

Rating

6

Courses

안녕하세요! 서강대학교 컴공과를 졸업하고 현재 대학원 진학을 준비 중인 학생입니다.

고등학교 때 우연히 풀스택 웹 개발과 파이썬을 활용한 자동 매매를 시작하면서 프로그래밍에 빠지게 되었습니다.

그 후 다양한 프로젝트와 프로그래밍 과외활동을 경험하며 실력과 노하우를 공유했습니다. 이러한 경험을 통해 프로그래밍을 처음 접하는 분들에게도 "이렇게 쉬울 수 있구나!"라는 느낌을 줄 수 있는 강의를 만들고자 노력하고 있습니다.

 

실용적인 예제와 친근한 설명으로 여러분의 학습을 돕고 싶습니다. 감사합니다.

 

GitHub 저장소 바로가기 (클릭!)

Curriculum

All

38 lectures ∙ (8hr 9min)

Course Materials:

Published: 
Last updated: 

Reviews

All

1 reviews

5.0

1 reviews

  • dkfkqlxm님의 프로필 이미지
    dkfkqlxm

    Reviews 14

    Average Rating 5.0

    5

    100% enrolled

    • 닭강정
      Instructor

      제 강의에 첫 별점을 남겨주셔서 감사합니다! 별점 5점과 함께 끝까지 강의를 들어주신 덕분에 더 큰 힘이 됩니다. 앞으로도 좋은 강의로 보답하겠습니다.

$26.40

dakgangjung123's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!