

💡프론트엔드
✅ package.json
"proxy": "http://{백엔드 컴퓨터의 IP 주소}:8080",
✔ 배포 시 AWS에 올린 탄력적 IP 주소로 변경
✔ 백엔드 컴퓨터는 외부 컴퓨터가 접근할 수 있도록 접근 허용 설정해야 함 (방화벽)
✅ 파일명.js
const [response, setResponse] = useState('')
useEffect(() => {
axios.{get 또는 post}('{백엔드 API 주소}')
.then(response => setResponse(response.data))
.catch(error => console.log(error))
}, []);
✔ 데이터를 읽어올 때는 Get 메소드
✔ 데이터를 보낼 때는 Post 메소드
✔ 백엔드에서 반환하는 데이터를 response 변수에 저장
✅ 코드 사용 예
✅ Springboot - DiaryController
/**일기 저장*/
@PostMapping("/save/diary")
public void saveDiary(@RequestBody DiaryDto diaryDto) {
diaryService.saveDiary(diaryDto);
}
/** 일기 수정 */
@PostMapping("/modify/diary")
public void modifyDiary(@RequestBody DiaryDto diaryDto) {
diaryService.modifyDiary(diaryDto);
}
/**일기 삭제*/
@PostMapping("/delete/diary/{diaryId}")
public void deleteDiary(@PathVariable("diaryId") Long diaryId) {
diaryService.deleteDiary(diaryId);
}
✅ Springboot - DiaryDto
public class DiaryDto {
private Long diaryId; // 백엔드에서 자동 생성해주므로 보내지 않아도 됨
private String subject; // 제목을 없앨까 ?
private String content; // 일기 내용
private String userId; // 사용자 아이디
private EmotionEnum emotion; // 현재는 4가지 감정 존재 - 기쁨 슬픔 화남 우울
private String img; // MultipartFile 타입으로 수정 필요
}
✅ React - 일기 생성
const [response, setResponse] = useState('')
useEffect(() => {
axios.post('/save/diary',{
userId:"user1@naver.com",
content:"멋진 하루를 보냈다.",
emotion: "기쁨",
img: ""
})
.then(response => setResponse(response.data))
.catch(error => console.log(error))
}, []);
✔ 데이터를 저장할 땐 Post 메소드
✔ 주소는 ‘/save/diary’ 로 지정
✔ 백엔드로 보낼 데이터를 Json 형태로 담음
✔ 이때 Json 변수명은 백엔드에서 설정한 Dto 내부 변수명과 같아야 함
✅ React - 일기 수정
const [response, setResponse] = useState('')
useEffect(() => {
axios.post('/modify/diary',{
diaryId: "1",
userId:"user1@naver.com",
content:"멋진 하루를 보냈다. 근데 밤에 비가 와서 슬퍼졌다.",
emotion: "우울",
img: ""
})
.then(response => setResponse(response.data))
.catch(error => console.log(error))
}, []);
✔ 특이점 - 일기 생성과 다르게 일기의 고유 ID (기본키) 도 함께 전달해야 함
✔ 일기의 고유 ID가 있어야 수정할 특정 일기를 지정할 수 있음
✔ 위의 예시의 경우, 기본키가 1일 일기의 내용을 Json 객체의 내용으로 수정함
✅ React - 일기 삭제
const [response, setResponse] = useState('')
useEffect(() => {
axios.post('/delete/diary/{삭제할 일기의 고유 ID}')
.then(response => setResponse(response.data))
.catch(error => console.log(error))
}, []);
✔ 백엔드에서 프론트엔드로 일기 정보를 전달할 때는 일기의 고유 ID (기본키) 도 함께 전달
✔ 프론트엔드에서는 이를 가지고 있다가 일기 삭제 시 주소와 함께 전달
'React와 Spring으로 게시판 만들기' 카테고리의 다른 글
[React] 글쓰기 페이지 만들기 - input 태그 (0) | 2023.03.04 |
---|---|
[Springboot] 페이징 처리에 정렬 조건 추가하기 - Sort (0) | 2023.03.04 |
[Springboot] 페이징 처리하기 - Pageable과 PageRequest (0) | 2023.03.04 |
[Springboot] Spring Data JPA 소개 - ORM과 JPA (0) | 2023.03.04 |
[React] Route로 페이지 이동하기 (5) - 글쓰기 버튼 클릭 시 페이지 이동 (0) | 2023.03.04 |