📚 복습 정리

🗂 업로드 / 다운로드 개념

구분	설명
업로드 (Upload)	클라이언트가 서버로 파일(데이터)을 전송하는 행위
다운로드 (Download)	서버가 클라이언트로 파일(데이터)을 전송하는 행위
스트림 (Stream)	바이트 단위의 데이터 흐름 (입출력, 네트워크, 파일 처리에서 사용)
바이트 (Byte)	8bit = 1byte, 윈도우의 기본 저장 단위
UUID	무한대에 가까운 고유한 난수값 생성, 고유 식별자 역할
UUID 사용법	UUID.randomUUID().toString() : UUID를 생성하여 문자열로 반환

---

💾 자바 입출력 (Java I/O)

구분	설명	주요 클래스
Input (입력)	외부에서 자바 메모리로 들어오는 행위	FileInputStream
Output (출력)	자바 메모리에서 외부로 나가는 행위	ServletOutputStream

---

📦 MultipartFile 인터페이스

항목	설명
용도	대용량 바이트 파일을 조작할 때 사용
매핑 방식	@ModelAttribute
복수 첨부파일 처리	List<MultipartFile> 형태로 전달
용량 제한 설정	application.properties 에서 설정

주요 메소드

메소드	설명
.getOriginalFilename()	첨부파일의 원본 파일명 반환
.transferTo(File 객체)	지정한 경로로 첨부파일 이동 (일반 예외 발생 가능)

---

🧾 File 클래스

항목	설명
설명	자바에서 외부 파일을 조작하는 클래스
사용법	File file = new File(파일경로)

주요 메소드

메소드	설명
.exists()	파일 존재 여부 반환 (boolean)
.mkdir()	지정한 경로 생성
.length()	파일 용량 반환 (byte 단위, long 타입)
.delete()	파일 삭제

---

📁 업로드 / 다운로드 경로 지정

항목	설명
프로젝트 경로	System.getProperty("user.dir")
빌드 내 업로드 폴더	/build/resources/main/static/upload/
설명	서버 실행 시, 컴파일된 코드가 저장되는 폴더

---

🚀 스프링 업로드 구현 절차

1. 업로드 경로 지정
2. MultipartFile 인터페이스를 이용한 첨부파일 매핑
3. File 클래스 활용
   • 3-1. 업로드 경로 유효성 검사 → 경로 없으면 생성
   • 3-2. 업로드 파일 객체 생성 → File uploadFile = new File(uploadFilePath);
4. 첨부파일 업로드 진행
   • multipartFile.transferTo(uploadFile);

---

📥 스프링 다운로드 구현 절차

단계	설명	예시
1	HttpServletResponse 객체로 클라이언트 응답 받기
2	다운로드 경로 지정
3	파일 유효성 검사 및 용량 확인	file.length()
4	FileInputStream으로 파일 읽기	fin.read(bytes); fin.close();
5	다운로드 형식 지정	response.setHeader("Content-Disposition", "attachment; filename=" + URLEncoder.encode(fileName, "UTF-8"));
6	ServletOutputStream으로 클라이언트에 출력	fout.write(bytes); fout.close();

---

🗑 스프링 삭제 구현 절차

단계	설명
1	삭제 경로 지정
2	File 클래스 사용
2-1	파일이 존재하지 않으면 종료
2-2	존재하면 삭제 → file.delete();

---

💻 자바스크립트 (JS)

항목	설명
정적 리소스 경로 지정	JS/CSS/IMG 등은 static 이후 경로부터 지정 → /upload/파일명.jpg
지도 API 사용	공문서를 참고하여 커스텀
map 반복문 복습 필요	map 반복문은 return 값이 존재
위치 조회 함수 경로	/kakao/position.js

---

📝 form 마크업

항목	설명
설명	form 안의 입력값을 개별로 가져오지 않고, 전체를 한 번에 가져온다.
속성명 규칙	name 속성명은 자바 Dto의 멤버변수명과 일치해야 한다.

<input name="pname"> ---> ProductDto { String pname; }

form 사용법

// 1. 전송할 form 가져오기
const productForm = document.querySelector('#productForm');

// 2. 대용량 첨부파일 form으로 전환
const formData = new FormData(productForm);

// 3. 추가 값 직접 추가
formData.append("plat", 위도);
formData.append("plng", 경도);

항목	설명
headers 생략 가능	form 형식으로 fetch 시 생략 가능
참고	/product/create.js 참고

---