Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
개발 · 프로그래밍

/

데스크톱 앱 개발

[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

React, Electron, Zustand를 활용해 타이머 앱을 직접 제작하고 크로스 플랫폼(윈도우, 맥 OS, 리눅스)으로 배포까지 하는 실전 강의입니다. 익숙한 React 웹 개발을 시작으로, Zustand를 통한 전역 상태 관리와 최종 GUI 배포까지, 데스크톱 앱 개발의 전체 흐름을 배우실 수 있습니다!

65명 이 수강하고 있어요.

  • 닭강정
실습 중심
토이프로젝트
처음하는배포
electron
cross-platformReactElectronGUIzustand

이런 걸 배울 수 있어요

  • Electron의 핵심 개념 및 개발 환경 구축

  • React를 활용한 데스크톱 UI/UX 개발

  • Zustand를 이용한 쉽고 강력한 상태 관리

  • 개발부터 빌드, 배포까지 앱 제작의 전체 과정 경험

  • Electron과 React 간의 통신 (IPC) 활용

자바 스크립트로 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를 선택했습니다. 타이머의 '시작/정지' 상태나 남은 시간 같은 전역 상태를 최소한의 코드로 간결하게 관리하는 방법을 배웁니다.

궁금한 점이 있나요?

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 페이지에 즉시 반영하여 항상 최신 정보를 유지합니다.

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • React에 익숙하지만, 웹 브라우저를 넘어 자신만의 데스크톱 프로그램을 만들어보고 싶은 분

  • 개발부터 배포까지, '완성된' 나만의 앱을 만들어 차별화된 포트폴리오를 구성하고 싶은 분

  • Redux의 복잡함 대신, Zustand와 같은 가볍고 현대적인 상태 관리 라이브러리를 실전 프로젝트를 통해 경험해보고 싶은 분

선수 지식,
필요할까요?

  • 기초적인 JavaScript(ES6+) 문법

  • HTML, CSS에 대한 기본적인 이해

안녕하세요
입니다.

424

수강생

25

수강평

44

답변

5.0

강의 평점

5

강의

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

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

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

 

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

 

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

커리큘럼

전체

38개 ∙ (8시간 9분)

해당 강의에서 제공:

강의 게시일: 
마지막 업데이트일: 

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!

월 ₩143,275

5개월 할부 시

₩33,000

닭강정님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

비슷한 강의

같은 분야의 다른 강의를 만나보세요!