드래그 앤 드롭 기능 구현 방법 (JavaScript, CSS, Flask 활용)
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

드래그 앤 드롭 기능 구현: 자바스크립트, CSS, 플라스크 활용

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

  • 프론트엔드 개발자 (드래그 앤 드롭 기능 구현)
  • 백엔드 개발자 (플라스크 기반 이미지 업로드 처리)
  • 중간 수준 개발자 (자바스크립트, CSS, Python 기초 지식 필요)

핵심 요약

  • Vanilla JavaScript드래그 앤 드롭 기능 구현 가능 (jQuery 불필요)
  • FileReader API를 활용해 이미지 미리보기 생성 (reader.readAsDataURL())
  • Flask 백엔드에서 이미지 유효성 검증 및 DB 업데이트 (UPLOAD_PROFILE_IMAGE 경로 사용)

섹션별 세부 요약

1. 드래그 영역 HTML/CSS 구현

  • .drop-zone 클래스로 드래그 영역 생성, input[type="file"] 요소 숨김 처리
  • CSS로 경계선, 호버 효과, 중심 정렬 적용
  • transition 속성으로 애니메이션 효과 구현

2. 자바스크립트 이벤트 처리

  • dragover/dragleave 이벤트로 드래그 상태 관리 (draggable 클래스 추가/제거)
  • drop 이벤트로 파일 수신 후 tomaArchivos() 함수 호출
  • FileReader로 이미지 데이터 URL 생성 후 .drop-zone 배경 설정

3. 백엔드 플라스크 처리 로직

  • /subirimagen 라우트에서 request.files['file']으로 파일 수신
  • validar_extension() 함수로 이미지 확장자 검증 (PNG, JPG 등)
  • update_url_img_profile() 메서드로 DB에 이미지 경로 저장

4. 파일 업로드 및 DB 연동

  • FormData 객체로 파일 및 사용자 ID 전송 (fetch API 사용)
  • psycopg2를 통해 PostgreSQL에 imagenperfil 필드 업데이트
  • 성공 시 json.dumps({'resp' : 1, 'msg' : 'Imagen subida correctamente'}) 반환

결론

  • Vanilla JS로 간결하게 구현 가능하며, FileReaderDataTransfer 활용 필수
  • 백엔드에서는 FlaskJinja2를 통해 파일 업로드 처리 및 DB 연동
  • 확장성 고려: UPLOAD_PROFILE_IMAGE 경로를 정적 경로로 분리하여 관리
  • 이미지 유효성 검증 (validar_extension())으로 보안 강화 및 불필요한 파일 차단