[React-router-dom 설치]
npm install react-router-dom@6
페이지를 분할하는 역할
6번설치함 7번은 아직 정식버전아님
SPA 필수 라이브러리
http://localhost:3000/index.html => X
예시) http://localhost:3000/login
http://localhost:3000/membership
do처럼 가상의 url 사용함
설치했을때 보안이슈가 뜨는데 앱 잘켜지고 문제없으면 상관없음 (지피티피셜)
아 개박살났다 ㅎ
해결방법
package.json의 scripts 부분 수정:
[빌드]
npm run build
옛날거임
npm install -g serve
이거 깔기
서버에 작동시킬때
1. 이렇게해서 백엔드에게 주는 방법 => 기본포트 3000 또는 5000
serve -s build
2. 백엔드에게 물어봄 포트
serve -l 8000 -s build
package.json에서 포트 머 이것저것 설정 가능
빌드는
npm run build
[React 배포]
1. 테스트 임시 서버로 배포 파일을 실행하고 싶을 경우
npm install -g serve
2. 프로젝트 배포
npm run build
3.
serve -s build
기본포트 3000 또는 5000 => package.json에서 설정 가능
serve -l 8080 -s build
8080포트로 돌아감 => 포트충돌 주의
4. 소스 변경시 다시 빌드해서 사용
프론트가 뭐쓰냐에 따라 백에서 처리방식 다름
Front-end => CLI => Back-end => API
Front-end => CDN => Back-end => JSP, JSTL, Thymeleaf
templates > static 에 들어감
어이 프론트 대기.
세팅 다라라라라락
깃허브에 올리고
어이 프론트 다운받아.
static에 넣으시오.
해서 빌드해서 끝
webapp 어쩌고 저쩌고
이거 안정해주면 프론트가 지맴대로 해버림
=====
static경로에 세팅
터미널 >
cd 프로젝트경로/src/main/resources/static
npx create-react-app erp
erp라는 디렉토리가 만들어지면서 설치됨
프로젝트 새로고침하면 static에 erp폴더가 생성된게 보임
다 지워 다다다다다
내일함
[프로젝트에 리액트]
[리액트 깔기]
프로젝트의 webapp경로에서
npx create-react-app erp
잘됨
erp 디렉토리 생김
[리액트 라우터 깔기]
라우터도 써야돼서 깔아야됨
npm install react-router-dom@6
[리액트 에러 없애기]
폴더에 빨간거 왜있냐면 json 파일 어디선가때문에 뜸
에러는 아닌데 이클립스가 잘못인식함
없애는 법
프로젝트 우클릭 > 프로퍼티스 > validation
Enable 체크 > JSON 저거 두개다 체크 해제
다음 설정할거
프로퍼티스 > JSON 검색해서 들어가서 파란 Configure 어쩌고 클릭하면
뜨는 이거 위에거 체크 다 하고 아래 에러를 이그노어로 둘다 변경
그럼 빨간거 사라짐
[⭐️포트맞추기]
지금 프로젝트는 9000포트로 설정
리액트는 3000또는 5000으로 설정
맞춰줘야함 => 프록시 사용
안맞추면 CORS 발생!!
erp> src > package.json 수정
맨 처음 중괄호 안에
"proxy":"http://localhost:9000",
추가 (콤마 주의 빼먹지말기)
그리고 프록시 라이브러리를 깔아줘야함
위에서 쓰던 webapp > erp (리액트 디렉토리?) 경로로 이동
npm install http-proxy-middleware --save
--save 안써도 되긴 함
개발용깔때는
npm install http-proxy-middleware --save-dev
이렇게 패키지 설치함
erp(리액트디렉토리) > nodemodule > http-proxy* 파일들이 보이면 문제없이 개발 가능
json 파일
"http-proxy-middleware": "^3.0.5",
이 줄 있으면 됨
[리액트 훅 설치]
훅쓰려면 훅도 설치해야함
npm install react-hook-form
[확인]
npm start
리액트 실행
9000포트엔 백엔드 페이지가 3000포트엔 리액트 페이지가 뜸
개발시에는 어쩔 수 없이 따로 돌려야 함
[협업시]
리액트 깃으로 협업할때
노드모듈즈 디렉토리 이그노어해서 하면됨
패키지깔때말고 필요없는데 용량만 큼
kr.it.ecms.erp 디렉토리 생성
erp_controller.java
package kr.it.ecms.erp;
import org.slf4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class erp_controller {
Logger log = org.slf4j.LoggerFactory.getLogger(this.getClass());
@GetMapping("/erp/dataload.do")
public String dataload() {
this.log.info("React 통신 확인");
return null;
}
}http://localhost:3000/erp/dataload.do
로그떠야됨 왜안떠? 몰루
[리액트 디렉토리 ]
index.js => 라우팅해줌 <App>넣음
App.js => 컨트롤러 역할 <생성한파일> 넣음
생성한파일.js => export 함수{return(html코드);}
index.html => 바디 아래에 css링크, js스크립트 태그 넣음
파일생성해서 html 넣을때
커맨드f 왼쪽 버튼, 우하단 버튼클릭
바꿔줘야됨
인풋태그 맨뒤에 / 붙여줘야함 xhtml어쩌고
스타일도 그냥 때리면 안됨 {}이거를 추가어쩌고저쩌고
form으로 데이터보내는거도 다르게 보냄
<form onSubmit={함수명} > 이런식
백과 통신시 포트 달라서 원래 에러나는데
위에서 포트 맞춰줘서 연결됨
백에서 로그찍어보면 뜸
컨트롤러에서 CORS 방지
@CrossOrigin(origins = "*", allowedHeaders = "*")
언어세팅 다 해놔서 안깨짐
jsp는 깨짐 ?
리액트 쓰면 그냥 리액트포트 쓰면 됨