본문 바로가기

프로젝트

팀 프로젝트 2일차

S3 파일 CRUD

 

우선 내가 맡은 부분은 파일 관련 CRUD 이다.

 

개인적으로 예전에 혼자 프로젝트 할 때 드래그 앤 드롭으로 구현하려다 실패한 경험이 있어 이번에 다시 도전하려고 한다.

 

 

틀은 이런 형식으로 잡고 hover 되거나 드래그 이벤트 발생시 백그라운드 색상이 바뀌게 디자인 했다.

 

 

그 후에 첨부되면 파일 미리보기 시스템을 추가해 어떤 파일을 추가 했는지 확인할 수 있게 구현과 동시에 원하지 않은 첨부파일을 제거하는 기능도 추가 했다 .

 

근데 문제가 파일영역이 label 처리되어있어 x를 눌러 제거하면 파일첨부화면이 열리는 현상이 생긴다.

 

 

우선 이 부분은 파일 미리보기 화면을 따로 빼던지 아니면 x 눌러도 안열리게 해결할지 고민중이며 일단 그대로 두고 나머지 파일 기능을 구현하려고 한다.

 

일단 S3에 파일 업로드 까지 되는걸 확인했다.

 

R 부분까지는 구현했고 누르면 다운로드 되게 해놨다.

 

U, D 부분은 U 부분에서 파일 미리보기 기능이 동작 안하는 문제가 있어 내일 D와 같이 구현하고 남은 시간에 CK 에디터를 도입 진행 했다. 


CK 에디터 도입

게시판 작성시 퀄리티를 상승시키고자 도입을 진행했다.

 

도입자체는 큰 문제가 없었으나 이미지 업로드에서 문제가 발생했다.

 

CK에디터에서 이미지가 바로 보이는 로직이 이미지를 업로드 하자마자 파일서버에 저장되어 파일서버에 저장된 이미지를 보여주는 형식으로 되어 있다.

 

현재 파일 저장 로직을 보면 게시판 번호가 명시 되는데 우리가 글 작성하기도전에 파일서버에 저장되는 형식이여서 해당 게시물에 대한 기준 값을 잡기가 매우 애매했다.

 

팀원분과 논의 끝에 랜덤 UUID를 발급해 같이 저장시키고 해당 UUID를 CK에디터 이미지 url 주소로 가져와 사용하면

 

같은 UUID로 작성돼 서로를 인식할 수 있게 구현해 테스트 해보니 성공적으로 이미지 업로드와 미리보기가 됐다.

 

그리고 R 부분에서 툴바가 계속 보여 이 부분은 config 설정 코드를 작성 후 CK에디터 컴포넌트에 넣어줬더니 해결 됐다.