프로젝트 개요은둔 청년의 감정 분석을 기반으로 맞춤형 산책 경로를 추천하고, 산책 완료 시 리워드를 제공하여 일상 복귀를 지원하는 솔루션 서비스
프로젝트 과정5인 팀이 기획부터 설계, 디자인, 프론트엔드·백엔드 개발, 서버 구축까지 전 과정을 분담하고 협업하여 완성한 풀스택 웹앱 프로젝트
기술 스택React + Recoil + React Query를 기반으로 한 프론트엔드와, Express + MongoDB + JWT 인증 구조를 갖춘 백엔드 서버로 구성된 풀스택 웹 애플리케이션 프로젝트
담당 업무
- face-api.js를 활용하여 사용자 얼굴 인식 및 감정 분석 기능 개발
- AWS 환경에 서버를 구축하여 서비스 인프라 구성
- Express 기반으로 RESTful API를 설계 및 개발하여 프론트엔드와 백엔드 간 안정적인 데이터 통신 및 기능 연동 지원
트러블 슈팅
portfolio_mindwalk_troubleshooting_trouble_title1문제
AWS EC2 서버에 Express 기반 백엔드 서버를 배포한 후, 프론트엔드(React)와 통신 시 CORS(Cross-Origin Resource Sharing) 에러가 발생함.
브라우저 보안 정책에 따라, 도메인이 다른 클라이언트에서 API 요청을 보내면 서버가 명시적으로 허용하지 않으면 차단되는데, Express에서 기본 CORS 허용 설정을 했음에도 문제 해결이 되지 않음.
서버 환경 구성(AWS EC2 + 프록시 설정) 상의 이슈로 인해 추가적인 접근 제어가 필요한 상황이 발생함.
문제 해결 및 성과
Nginx를 프록시 서버로 구성하여, 프론트엔드와 백엔드 간의 요청을 중계
→ 프록시 서버(Nginx) 레벨에서 필요한 CORS 헤더(Access-Control-Allow-Origin, Access-Control-Allow-Methods 등)를 추가
서버 및 프록시 설정 모두에서 CORS 처리를 이중으로 안정화
→ 프론트엔드와 백엔드 간 정상 통신 확보 및 브라우저 차단 문제 해결
시스템 전반의 네트워크 통신 경로를 명확히 분리하고 관리하여, 이후 확장 및 운영 안정성 강화
