[Genie95] #2. React 기반 프론트엔드 개발의 장점은?

프론트엔드 웹개발은 보통 HTML + CSS 개발로 이뤄집니다. 만약 동적인 요소를 추가하고 싶다면 Javascript까지 이용하여 웹페이지를 개발할 수 있습니다. 하지만 홈페이지에 들어가는 모든 asset을 하나하나 개발한다면 굉장히 시간이 많이 소요될 것입니다. 그래서 이를 보완할 수 있는 라이브러리로 React가 있습니다. Windows 95 테마의 컴포넌트를 제공하는 @react95 라는 패키지를 발견하여서 홈페이지 개발에 많은 시간이 절약될 것으로 예상됩니다.

 

---

기존 HTML + CSS 개발은?

우리가 일반적으로 HTML + CSS로 웹사이트를 만들 때는 정적인 구조를 직접 코딩을 해야합니다.

 

📌 예제 (HTML + CSS 방식)

<div class="window">
  <div class="title-bar">
    <span>내 포트폴리오</span>
    <button class="close-btn">X</button>
  </div>
  <div class="content">
    <p>안녕하세요! 제 포트폴리오에 오신 것을 환영합니다.</p>
  </div>
</div>

.window {
  width: 400px;
  background: #c0c0c0;
  border: 2px solid #808080;
  box-shadow: 3px 3px 0 #000;
  font-family: 'Tahoma', sans-serif;
}

 

이처럼 정적인 페이지를 직접 코딩하고, JavaScript로 동작을 추가할 수 있습니다.

 

React 기반의 개발 방식은?

React는 컴포넌트(Component) 기반의 UI 라이브러리 입니다. 즉, HTML 요소들을 재사용 가능한 ‘조각’으로 만들고 이를 조립해서 웹사이트를 구성하는 방식입니다.

 

📌 React에서 @react95을 사용한 예제

import React from 'react';
import { Window, WindowHeader, WindowContent, Button } from '@react95/core';

function MyApp() {
  return (
    <Window>
      <WindowHeader>
        <span>내 포트폴리오</span>
      </WindowHeader>
      <WindowContent>
        <p>안녕하세요! 제 포트폴리오에 오신 것을 환영합니다.</p>
        <Button onClick={() => alert('버튼 클릭!')}>클릭 me</Button>
      </WindowContent>
    </Window>
  );
}

export default MyApp;

 

React 의 주요 특징은 다음과 같습니다.

• 컴포넌트화 → Window, Button 같은 요소를 재사용 가능하게 만듦
• 동적 UI 구현이 쉬움 → onClick 이벤트를 쉽게 추가 가능
• HTML보다 구조가 깔끔하고 유지보수하기 편리함

즉, React를 사용하면 HTML을 직접 코딩하는 것보다 더 효율적으로 UI를 만들 수 있습니다.

 

React & @react95 설치 방법

이제 @react95을 설치하기 위해 React 환경을 먼저 구성해야 합니다. 저는 Visual Studio Code에서 React 프로젝트를 생성하고 @react95을 설치하였습니다.

 

Step 1: VSCode에서 React 프로젝트 생성

1️⃣ 터미널 열기 (Ctrl + ~ 또는 메뉴에서 New Terminal)

2️⃣ React 프로젝트 생성 (Node.js 필요)

npx create-react-app my-portfolio

• my-portfolio는 프로젝트 폴더 이름 (원하는 이름으로 변경 가능)

• 실행하면 my-portfolio 폴더에 React 기본 프로젝트가 생성됨

3️⃣ 프로젝트 폴더로 이동

cd my-portfolio

4️⃣ VSCode에서 프로젝트 열기

code .

• 현재 폴더를 VSCode에서 열어줌

 

Step 2: @react95 설치

1️⃣ @react95 패키지 설치

npm install @react95/core

또는

yarn add @react95/core

 

2️⃣ 설치 완료 후, package.json에 @react95이 추가되었는지 확인

"dependencies": {
  "@react95/core": "^3.0.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
}

 

Step 3: React 프로젝트 실행

1️⃣ 개발 서버 실행 (React 앱 미리보기)

npm start

• 브라우저에서 http://localhost:3000이 열리면서 React 앱이 실행됩니다.

---

🚀 최종 정리

✅ React는 기존 HTML + CSS 방식과 다르게 컴포넌트 기반으로 개발됨

✅ @react95을 설치하면 Windows 95 스타일 UI를 쉽게 구현 가능

✅ VSCode에서 React 프로젝트를 생성한 후 @react95을 설치하면 바로 개발 가능