드래그 앤 드롭 기능 구현: 자바스크립트, 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로 간결하게 구현 가능하며, FileReader와 DataTransfer 활용 필수
- 백엔드에서는 Flask와 Jinja2를 통해 파일 업로드 처리 및 DB 연동
- 확장성 고려:
UPLOAD_PROFILE_IMAGE
경로를 정적 경로로 분리하여 관리 - 이미지 유효성 검증 (
validar_extension()
)으로 보안 강화 및 불필요한 파일 차단