2021년 7월 19일 FIRST PROJECT DAY1(200ok, gallery:port)

코드스테이츠상 project의 시작은 오늘이지만 사실 코드스테이츠 시작일부터 함께 프로젝트를 하고 싶었던 분으로부터

 

제의를 받아서 프로젝트에 관한 얘기를 6월 17일부터 나누기 시작했다.

(하지만 스프린트와 알고리즘의 벽으로 많은 대화를 나누지는 못했다.)  

 

7월이 되고 HA3가 다가오기 시작하면서 4명의 멤버가 확정되고 주제에 관한 얘기도 나누기 시작했다.

 

누군가와 처음부터 무언가를 만들어간다는 과정이 쉽지 않겠지만

 

그리고 의견을 조율하는 과정이 어렵겠지만 기대가 된다.

 

전역 후 2월부터 지금까지 관심이있어서 조금씩 공부했던 animation들과 interaction부분에서 기여를 할 수 있을것인가?

 

그리고 일반적인 기능구현 부분에서도 기여를 할 수 있을것인가?

 

DEV LOG

오늘의 스케쥴

• team project intro
• 팀장선정, 팀명(200ok)/프로젝트명(gallery:port) 선정 github에 이슈 템플릿 작성, 칸반보드 생성, 태스크 카드 활용해보기
• SR재검토

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

• DEV LOG 이슈 템플릿 작성
• SR재검토 태스크 카드 작성 및 칸반보드 배치
• FE(Front End)담당으로서 landingpage의 아이디어 건의(gallery 느낌을 낼 수 있게 three.js 활용)
• 사용자가 회원가입 및 project 등록 시 image등록을 위하여 input tag를 통해 파일을 받아오는 것을 조사하였고 구현 중
• landing page에 gallery 느낌의 animation 구현 완료(주말동안 주제를 나누면 미리 완성)
• wireframe 작성(Ipad의 goodnote 활용)했으나 기각

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

• input 태그를 통하여 파일을 불러오고 그 파일정보를 state에 저장하는 것까지 성공했으나 이를 img 태그에 넣어서 render하는 것에 실패(공식문서에 등장하는 방식이 성공하지 않는것에는 useRef로 불러와서 appendchild하는 곳에서 차이가 있기 때문인가?)

import React, { useState, useRef } from 'react';
import axios from 'axios';

// https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input/file 공식문서
// https://basketdeveloper.tistory.com/70 미리보기 포함

//본문 미리보기 + portfolio upload 페이지에는 글 작성시 작게 미리보기 화면 구현

function ImageUploader() {
  const input = useRef(null);
  const divRef = useRef(null);
  // const [chosenOne, setChosenOne] = useState('');
  const [selected, setSelected] = useState(null);
  const [curFiles, setCurFiles] = useState('');

  function inputFileHandler(e) {
    const imageFiles = input.current.files;
    setCurFiles(imageFiles);
    // console.log(imageFiles);
    setSelected(e.target.files[0]);
  }

  console.log('curFiles', curFiles);
  // console.log('chosenOne', chosenOne);

  // const image = document.createElement('img');
  // image.src = URL.createObjectURL(curFiles[0]);
  // divRef.current.appendChild(image);

  function postHandler() {
    const formData = new FormData();
    formData.append('file', selected);

    return axios
      .post('api/upload', formData)
      .then(res => {
        alert('성공');
      })
      .catch(err => {
        alert('실패');
      });
  }
  // https://velog.io/@edie_ko/React-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%85%EB%A1%9C%EB%93%9C%ED%95%98%EA%B8%B0-with-Axios
  // https://kyounghwan01.github.io/blog/React/image-upload/#formdata-%E1%84%92%E1%85%A2%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%85%E1%85%B5%E1%86%BC
  return (
    <div ref={divRef}>
      <input
        ref={input}
        type="file"
        name="image_uploads"
        accept=".png, .jpg, .jpeg"
        onChange={e => inputFileHandler(e)}
        multiple
      />
      <button type="button" onClick={postHandler}>
        Upload!
      </button>
    </div>
  );
}

export default ImageUploader;

 

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

• 이미지 업로드 시 미리보기 구현(+여러개의 사진이 있을 경우 선택한 사진이 미리보기에 보이도록 구현)
• 서버 혹은 DB에 저장된 자료를 바탕으로 이를 화면에 slider로 보여지게 하는 코드 작성