[Dev Log] 배상건 / 2022-06-01

> ### 오늘은 어떻게 프로젝트에 기여했나요?
> 게시글을 작성 할때, 사용자가 업로드한 사진 데이터를 상태끌어오기로 불러와 state 관리가 가능하도록 기능을 구현했습니다.
```tsx
? 사용자가 업도르한 file에 대한 정보를 얻는 방법
1. 사용자로부터 file(여기서는 사진 file을 가르킨다)을 입력받으려면,
DOM input element의 type 프로퍼티에 file로 명시해주면 된다.
* =>
CreatePostContainer 내에서 file업로드를 위한 input element의 type(file) 명시는
프레젠테이션 컴포넌트인 컴포넌트에서 지정된다.
2. 사용자가 업로드한 file에 접근하려면,
input element에 접근해서, file 프로퍼티를 참조하면 된다.
이때 두가지 방법이 있는데,
1) 직업 DOM에 접근하는 것
* const file = document.getElementById('fileItem').files[0];
2) e.target 가 적용된 onChange 이벤트 핸들러를 등록하여
사용자가 업로드한 file 값을 가져올 수 있다.
3. 컴포넌트는 두번째 방법인 onChange를 사용할 것이다.
* 사용자가 업로드한 file 확인 방법
사용자가 업로드한 file input 엘리먼트에 접근해서 file 프로퍼티를 개발자도구로 확인해보자
FileList 라는 객체가 출력된 것을 볼 수 있다.
FileList 객체 프로퍼티는 FileList {0: File, 1: File, length: 2} 형태로 구성되어 있다.
FileList 객체 프로퍼티는 idx: File, length 이다.
FileList 객체 프로퍼티 내 개별 File Ket value에 접근하는 방법은 file[i]로 접근 가능하다.
? file 객체의 속성
1. file.preview :
2. file.lastModified : 마지막 수정 날짜 number타입으로 반환 (없을 경우, 현재 시간)
3. file.lastModifiedDate : 마지막 수정 날짜 Date객체타입으로 반환 (Deprecated)
! Date 객체타입을 이용하고 싶으면, new Date(lastModified) 방식으로 사용하기!!
4. file.name : 단순 파일의 이름 string타입으로 반환 (경로는 포함하지 않는다.)
5. file.size : 64비트 정수의 바이트 단위 파일의 크기 number타입으로 반환
6. file.type : 문자열인 파일의 MIME 타입 string타입으로 반환
MIME 타입의 형태는 type/subtype
ex) image/png, text/html, audio/mpeg
7. file.webkitRelativePath : 이 속성은 비표준이며, 프로덕션 사이트에서는 사용하지 않는다.
8. file.length : 사용자가 업로드한 file의 총 개수
? 사용자가 업로드한 File 객체(이해를 돕기 위해 FileList 객체로 이해해도 무관하다.)의 실제 데이터에 접근하는 방법
1. File 객체(FileList 객체)에 URL을 생성해서 접근을 희망하는 filed의 실제 데이터를 취득할 수 있다.
* ex) file[i].preview = URL.createObjectURL(file[i]);
* createObjectURL : 인자로 File객체를 받으며, 해당 file의 고유 URL 정보 생성하고 반환한다.
* revokeObjectURL() : file이 로드가 완료되었을 시, 더이상 URL정보는 사용되지 않기 때문에 메모리 누수를 막기 위해 해체해주어야 한다.
? 그렇다면, 왜 해당 페이지에 createObjectURL 접근 방식을 사용했는가?
! 프로젝트 이후 스터디 필요!
참고 : https://taeny.dev/javascript/file-object/
```
> ### 오늘의 프로젝트에서 힘든 점은 무엇인가요?
> * File 객체에 대한 이해야 부족했습니다. 특히 input 엘리먼트에 접근해서 file 프로퍼티를 출력했을 때,
> FileList 객체가 출력되는데, 이를 해석하고 적용시키는데 어려움을 겪었습니다.
> * 사용자가 업로드한 사진 데이터를 state로 관리하는 files state와 input 엘리먼트에 접근해서 file 프로퍼티를 구분하는 어려움을 겪었습니다.
> input 엘리먼트의 file 프로퍼티에 대한 이해가 부족하다보니, 아직 state로 등록하지 않은 File 객체를 state로 관리하고 있다는 착각을 했고, 이를 이해하기 위해 수도코드를 작성함으로 흐름을 이해할 수 있었습니다.
>
> ```tsx
> const [files, setFiles] = useState([]);
> // photoPath는 컴포넌트에 prop으로 내려 보려,
> // 사용자가 업로드한 file에 대한 정보(FileList 객체)를 상태 끌어오기로 적용시킨다.
> //
> const photoPath = (file: any) => {
> // 불변성을 지키기 위해 기존에 저장된 files의 복사본(newFiles)에서 작업을 진행한다.
> let newFiles = [...files];
> // 사용자가 업로드할 수 있는 사진은 최대 5개까지 가능
> // 첫번째 조건 : 업로드된 사진 files state가 최대치 라면, alert으로 "더이상 등록 할 수 없습니다."를 등록한다.
> // 두번째 조건 : 1) 업로드된 사진 files state 길이와
> // 아직 state에 저장 되지 않은,
> // 2)사용자가 업로드한 file 객체(FileList 객체)의 길이 합이 5보다 클 경우,
> // alert으로 "5장까지만 등록 해 주세요."를 등록한다.
> // ex) files.length + file.length > 5
> // alert 어디까지 개발 단계에만 적용된다.
> // 배포시 modar 을 적용한다.
> // 세번째 조건 : 이제 남은 것은 files state의 길이가 5 미만인 경우다. 이때 중요한것은 불변성을 유지해야한다.
> // 따라서 조건의 대상을 newFiles로 두고 작업을 진행한다.
> // 세번째 조건에서 진행될 사항은
> // 1. 사용자가 업로드한 모든 데이터에 URL을 생성 및 부여한 뒤,
> // 2. files의 복사본인 newFiles 배열에 업로드한 데이터를 순서대로 추가해준다.
> // 3. 행여라도, 사용자가 업로드한 데이터가 5개를 초과할 수도 있다.
> // 이를 사전에 방지하기 위해, 데이터가 순서대로 추가된 newFiles의 요소를 5개가 되도록 재정의해줘야 한다.
> // 4. 데이터 요소 5개를 갖도록 재정의된 newFiles을 상태변경 메소드(setFiles)의 인자로 전달하여,
> // files state를 재정의된 newFiles로 상태변경시킨다.
> if (files.length === 5) {
> alert("더이상 등록 할 수 없습니다.");
> } else if (files.length + file.length > 5) {
> alert("5장까지만 등록 해 주세요.");
> } else if (newFiles.length < 5) {
> for (let i = 0; i < file.length; i++) {
> file[i].preview = URL.createObjectURL(file[i]);
> newFiles.push(file[i]);
> }
> // newFiles 재정의(선언)
> newFiles = newFiles.slice(0, 5);
> setFiles(newFiles);
> }
> };
> ```
>
> ### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
> * [ ] CreatePostPage 컴포넌트에 필요한 deletePhotoHandle 구현(사진 삭제)
> * [ ] CreatePostPage 컴포넌트에 필요한 searchAddressHandle 구현(주소 검색)
> * [ ] CreatePostPage 컴포넌트에 필요한 searchCoordinateHandle 구현(좌표 검색)
> * [ ] CreatePostPage 컴포넌트에 필요한 registerPost 구현(서버로 등록 요청하기 )
> * [ ] CreatePostPage 컴포넌트에 필요한 프레젠테이션 컴포넌트를 분리