[React] ⭐ 리액트 초기 세팅 (ex)스마트팜 대시보드 어플 개발 -라즈베리파이용)

좋습니다! 이제 React를 사용하여 라즈베리파이에서 동작하는 스마트팜 어플리케이션을 만드는 방법을 단계별로 설명드리겠습니다.

1단계: 개발 환경 설정

먼저 개발 환경을 설정해야 합니다.

1. Node.js 설치: Node.js가 설치되어 있어야 합니다. Node.js 공식 사이트에서 LTS 버전을 다운로드하여 설치하세요.

2. VSCode 설치: Visual Studio Code(이하 VSCode)를 설치합니다. VSCode는 코드 작성에 매우 유용한 도구입니다. VSCode 공식 사이트에서 다운로드할 수 있습니다.

3. React 프로젝트 생성:

   • VSCode에서 새로운 터미널을 열고, 다음 명령어를 실행하여 새 React 프로젝트를 생성합니다.
   • {smart-farm-app}이라는 파일 명일때,

   npx create-react-app smart-farm-app
   cd smart-farm-app

4. 필요한 라이브러리 설치:
   차트와 그래프를 표현하기 위해 recharts를 설치합니다.

   npm install recharts

2단계: 기본 구조 만들기

이제 프로젝트의 기본 구조를 만들어 보겠습니다.

1. App.js 파일 수정:
   src/App.js 파일을 열고, 아래와 같이 수정하세요.

   import React from 'react';
   import Dashboard from './components/Dashboard';
   
   function App() {
     return (
       <div className="App">
         <Dashboard />
       </div>
     );
   }
   
   export default App;

2. 컴포넌트 생성:
   src 폴더 내에 components 폴더를 만들고, Dashboard.js 파일을 생성합니다. 이 파일에 대시보드를 구성할 것입니다.

   mkdir src/components
   touch src/components/Dashboard.js

3. Dashboard.js 파일에 대시보드 컴포넌트 작성:
   아래 코드를 Dashboard.js 파일에 넣습니다.
   아래의 예시 코드는 데이커를 위한 JSON 파일을 포함한 코드입니다.

   import React from 'react';
   import { LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
   
   const Dashboard = () => {
     // Stub 데이터
     const tempHumData = [
       { name: '1일', temp: 24, hum: 65 },
       { name: '2일', temp: 25, hum: 66 },
       // 추가 데이터...
     ];
   
     const waterLevelData = [
       { name: 'Tank 1', value: 60 },
       { name: 'Tank 2', value: 45 },
       // 추가 데이터...
     ];
   
     const illuminationData = [
       { name: '1일', light: 400 },
       { name: '2일', light: 420 },
       // 추가 데이터...
     ];
   
     const tdsData = [
       { name: '1일', tds: 700 },
       { name: '2일', tds: 710 },
       // 추가 데이터...
     ];
   
     const liquidTempData = [
       { name: '1일', temp: 18 },
       { name: '2일', temp: 19 },
       // 추가 데이터...
     ];
   
     const predictionData = [
       { name: '1일', water: 40, nutrient: 30 },
       { name: '2일', water: 45, nutrient: 32 },
       // 추가 데이터...
     ];
   
     const pieData = [
       { name: 'Water', value: 55 },
       { name: 'Nutrient', value: 45 },
     ];
   
     return (
       <div>
         <h1>Overview</h1>
         <div>
           <h3>Farm Air Temperature and Humidity</h3>
           <ResponsiveContainer width="100%" height={200}>
             <LineChart data={tempHumData}>
               <XAxis dataKey="name" />
               <YAxis />
               <CartesianGrid stroke="#ccc" />
               <Tooltip />
               <Legend />
               <Line type="monotone" dataKey="temp" stroke="#8884d8" />
               <Line type="monotone" dataKey="hum" stroke="#82ca9d" />
             </LineChart>
           </ResponsiveContainer>
         </div>
         <div>
           <h3>Water Level</h3>
           <ResponsiveContainer width="100%" height={200}>
             <BarChart data={waterLevelData}>
               <XAxis dataKey="name" />
               <YAxis />
               <CartesianGrid stroke="#ccc" />
               <Tooltip />
               <Legend />
               <Bar dataKey="value" fill="#8884d8" />
             </BarChart>
           </ResponsiveContainer>
         </div>
         <div>
           <h3>Illumination</h3>
           <ResponsiveContainer width="100%" height={200}>
             <BarChart data={illuminationData}>
               <XAxis dataKey="name" />
               <YAxis />
               <CartesianGrid stroke="#ccc" />
               <Tooltip />
               <Legend />
               <Bar dataKey="light" fill="#8884d8" />
             </BarChart>
           </ResponsiveContainer>
         </div>
        ...
       export default Dashboard;
         

3단계: 어플리케이션 실행

이제 어플리케이션을 실행해 봅시다.

1. 개발 서버 실행:
   VSCode 터미널에서 아래 명령어를 실행하여 개발 서버를 시작합니다.

   npm start

2. 브라우저에서 확인:
   개발 서버가 실행되면, 브라우저에서 http://localhost:3000으로 접속하여 어플리케이션을 확인할 수 있습니다.

4단계: 라즈베리파이에서 어플리케이션 실행

어플리케이션이 완성되면, 라즈베리파이에서 구동할 수 있습니다.

1. 빌드 및 배포:
   먼저 어플리케이션을 빌드해야 합니다.

   npm run build

   이 명령어는 어플리케이션을 최적화된 상태로 빌드하여 build 폴더에 결과물을 저장합니다.

2. 라즈베리파이에 배포:
   라즈베리파이에 웹 서버(Nginx, Apache 등)를 설치한 후, build 폴더의 내용을 라즈베리파이 웹 서버의 루트 디렉토리에 복사합니다.

3. 라즈베리파이에서 어플리케이션 접속:
   라즈베리파이의 IP 주소로 접속하여 어플리케이션을 확인할 수 있습니다.

이렇게 하면, 라즈베리파이에서 스마트팜 데이터를 모니터링하고 제어할 수 있는 어플리케이션을 만들 수 있습니다.