[Electron] 튜토리얼 Part 2: 첫 데스크탑 앱 만들기

개발 환경 준비운영체제: Windows 사용 시 WSL(Windows Subsystem for Linux)은 피하는 것이 좋습니다. WSL에서 Electron 실행 시 문제가 발생할 수 있기 때문입니다.코드 에디터: Visual Studio Code를 추천하며, 확장 기능으로 JavaScript 작업을 최적화할 수 있습니다.터미널: OS 기본 터미널(Windows: CMD/PowerShell, macOS/Linux: Terminal)을 사용하거나, 에디터 내 터미널을 활용합니다.npm 프로젝트 초기화새 프로젝트 폴더를 새성하고 이동mkdir my-first-electron-app && cd my-first-electron-appnpm으로 프로젝트 초기화npm init -yElectron 개발 의존성으로 ..

• format_list_bulleted Electron
• · 2025. 3. 19.
• textsms

[Electron] 튜토리얼 Part 1: 시작하기 전 알아야 할 모든 것

Electron은 JavaScript, HTML, CSS와 같은 웹 기술을 활용해 Windows, macOS, Linux에서 실행 가능한 데스크탑 애플리케이션을 만들 수 있는 강력한 프레임워크입니다. Chromium과 Node.js를 통합한 구조 덕분에, 단일 코드베이스로 다양한 플랫폼을 지원하며 개발자들에게 친숙한 환경을 제공합니다.이번 튜토리얼은 Electron을 이용하여 첫 번째 애플리케이션을 구축하고, 이를 패키징 및 배포하는 과정을 단계별로 안내합니다. 먼저 필요한 전제 조건과 도구들을 점검한 후, 실제 코드를 작성하며 전반적인 개발 과정을 이해해 보겠습니다.개발을 위한 전제 조건웹 기술 익숙도Electron의 UI는 HTML과 CSS로 구성되고, JavaScript로 동작을 제어합니다. 기본적..

• format_list_bulleted Electron
• · 2025. 3. 19.
• textsms

[Electron] 일렉트론이란 무엇인가

Electron의 강점단일 코드로 다중 플랫폼 지원: 한 번 작성한 코드로 여러 운영체제에서 동작하는 앱을 만들 수 있어 개발 시간과 유지보수 비용을 크게 줄일 수 있습니다.웹 기술 활용: 웹 개발 경험이 있는 개발자라면 별도의 학습 없이도 데스크탑 앱을 제작할 수 있으며, 풍부한 UI/UX를 구현할 수 있습니다.광범위한 API와 문서: 파일 시스템 접근, 네이티브 다이얼로그, 시스템 트레이 등 데스크탑 앱에 필요한 기능을 제공하며, 잘 정리된 문서로 쉽게 접근 가능합니다.Electron Fiddle: Electron Fiddle는 실험용 샌드박스 앱으로, 공식 예제와 문서를 보다 손쉽게 탐구하고 프로토타입을 만들어볼 수 있도록 지원합니다.웹 기술의 가능성접근성과 창의성다양한 UI 구현: HTML5와 C..

• format_list_bulleted Electron
• · 2025. 3. 19.
• textsms

[REACT] state의 스냅샷 이해하기

state는 스냅샷React의 useState Hook은 상태 변수와 업데이트 함수를 제공합니다. 상태를 변경하면 React는 컴포넌트를 재렌더링하며, 새로운 상태를 반영한 UI 스냅샷을 생성합니다. 그러나 현재 렌더링의 스냅샷은 고정되어 있으며, 이벤트 핸들러 내에서 상태 변경 함수가 호출되더라도 그 시점의 상태 값은 그대로 유지됩니다. 이는 상태가 각 렌더링의 사진처럼 캡처되어 사용됩니다.import { useState } from 'react';export default function ScoreBoard() { const [score, setScore] = useState(0); const handleScoreIncrease = () => { setScore(score + 1); s..

• format_list_bulleted 리액트 학습하기
• · 2025. 3. 14.
• textsms

[REACT] 렌더링과 커밋 과정: 화면에 나타나기까지의 3단계

트리거: 렌더링 요청렌더링은 두 가지 경우에 발생합니다.초기 렌더링: 애플리케이션이 처음 실행될 때, 루트 컴포넌트를 DOM에 마운트하기 위해 렌더링이 트리거됩니다.상태/Props 변경: useState나 useReducer를 통해 상태가 업데이트되거나, 부모로부터 새로운 props가 전달되면 재렌더링이 발생합니다.렌더: 컴포넌트 호출과 JSX 계산렌더 단계에서 React는 컴포넌트를 호출해 현재 상태와 props를 기반으로 JSX 트리를 생성합니다. 이 과정은 순수 함수처럼 동작하여, 동일한 입력에 대해 항상 동일한 출력을 반환합니다. 렌더링은 실제 DOM에 반영되기 전, 메모리 내에서 계산되는 단계로 볼 수 있습니다.import { useState, useEffect } from 'react';exp..

• format_list_bulleted 리액트 학습하기
• · 2025. 3. 14.
• textsms

[REACT] 상태 관리: useState로 컴포넌트의 동적 메모리 활용하기

상태가 필요한 이유사용자가 버튼을 누르거나 입력 필드에 텍스트를 추가할 때, 컴포넌트는 그 변화를 기억하고 UI에 반영해야 합니다. 예를 들어, 체크리스트에서 항목을 선택하거나, 탭 메뉴에서 활성 탭을 전환할 때, 단순 변수로는 이를 유지할 수 없습니다. 상태(state)는 이런 데이터를 저장하고, 변경 시 컴포넌트를 자동으로 업데이트하는 역할을 합니다.useState로 상태 선언하기useState는 상태 변수와 그 값을 업데이트하는 함수를 쌍으로 반환합니다. 상태가 변경되면 React는 컴포넌트를 재렌더링해 최신 상태를 반영합니다.import { useState } from 'react';export default function TogglePanel() { const [isOpen, setIsOpe..

• format_list_bulleted 리액트 학습하기
• · 2025. 3. 14.
• textsms