reactjs 프론트와 java 백엔드 연동

이번에는 ReactJS로 구현한 프론트엔드와 Java + 스프링부트로 구현한 백엔드를 연동해보았습니다.

react를 쓰니 일반적인 자바스크립트 파일을 연결하는 것도 잘 모르겠고, ajax 호출을 jquery로만 했었는데 fetch 메서드를 쓰는 것이 공식문서의 예제로 나와있어서 그걸 이용했습니다. 

백엔드에 CORS 설정도 빼먹었었고요...

일단 화면에서 바뀐 점은 Blog > 다이어리 메뉴를 선택하면 검색을 위한 입력창과 버튼, 새글 등록을 위한 버튼을 넣었고(기능은 아직 구현못했네요), 리스트 목록 조회하는 부분만 간단하게 연결해놓았습니다. 소스코드는 많이 수정했는데 실제 화면에서 바뀐건 뭐 없네요 ㅡㅡㅋ

앞으로 할 일들을 나열해봤습니다.

• 등록기능 프론트 구현 및 백엔드와 연동
• 검색기능 백엔드 구현 및 프론트와 연동
• 목록의 헤더에 제목, 내용, 수정일 표시
• 내용은 한 줄을 넘기지 않도록 일부만 출력되도록 수정
• 등록일시 표시 -> 백엔드 수정
• 내부적으로는 수정일시도 관리
• 게시글 좌측에 게시글 번호 넣기 -> 몽고DB에 auto increment 기능이 없어 소스레벨에서 구현해야함

역시 프론트와 백엔드를 혼자 하려니 할 일이 너무 많네요 ㅜㅜ

그래도 재미있게 만들어 가고 있습니다.

요새 티스토리가 자체광고를 붙여서 광고가 자꾸 뜨는것 같네요...로그인할 때도 뜨고...

빨리 블로그 앱 만들어서 라이브해서 직접 사용해보고 싶네요

참고문서:

스프링부트 CORS 설정하기 >> spring.io/guides/gs/rest-service-cors/#global-cors-configuration

리액트 ajax 호출하기 >> reactjs.org/docs/faq-ajax.html

리액트 부모상태 업데이트하기 >> stackoverflow.com/questions/35537229/how-to-update-parents-state-in-react