디스크립션: React와 Vitejs를 이용한 파일 업로드 폼 개발에 대해 알아보겠습니다. 제가 직접 경험한 결과로는 React의 컴포넌트와 Vite의 빠른 빌드를 통해 효율적으로 개발할 수 있었어요. 자세한 내용을 아래를 읽어보시면 확인해보세요.
Vitejs로 프로젝트 셋업하기
제가 판단하기로는 Vite의 개발 환경은 매우 훌륭해요. 시작할 때 기본 제공하는 프로젝트 생성 명령어를 이용해 Hello World를 보여주는 단계부터 시작했어요. 사용하는 중에 부들부들한 느낌이 좋아서 만족스러웠습니다. 역시 새로운 기술을 배울 때는 첫걸음이 중요하죠. 그리고, 파일 업로드 폼을 만들기 위해 특정 페이지로 이동해야한다고 했죠. Vite만으로는 라우팅을 처리할 수 없기 때문에 React Router를 도입하기로 결정했어요.
React Router 설정하기
React Router의 문서에 따르면 Vite와 함께 쓰는 것이 좋다고 하더군요. 그래서 저는 다음과 같은 명령어로 라이브러리를 설치했어요.
bash
yarn add react-router-dom @react-router/dev react-router
설정한 코드는 다음과 같아요:
“`javascript
import { StrictMode } from ‘react’;
import ReactDOM from ‘react-dom/client’;
import ‘./index.css’;
import App from ‘./App.tsx’;
import { BrowserRouter, Navigate, Routes, Route } from ‘react-router-dom’;
import AboutPage from ‘./pages/AboutPage.tsx’;
import UploadPage from ‘./pages/file-upload/UploadPage.tsx’;
const root = document.getElementById(‘root’)!;
ReactDOM.createRoot(root).render(
)
“`
이렇게 첫 번째 라우터 세팅이 완료됐어요. 처음 하는 일이라 돌아가면 된다는 마음으로 자유롭게 만들었어요.
배포 단계에서의 어려움
‘yarn build’ 명령어로 프로젝트를 배포할 때 문제가 발생했습니다. 현재 한 서버에서 여러 서비스를 제공하고 있었는데, 대부분 Reverse Proxy 방식으로 운영하고 있었어요. 웹 페이지의 경우 리다이렉션 방법이 아닌 다른 방법으로 접근해야 했죠. 그래서 nginx를 통해 특정 로케이션에서 정적 페이지를 제공하도록 조정했어요.
| 문제 | 해결 방법 |
|---|---|
| 리다이렉션 문제 | nginx 설정으로 경로 지정 |
| URI 문제 발생 | Vitejs의 base 설정으로 해결 |
Vitejs의 설정 조정하기
제가 직접 검색을 통해 확인해본 바로는 Vitejs에서 base를 설정하면 URI 문제를 해결할 수 있다는 것이에요. 다음과 같은 코드를 vite.config.ts에 추가했어요:
“`javascript
import { defineConfig } from ‘vite’;
import react from ‘@vitejs/plugin-react’;
export default defineConfig({
base: ‘/app/’,
plugins: [react()],
build: {
rollupOptions: {
output: {
entryFileNames: “[name].js”,
assetFileNames: “[name].[ext]”,
},
},
},
})
“`
이렇게 base를 ‘/app/’로 변경하는 것만으로도 원하는 설정을 완료했어요. 여기에 nginx의 스파 애플리케이션 처리 설정을 추가하면 성립되는 상황이 되었어요.
n8n과의 통합
가장 중요한 점은 파일 업로드가 작업 완료 후 n8n으로 트리거된다는 것이죠. 테스팅을 통해 쉽게 연동할 수 있음을 확인했어요. n8n에서는 웹훅을 통해 리퀘스트를 받고, 이후 관련 작업을 처리해주면 되니 쉽게 구성할 수 있죠.
성능 최적화 및 마무리
저는 프로젝트를 진행하면서 React와 Vitejs의 조합이 속도와 효율성에 매우 긍정적인 영향을 미친다고 느꼈어요. 빌드 속도는 물론 개발 시 Hot Module Replacement (HMR) 기능 덕분에 즉각적으로 변경 사항을 확인할 수 있었습니다.
bash
yarn build
배포 후에는 이와 같이 테스팅 페이지도 별도로 만들어 여러 테스트를 진행하며 필요한 수정을 즉시 적용했어요.
자주 묻는 질문 (FAQ)
파일 업로드가 성공적으로 되었는지 어떻게 확인하나요?
수신된 n8n 웹훅에서 요청의 상태를 확인할 수 있습니다.
Vite와 React의 조합이 좋은 이유는 무엇인가요?
개발 속도가 빠르고, 빌드 과정에서의 효율성이 탁월해요. HMR 덕분에 실시간으로 수정된 내용을 확인할 수 있어요.
nginx에서 static 파일을 제공하는 방법은?
nginx의 location 블록에서 root 또는 alias를 이용해 경로 설정이 가능합니다.
React Router를 사용할 때 주의할 점은?
각 페이지에서 기본 경로를 올바르게 설정해야 하며,
결론적으로, React와 Vitejs를 활용하여 파일 업로드 폼을 쉽게 개발할 수 있었고, 설정의 어려움도 경험하면서 학습할 수 있는 좋은 기회가 되었어요. 개발 과정에서의 경험은 앞으로도 유용할 것 같아요.
키워드: React, Vitejs, 파일 업로드, React Router, n8n, nginx, web 개발, 프론트엔드, 최적화, 프로젝트 관리, 개발일지