WYSIWYG - react(spa),Spring boot 3(JPA) 내용 정리 - 1(이미지업로드 처리방식@Lob,MEDIUMTEXT, axios 커넥션 지속기간 설정)

1. editor 전체를 mariadb에 넣을 때

2. 이미지 업로드 처리 방식

 

---

1. editor 전체를 mariadb에 넣을 때

JPA에서 에디터 전체 값을 넣기 위해서 

다음과 같이 도메인의 칼럼값을 변경하면 된다.

 

    @Lob
    @Column(columnDefinition = "MEDIUMTEXT")
    private String content;

 

---

2. 이미지 업로드 처리 방식

필자 같은 경우는 에디터에서

이미지 올리는 버튼이 존재한다.

 

버튼 클릭 후 이미지 추가하면

바로 에디터에 삽입되는 형식이다. 

 

이미지를 추가 후 에디터에 삽입 과정은 다음과 같다.

1) 이미지 추가 버튼 클릭

2) 이미지 선택하여 추가

3) 백엔드로 단일 이미지 POST

4) 백엔드에서 Response로 저장 이미지명 받음

5) 저장 이미지명을 img태그의 src에다가 경로와 함께 삽입

 

속도면에서 느리지만

일단 구현은 이렇게 했다.

 

추후에 속도 개선을 해야한다.

 

---

99. axios에서 backend와 connection 길이 늘리기

 

axiosInstance에서 timeout 값을 늘리면

커넥션 지속기간을 설정할 수 있다

 

const instance = axios.create({
  baseURL: isDev ? 'http://localhost:8080/api' : '/api',
  timeout: 30000,
});