MSA 템플릿 교육 실습 관련(프론트엔드 부분) 문의입니다
- 작성자 :
- 질*
- 작성일 :
- 2023-04-26 20:50:16
- 조회수 :
- 868
- 구분 :
- 개발환경 / 4.1
- 진행상태 :
- 완료
Q
안녕하세요
전자정부프레임워크 MSA 템플릿 교육자료(03.MSA템플릿_프론트엔드구성및실습.pdf ) 를 참고하여 실습 중입니다
4.프로젝트 실행 > 사용자시스템 실행 부분에서 발생된 2가지 에러 문의입니다
1. 포트 관련 (port : 3001) 에러
포트 3000 으로 관리자 시스템 실행 후에 브라우저에서 화면 확인 하였고 배너관리메뉴에서 배너 추가 후에
사용자 시스템 실행을 위해 교육자료에 나와있는대로 (p.30) env.local 파일 수정 (포트와 사이트 아이디 추가) 후
cmder 에서 workspace.edu/egovframe-msa-edu/frontend/port 폴더로 이동하여
npm install
npm run dev
실행 명령어를 입력하였는데
<포트 에러 이미지 첨부파일 참고>
포트 3000 번이 이미 사용중이라는 에러가 납니다
정확한 해결방법과 원인을 알고싶습니다.
2. recoilroot 에러가 발생
똑같은 환경의 다른 작업pc에서 같은 증상이 발생하여
cmder에서 명령어를 실행하여 react 버전만 react": "17.0.2" ----> 18.2.0 로 업그레이드 하였습니다
react 버전 업그레이드 후 npm run dev 다시 실행하니 3001 포트로 사용자시스템이 떴는데 (관리자시스템은 3000번으로 떠있는 상황)
사용자(portal) 시스템 실행 후 브라우저로 접속하면
다음과 같은 에러가 발생합니다.
에러 메세지
error: this component must be used inside a <recoilroot> component.
error 발생 위치는
mainLG.tsx 파일
라인 23 const user = useRecoilValue(userAtom)
라인 47 <SwiperSlide key={`reserve-item-${reserveItem.reserveItemId}`}>
등 입니다.
확인부탁드립니다.
전자정부프레임워크 MSA 템플릿 교육자료(03.MSA템플릿_프론트엔드구성및실습.pdf ) 를 참고하여 실습 중입니다
4.프로젝트 실행 > 사용자시스템 실행 부분에서 발생된 2가지 에러 문의입니다
1. 포트 관련 (port : 3001) 에러
포트 3000 으로 관리자 시스템 실행 후에 브라우저에서 화면 확인 하였고 배너관리메뉴에서 배너 추가 후에
사용자 시스템 실행을 위해 교육자료에 나와있는대로 (p.30) env.local 파일 수정 (포트와 사이트 아이디 추가) 후
cmder 에서 workspace.edu/egovframe-msa-edu/frontend/port 폴더로 이동하여
npm install
npm run dev
실행 명령어를 입력하였는데
<포트 에러 이미지 첨부파일 참고>
포트 3000 번이 이미 사용중이라는 에러가 납니다
정확한 해결방법과 원인을 알고싶습니다.
2. recoilroot 에러가 발생
똑같은 환경의 다른 작업pc에서 같은 증상이 발생하여
cmder에서 명령어를 실행하여 react 버전만 react": "17.0.2" ----> 18.2.0 로 업그레이드 하였습니다
react 버전 업그레이드 후 npm run dev 다시 실행하니 3001 포트로 사용자시스템이 떴는데 (관리자시스템은 3000번으로 떠있는 상황)
사용자(portal) 시스템 실행 후 브라우저로 접속하면
다음과 같은 에러가 발생합니다.
에러 메세지
error: this component must be used inside a <recoilroot> component.
error 발생 위치는
mainLG.tsx 파일
라인 23 const user = useRecoilValue(userAtom)
라인 47 <SwiperSlide key={`reserve-item-${reserveItem.reserveItemId}`}>
등 입니다.
확인부탁드립니다.
환경정보
-
- OS 정보 : windows
- 표준프레임워크 버전 : 4.1.0
- JDK(JRE) 정보 : open jdk 13
- WAS 정보 :
- DB 정보 :
- 기타 환경 정보 :
A
안녕하세요.
표준프레임워크센터입니다.
1. 센터에서 확인해보니 가이드의 내용에 오류가 있었습니다.
프론트엔드의 admin의 경우 별도의 서버환경을 통해 기동하고
portal은 기본 환경으로 구동되기 때문에
포트 변경은 admin 에서 가능하고 portal 은 변경이 되지 않습니다.
따라서
우선은 admin쪽 포트를 변경하여 진행해 주시기 바랍니다.
가이드 내용은 추후 업데이트후 재배포하겠습니다.
2. react 버전의 경우 17버전과 18버전에 많은 차이가 있습니다.
단순히 라이브러리 버전을 올려서는 구동이 불가능하고
다음 변경사항을 참조하여 일일히 대응해 주셔야 합니다.
https://react.dev/blog/2022/03/08/react-18-upgrade-guide
센터에서도 18버전에 대해 검토중입니다.
버전을 원래 버전으로 다운그레이드 후 진행하시기 바랍니다.
감사합니다.
표준프레임워크센터입니다.
1. 센터에서 확인해보니 가이드의 내용에 오류가 있었습니다.
프론트엔드의 admin의 경우 별도의 서버환경을 통해 기동하고
portal은 기본 환경으로 구동되기 때문에
포트 변경은 admin 에서 가능하고 portal 은 변경이 되지 않습니다.
따라서
우선은 admin쪽 포트를 변경하여 진행해 주시기 바랍니다.
가이드 내용은 추후 업데이트후 재배포하겠습니다.
2. react 버전의 경우 17버전과 18버전에 많은 차이가 있습니다.
단순히 라이브러리 버전을 올려서는 구동이 불가능하고
다음 변경사항을 참조하여 일일히 대응해 주셔야 합니다.
https://react.dev/blog/2022/03/08/react-18-upgrade-guide
센터에서도 18버전에 대해 검토중입니다.
버전을 원래 버전으로 다운그레이드 후 진행하시기 바랍니다.
감사합니다.
