이미지 업로드할때 이해가 안되서요..

HTML 에디터에 해당 이미지를 넣는것<- 이강의에서 잘이해가 안되는 부분이 잇는데요.

제가 이해한 코드방향은

write.html에서 formdata를 비동기로 보내는데 여기서

url_for('upload_image') <- 여기서 해당파일을 검사해서 저장하는걸로 알고있습니다.

그리고서 'board_image') <- 이쪽으로 이동해서 해당 저장된 파일의 data를 읽어오는데요,

여기서 return한 send_form_directory의 정보가 write.html에서 어디서 받는건가요??

ajax에서 success_function의 parameter로 들어오는건가요??

그리고 success_function에 image[0] <- 이 부분도 이해가 잘안됩니다.

지역변수로써, image의 태그 한줄만 선언되었는데 인덱스 0을 꼭 입력해줘야 동작되더라고요..

질문이 많아서 죄송합니다... 감사합니다.

게시판에서 이미지를 첨부하는 기능을 다시 간략하게 보자면..

1. 이미지가 추가되었을경우 uploadImage(image) 함수가 호출되고 이 함수는 url_for('upload_image') 로 데이터를 전송합니다.

2. upload_image 로 전송된 이미지는 몇몇 처리를 거치고 말씀하신것처럼 return url_for('board_images') 를 리턴합니다. url_for('board_images') 에 의해 "/images/<filename>" 이라는 문자열 주소가 리턴되는 겁니다.(여기서 board_images 함수랑 관련이 없습니다.)

3. 위에서 데이터 리턴이 정상적으로 성공되면 맨처음 호출된 uploadImage(image) 자바스크립함수의 success: function(url) 로 리턴이 되게 됩니다. 여기서 url 지역변수는 2번에서의 "/images/<filename>" 의 단순 문자열 주소입니다. 여기서 자바스크립트 success 함수에 의해 <img src="/images/<filename>"> 같은 이미지 태그가 완성되고 이 태그가 summernote 에 삽입되는게 전부입니다. 여기서 image[0] 배열을 사용하는 이유가 궁금하시면 var image = ..... 밑 줄에 console.log(image) 를 추가하신 후 브라우저를 개발자 모드(F12키)에서 해당 기능을 다시 구현해보시면 image에 어떤 정보가 어떻게 들어가는지 확인 하실 수 있으며 이런 습관을 들이시는게 좋습니다.

이렇게 작성된 <img src="/images/<filename>"> 을 접근하면 질문에 주신 board_images(filename) 함수가 이때 동작합니다. 이미지를 추가하는 과정에서는 board_images(filename) 함수는 관련이 없고 이미지를 실제 클라이언트(브라우저)에서 요청할때 (IMG 태그에 의해) 이때 실제 이미지를 send_from_directory() 함수에 의해 바이너리 데이터를 전송해주게 되는겁니다.

이렇게 사용되는 이유는 몇몇가지가 있으나 쉽게 업로드된 이미지를 개발자가 원하는 디렉토리에 보관 및 관리할 수 있으며 보안적인 면에 의해 파일저장 경로가 직접적으로 노출되지 않게 하는 작은 목적도 있습니다.

말이 더 어려워 이해가 가실지 모르겠습니다만 도움이 되셨으면 좋겠습니다. 더 궁금하신 사항이 계시면 언제든 질문주시기 바랍니다. 질문이 많은건 절대 죄송하실 일이 아닙니다. 좋은 현상입니다~ ^^

인프런 커뮤니티 질문&답변