행복한코딩생활

🎯 1. 프로젝트 목표이 프로젝트는 JavaScript & jQuery를 활용하여 다음 기능을 구현합니다.✅ 동적으로 테이블을 추가/삭제할 수 있음✅ 각 테이블마다 개별적으로 데이터를 추가할 수 있음✅ 모달을 이용해 데이터 선택 가능✅ 같은 테이블에서 중복된 데이터 추가 방지✅ 각 테이블에서 개별적인 데이터 삭제 가능📌 2. 완성된 UI 및 기능 설명💡 기본 화면+ 테이블 추가 버튼을 클릭하면 새로운 테이블이 생성됨데이터 선택 버튼을 클릭하면 모달 창이 열리고 데이터 선택 가능모달에서 선택된 데이터는 해당 테이블에 추가됨같은 테이블 내에서 중복된 데이터가 추가되지 않도록 방지삭제 버튼을 클릭하면 해당 데이터가 삭제됨📌 결과 예시------------------------------------| 테..

웹 애플리케이션에서 여러 개의 PDF 파일을 업로드하고 미리보기할 수 있도록 구현한 최종 코드를 소개합니다. 이 코드에서는 PDF가 아닌 파일을 선택하면 자동으로 제거하고, 유효한 파일만 유지하여 미리보기를 제공하며, AJAX를 통해 서버로 업로드할 수 있도록 구성되었습니다.✅ 1. HTML + jQuery (프론트엔드 코드) PDF 다중 업로드 및 미리보기 업로드 ✅ 2. 코드 상세 설명1️⃣ PDF 파일 검증 및 선택 제한사용자가 파일을 선택하면 change 이벤트가 발생.file.type !== "application/pdf"인 경우, 경고 메시지를 띄우고 추가하지 않음.dataTransfer 객체를 활용해 유효한 PDF만 유지한 채 input에 다시 설..

웹 애플리케이션에서 파일 업로드 기능은 필수적인 요소 중 하나입니다. 특히, 사용자가 업로드할 이미지를 미리 볼 수 있도록 하면 더욱 직관적인 UX를 제공할 수 있습니다. 이번 글에서는 jQuery와 AJAX를 활용하여 이미지 미리보기와 파일 업로드 기능을 구현하는 방법을 살펴보겠습니다.1. 프로젝트 개요이 코드에서는 사용자가 이미지를 선택하면 미리보기를 제공하고, 버튼을 눌러 서버로 업로드할 수 있도록 설계되었습니다.구현 기능파일 입력 필드를 통해 이미지 선택선택한 이미지를 미리보기AJAX를 활용한 서버 업로드 기능2. HTML 코드아래는 파일 입력 필드, 전송 버튼, 그리고 이미지를 표시할 영역을 포함한 HTML 코드입니다. 파일 전송 ..

웹에서 파일을 업로드할 때 파일의 확장자를 추출하고 특정 확장자만 허용하고 싶을 때가 있다.이번 글에서는 jQuery를 활용하여 파일 확장자를 가져오는 방법과엑셀 파일(.xls, .xlsx)만 허용하는 코드를 정리해보겠다.✅ 1. 파일 확장자 추출 방법파일이 선택되었을 때, 파일명을 가져와 확장자만 추출하는 방법은 여러 가지가 있다.📍 1) split('.')을 활용한 확장자 추출 (가장 간단한 방법)function getFileExtension(filename) { return filename.split('.').pop().toLowerCase(); // 마지막 요소(확장자)를 반환 (소문자로 변환)}// 사용 예시console.log(getFileExtension("example.xlsx"))..