장난감

라즈베리파이를 이용한 가족 앨범 만들기

에드몽단테스 2025. 6. 14. 12:17

아들 초등학교 졸업 사진을 휴대전화에서 찾는데 없다.

분명 찍은 것을 기억하는데 없다.

다른 휴대전화로 찍었었나?

아무튼 그렇게 사진을 찾지 못하고, 이와 비슷한 사례가 많다는 것을 기억했다.

분명 휴대전화로 사진은 찍었는데, 휴대전화가 변경되거나 혹은 고장이 나거나 해서 나중에는 소리 소문 없이 사라진다.

예전 같았으면 필름을 현상했을텐데, 요즘은 디지털 사진이라 그런것도 없다. 그냥 휴대전화 속에서만 존재한다.

그래서 집에 서버를 하나 두고 포토 앨범을 만들어 필요할 때 사진을 입력하고 볼 수 있는 사이트를 만들기로 했다.

 

집에서 항상 서버로 켜 둘 PC는 라즈베리파이3으로 했다. 요즘은 버전 5까지 있는데, 나는 구형으로 몇 개 가지고 있다.

그리고 가족앨범 사이트는 react로 만들고(공부겸 해서), 사진은 USB에 담아 추후 쉽게 사진을 업로드할 수 있도록 했다.

 

집 안에서만 사용할 것이기 때문에 로그인 기능은 없다.

사진은 USB에 SFTP로 관리를 한다.

Rpaspberry PI OS 설치

OS 설치는 https://www.raspberrypi.com/software 에서 Respberry PI Imager를 다운로드 받은 후 더블클릭하여 설치한다.

하드웨어, OS 종류, OS설치 위치를 설정하면 설치가 완료된다. (참 쉽다.)

Node.js설치

리액트는 Node.js기반이기 때문에 nodejs를 설치한다.

 

# Download and install fnm:

curl -o- https://fnm.vercel.app/install | bash

 

# Download and install Node.js:

fnm install 22

 

# Verify the Node.js version:

node -v # Should print "v22.15.0".

 

# Verify npm version:

npm -v # Should print "10.9.2".

 

 

node 설치는 https://nodejs.org/en/download에서 OS와 버전을 선택하면 설치할 수 있는 스크립트를 알려준다.

fnm을 설치하고 node를 설치한다.

설치는 단 두 줄이면 완료된다.

리액트 설치 테스트

우선 간단한 리액트 샘플을 설치해보고 잘 되는지 확인한다.

# npx create-react-app moz-todo-react --location=global
# cd create-react-app
# npm start

기본 포트는 3000이다.

잘 되는 것을 확인했으면 가족앨범 소스를 복사해서 서버에 업로드 후 실행시킨다.

# mkdir /webapps
# mkdir /webapps/photo
(소스 복사)
# npm start

처음 리액트를 공부하기 위해 시작한 것도 있었는데 클로드 AI가 더미데이터까지 포함해서 앨범을 만들어 주었다.

이것 참! 개발자를 바보로 만드는군. 아무튼 잘 만들어 주었다. 나중에 실제데이터를 연동하는 부분만 수정하면 될 것 같다.

라즈베리파이 USB 연결

라즈베리파이에 USB를 연결하면 자동으로 마운트가 된다.

위치는 /media/{사용자계정}/{USB볼륨}이 된다.

나는 웹소스의 위치를 /webapps/photo에 설치했는데 USB가 /media/dantes/PHOTO에 마운트가 되면 웹소스에서는 USB를 보안상 읽을 수 없게 된다.

그래서 웹에서 USB를 읽을 수있도록 소프트링크를 걸었다. 일종의 단축아이콘 개념이다.

# 소프트 링크 추가 (단축아이콘 개념)

# ln –s [원본경로] [링크파일경로]
# ln –s /media/dantes/PHOTO/data /webapps/photo/public

server.js 추가 및 실행

이제 USB의 내용을 읽어 포토앨범에 json형태로 데이터를 넘겨주기 위한 서버를 설치해 보자.

서버는 express로 구동한다.

# 설치
# npm install express
# npm install cors

# 실행
# node server.js

[server.js]

const express = require('express');
const cors = require('cors');
const fs = require('fs');
const path = require('path');

const app = express();
   
const port = process.env.PORT || 4000;

// 미들웨어 설정
app.use(cors());
app.use(express.json());

let directoryList2 = [];

// 디렉토리 목록 API

app.get('/api/directories', (req, res) => {
  const photoDir = path.join(__dirname, 'public', 'data', 'photo');

  console.log('call /api/directories')
  try {
    const directories = fs.readdirSync(photoDir)
      .filter(file => fs.statSync(path.join(photoDir, file)).isDirectory());


    const directoryList = directories.map((dir, index) => {
      const cnt = fs.readdirSync(path.join(photoDir, dir))
        .filter(file => {
          const ext = path.extname(file).toLowerCase();
          return ['.jpg', '.jpeg', '.png', '.gif'].includes(ext);

소스가 참 간단하다. 마찬가지로 클로드 AI가 만들어줬다.

 

소스 디렉토리 목록

 

[API] http :// 172.20.101.240:4000/api/directories

 

이제 리액트에서 더미데이터가 아닌 server.js의 API를 호출해서 실제데이터로 앨범을 구성한다.

 

 

이제 집 안에서만 호출이 가능한 포토 앨범이 완성되었다.

 

반응형
저작자표시 (새창열림)