[개발공부일지] 23.08.22 - ckEditor5의 본문에 파일 업로드 방법 조사

💕 오늘 한 거

1) 프로젝트 기능 추가

- [글쓰기] 파일업로드 추가 ( 8/14 ~

> DONE ! 

- 글쓰기 > 파일 선택한 후에 버튼 누르지 않아도 바로 파일 업로드

    : 찾아본거

     ㄴinput type=file 의  속성조사 https://hianna.tistory.com/346  

     ㄴonchange 이벤트 조사 ( onchange 이벤트는 input 태그의 포커스를 벗어났을때 (즉, 입력이 끝났을때) 발생하는 이벤트이다. )    

  - 글쓰기시 사용할 파일업로드 API 개발 (8/17)

2) 업로드된 파일 리스트는 글쓰기 화면에 표시한다. (8/17)

3) 글쓰기 화면에서 파일 취소 / 글작성 취소 시 업로드된 파일 삭제한다.

4) 글 저장 시 2의 파일 정보를 담아 글 저장 시도한다. (8/21)

 

 

 ㄴ 파일 취소 api 개발 완료

  -> minio에 저장된 파일 삭제 API개발 완료 ( https://min.io/docs/minio/linux/developers/java/API.html#removeobjects-removeobjectsargs-args ) 

 

 

-) 글저장 시 파일2개 이상이면 저장 안되는 현상 파악 및 수정

https://helena90-study.tistory.com/87

 

5) 업로드 된 파일 클릭하여 본문에 이미지 추가 ( FE )

ckEditor5의 파일 업로드 기능 확인 및 분석 

ㄴ https://ckeditor.com/docs/ckeditor5/latest/framework/deep-dive/upload-adapter.html#the-complete-implementation

ㄴ https://jjong-factory.tistory.com/54 

ㄴ 위 항목을 참고하여 에디터에서 에디터 내에 이미지 추가하는 함수는 추가 함

 

 

2) 글쓴거

- list를 하나의 문자열로 바꾸기 

https://helena90-study.tistory.com/86

 

3) 배운거

- 

 

 

4) 알게됨

- minio IO의 배경과 사용목적 / 과거의 

- builder pattern

- 초기프로젝트 셋팅방법

- 개발자도구로 프론트 디버깅

 

 

 

 

 

🧞‍♂️내일 해야하는 거

5) 업로드 된 파일 클릭하여 본문에 이미지 추가 ( FE )

ㄴ https://stackoverflow.com/questions/51642683/ckeditor-5-insert-image-by-external-url 

6) 글 상세보기에 저장된 이미지 파일 표시한다.

7) 임시저장글 추가

 

 

 

 

 

  ㄴ 파일리스트 구조를 ul, li로 변경 후 li에 id, data-value="" 추가

  ㄴ data-value  의 값으로 특정항목 조회 , 특정 ul 안의 리스트를 반복문으로 조회하는 코드 추가

https://leeborn.tistory.com/entry/html-data-value-%EC%86%8D%EC%84%B1-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 

  ㄴserializeObject 된 변수에 array fileList 추가하여 api까지 잘 요청되는지 테스트

ㄴ 글 저장 시 RDB 파일 테이블에서 글 정보 업데이트 ( 테스트 전임 )

=> 글로 정리하고 넘어가기!!!!