https://github.com/eGovFramework/egovframe-template-simple-react
GitHub - eGovFramework/egovframe-template-simple-react
Contribute to eGovFramework/egovframe-template-simple-react development by creating an account on GitHub.
github.com
▲ 위의 링크를 들어가시면 아래의 내용이 자세히 나와있습니다.
표준프레임워크 심플홈페이지 FrontEnd
※ 본 프로젝트는 기존 JSP 뷰 방식에서 벗어나 BackEnd와 FrontEnd를 분리하기 위한 예시 파일로 참고만 하시길 바랍니다.
환경 설정
프로젝트에서 사용된 환경 프로그램 정보는 다음과 같다.
프로그램 명버전 명
Node.js | v14.16 |
NPM | v7.20.0 |
BackEnd 구동
심플 홈페이지 Backend 소스를 받아 구동한다.
FrontEnd 구동
아래 1 ~ 3의 과정을 따라서 진행한다.
1. 프로젝트 복제 및 모듈 설치
# 프로젝트 저장소를 로컬로 복제
git clone https://github.com/hmmhmmhm/egovframe-template-simple-react.git
# 복제된 프로젝트 폴더로 이동
cd egovframe-template-simple-react
# node modules를 설치해 준다.
npm install
2. 백엔드 프로젝트 설정
구동된 BackEnd 서버의 URL을 본 어플리케이션의 .env.development 파일의 REACT_APP_EGOV_CONTEXT_URL에 설정해 준다.
(단, 개발환경에서는 사용하는 환경변수 정보는 .env.development, build 시 사용하는 환경변수는 .env.production 에 기입해 준다.)\
# .env.development 예시
REACT_APP_EGOV_CONTEXT_URL=localhost:8080
3. 프로젝트 실행 및 기타 명령어
# 테스트용 리액트 서버를 실행할 때 아래 명령어를 사용한다.
npm start
프론트엔드 프레임워크가 리액트가 됐네요.. 리액트 공부 열심히 해야겠습니다... 화이팅~~
'React' 카테고리의 다른 글
React typescript React.ChangeEvent<HTMLInputElement> (0) | 2021.12.29 |
---|---|
React map() 함수 정리 (0) | 2021.12.22 |
axios 개념과 http method 종류 (0) | 2021.11.16 |
[React] 상태 관리 라이브러리 Redux와 Mobx (0) | 2021.11.12 |
Props와 State 개념 정리 (0) | 2021.11.11 |