[React] MongoDB 연결과 사용법 [두원공과대학교 인공지능과 김동일교수] 25.13

React 프로젝트 생성과 프론트/백엔드 분리

빈 폴더에서 npx create-react-app react-mongo --template typescript 명령어로 프로젝트를 먼저 만들어요. 생성된 폴더를 프론트엔드와 백엔드로 나눠서 운영하는 게 핵심인데요, 이렇게 분리하면 보안이 훨씬 좋아지죠. React는 브라우저에서 돌아가기 때문에 DB 접속 정보를 그대로 두면 유출 위험이 커지거든요. 그래서 백엔드 폴더는 Node.js로 따로 만들어 MongoDB 연결 로직만 담당하게 구성합니다.

터미널을 두 개 열어서 하나는 cd frontend로 이동하고, 다른 하나는 cd backend로 이동하세요. 백엔드 쪽에는 npm init -y 후에 필요한 패키지를 설치할 준비를 해둡니다. 이렇게 디렉토리를 명확히 나누면 나중에 MQTT나 다른 서비스를 추가할 때도 충돌 없이 확장하기 편해요. 실제로 많은 개발자들이 이 구조를 쓰는 이유는 프론트엔드 배포와 백엔드 배포를 독립적으로 할 수 있어서예요.

MongoDB 백엔드 서버 구성하기

백엔드 폴더에 mongo-client.js 파일을 만들고, MongoDB 클라이언트 연결 코드를 넣습니다. mongodb와 express 패키지를 동시에 설치한 뒤, MongoClient로 로컬 DB(127.0.0.1)에 연결하세요. 데이터베이스 이름은 local, 컬렉션은 records로 정하는 게 기본인데요, 이 컬렉션에 MAC 주소와 이메일 정보를 함께 저장합니다.

주요 API로는 find, insert, upsert 세 가지를 먼저 구현해요. find는 조건에 맞는 데이터를 배열로 모두 가져오고, upsert는 데이터가 없으면 새로 넣고 있으면 업데이트합니다. 예를 들어 이메일과 MAC 주소를 동시에 조건으로 주면 해당 레코드만 정확히 찾아서 처리할 수 있어요. 콘솔 로그를 찍어서 실제로 데이터가 들어오는지 바로 확인하는 습관을 들이면 디버깅 시간이 절반으로 줄어듭니다.

프론트엔드 API 호출과 데이터 실전 테스트

프론트엔드에서는 버튼 네 개를 만들어 각각의 API를 호출합니다. ‘모든 데이터 가져오기’는 localhost:5000/records로 GET 대신 POST를 쓰는 게 보안상 유리해요. JSON.stringify로 body를 만들어 보내고, 응답으로 받은 배열을 화면에 렌더링합니다.

‘단일 데이터 가져오기’는 이메일을 조건으로 넣어서 findArray를 실행하고, ‘데이터 삽입’은 upsert API를 호출합니다. 실제로 데이터를 지웠다가 다시 삽입해 보면 MongoDB에 바로 반영되는 걸 확인할 수 있어요. CSS에서 헤더 높이를 10vh로 줄이면 UI가 깔끔해지는데, 이런 작은 디테일이 사용자 경험을 크게 좌우합니다. 나중에 MQTT 데이터를 자동으로 넣는 로직을 추가할 때도 이 구조를 그대로 활용할 수 있습니다.