개발기간: 2023.06.12 ~ 2023.07.02
형태 : App
| 지민성 | 박세윤 | 석다영 | 신산하 |
|---|---|---|---|
| Back & Front | Back | Front | Front |
| @minsung37 | @ParkSeYun98 | @Daen12 | @SahhaShin |
For building and running the application you need:
- Front
react 18.2.0
react-speech-recognition 3.10.0
Node.js 18.16.0
Npm 9.5.1
reduxjs/toolkit 1.9.5
stomp/stompjs 7.0.0
axios 1.4.0
bootstrap 5.3.0
react-bootstrap 2.7.4
http-proxy-middleware 2.0.6
- Back
Spring Boot 3.1.0
java 17
MySQL 8.23
회원가입/로그인 : 카카오 로그인
취업 : 워크넷 장년 인턴 API
건강 : 건강보험심사평가원_병원정보서비스
건강 : OpenAI
건강 : 카카오맵
문화 : 전국 공연 행사 정보 표준데이터
- 0.1.0
- 첫 출시 (2023.07.02)
- 수정: react-speech-kit에서 react-speech-recognition으로 변경 (2023.07.02)
- 0.0.1
- 작업 진행 중 (2023.06.12)
문제 사항: 프론트엔드에서 백엔드로 API 요청 시 CORS 에러
해결 방안: Http-Proxy-Middleware 패키지 설치 및 setupProxy.js 배치
const { createProxyMiddleware } = require("http-proxy-middleware");
// src/setupProxy.js
module.exports = function (app) {
app.use(
createProxyMiddleware("/api", {
target: process.env.REACT_APP_SERVER,
changeOrigin: true,
})
);
};개념: 프록시 서버는 클라이언트가 프록시 서버를 통해 다른 네트워크에 간접적으로 접속할 수 있게 해준다. 쉽게 이해하자면 "중계서버"라고 이해하면 된다.
출처: https://velog.io/@yunsungyang-omc/React-React-App%EC%97%90%EC%84%9C-CORS-%EC%9D%B4%EC%8A%88-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0
문제 사항: Redux Toolkit 재렌더링 시 내부 데이터가 초기화되는 이슈
해결 방안1: redux-persist 적용해 local storage에 정보 저장하려 했지만 제대로 동작 안함
해결 방안2: local storage로 다음 페이지에 필요한 정보만 저장하는 방향으로 진행 (채택)
문제 사항: 버튼을 길게 눌러 음성을 인식하는 구조, 핸드폰 웹에서는 작동 안됨
해결 방안: react-speech-recognition을 이용해 [start] 버튼 클릭 후 음성 인식, [stop] 버튼 클릭 후 인식 중단
추가 문제점: 리액트 웹을 앱으로 다운받았을 때 버튼이 안눌리는 이슈 발생