2021년 7월 21일 FIRST PROJECT DAY3(project upload page 이미지, desc formData 전달 형태 구성 및 modal로 project 미리보기 기능 구현 착수)

DEV LOG

오늘의 스케쥴

• KPT reflection sharing
• project upload page 이미지, desc formData 전달 형태 구성(solo)
• API docs 개선/보완(with BE)
• modal로 project 미리보기 page 구현 착수

오늘은 어떻게 프로젝트에 기여했나요?

• 파일 upload page 이미지 upload관련 기능 완료
• 이미지, 이미지 각각의 desc formdata 전달 형태 구성 및 사용자가 입력한 desc 정보 가져오기

//기존 계획 api문서 작성 시 
// project_content:
// [ {text: ~~~~ , image: buffer }, {text: ~~~~ , image: buffer }, {text: ~~~~ , image: buffer }]

//검증1
//FormData는 하나의 객체이다. append해서 넣을경우 아래와 같은 형태로 키와 값의 쌍으로 들어간다.
// {
// 'image': file`,
// }

//애초에 배열로 가는 것은 무리이고 따라서 인덱스마다 객체가 있는 형식으로 가야되지 않을까?
// {
  // 0: {
  // 'image': file,
  // 'text': 'text'
  // }
  // 1: {
  // 'image': file,
  // 'text': 'text'
  // }
  // 2: {
  // 'image': file,
  // 'text': 'text'
  // }
  // 3: {
  // 'image': file,
  // 'text': 'text'
  // }
// }

//////////////////////////////////////////////////////////////////////////////////

//추가하는 사진의 수에 따라서 description input 태그도 늘어난다.

//늘어나는 많큼 state를 늘리는 건 실제로 비효율 적이다.

//그리고 실제로 자동으로 state가 설정되게할 방법이 있는지 의심된다.

//사진의 수 만큼 map하여 input 태그를 생성하고 value를 하나의 state로 하면

//하나의 input창에 입력된 것이 모든 input창에 똑같이 적용된다. 그러므로 해당 방법은 적용 할 수 없다.

//document.querySelectorAll로 같은 element나 같은 classname의

//element를 모두 하나의 배열로 불러올 수 있음을 생각해냈다.

//반복문으로 이 배열을 순회하며 .value를 하니 해당 input창에 적혀있는 value를 뽑을 수 있었다.

//이 value들을 빈배열에 넣고 이를 formdata에 imgfile과 함께 append 하였다.

//(추후에 codereview 시간을 가지며 굳이 반복문으로 빈배열에 넣지말고

//image를 formdata에 넣을때 바로 넣는편이 좋겠다라고 하여 개선하였음)

//console.log로 확인 가능하였음

•  span태그를 활용하여 못생긴 input tag를 대체하였음(MDN 명시 사항)

        const input = useRef(null);
  
        function InputBtnClick1(e) {
          e.preventDefault();
          input.current.click();
        }
  
        <div>
          <input //input tag를 display none이나 opacity 0으로하고 useRef로 불러와서 click하면 다른 예쁜 div태그에서 파일고르는 view를 띄울 수 있다.(mdn도 그것을 추천함)
            ref={input}
            type="file"
            name="images_upload"
            accept=".png, .jpg, .jpeg .gif"
            onChange={e => inputFileHandler(e)}
            multiple
            style={{ display: 'none' }}
          />
          <span
            style={{
              width: '50px',
              height: '50px',
              fontSize: '20px',
            }}
            onClick={e => InputBtnClick1(e)}
          >
            ➕➕
          </span>
        </div>

오늘의 프로젝트에서 힘든 점은 무엇인가요?

• modal로 project 미리보기 기능 구현 중 시간절약을 위해 bootstrap을 사용하자는 의견이 나와서 적용중이나 bootstrap에 map으로 한번에 적용할 방법을 고민 중(적용되지 않는다면 차선책으로 직접구현을 고려해야할 듯 )

내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

• bootstrap적용해보고 나오는 결과를 보고 팀원에 공유하여 차선책으로 갈지 계속 진행할 지 결정
• 회원가입 page 구현 착수