2차프로젝트

Happin👏🏻

깃허브 레파지토리 바로가기 !!

프로젝트 선정이유

이미지를 업로드하고 마음에 드는 것을 저장하고 삭제하는 등의 CRUD를 이용한 기능구현 뿐만 아니라 외부 라이브러리를 적극 활용해보기 좋은 사이트였기에 핀터레스트를 선택했습니다.

개발 인원 및 기간

• 개발기간 : 2022.10. 04 - 2022.10.13(2주)

개발 인원 : 프론트엔드 3명 / 백엔드 2명

적용 기술 : JavaScript(React.js), Styled-Component, Git

내가 구현한 기능

1. 마이 페이지에서 좋아요 또는 생성한 핀들을 폴더 별로 관리할 수 있도록 보드 생성

2. 게시물(핀) 생성 페이지
   

//상위 컴포넌트
 const handleSubmit = async e => {
    e.preventDefault();
    const formData = new FormData();
    formData.append("userId", submitPin.userId);
    formData.append("title", submitPin.title);
    formData.append("content", submitPin.description);
    formData.append("pinImage", submitPin.uploadingImg);
    formData.append("boardId", submitPin.boardId);
    formData.append("interests", selectInt);

    // for (let pair of formData.entries()) {
    //   console.log(pair[0] + ", " + pair[1]);
    // } formData 확인용 콘솔

    let response = await fetch("/pin", {
      method: "POST",
      headers: {
        authorization: token,
        enctype: "multipart/form-data",
      },
      body: formData,
    });

    if (response.status === 201) {
      alert("저장성공!");
      navigate("/main");
    } else {
      alert("컨텐츠를 모두 채워주쇼");
    }
  };

 // 이미지를 업로드 받아 상위 컴포넌트의 state로 전달해주는 하위 컴포넌트
  const handleImg = fileBlob => {
    setSubmitPin(prev => ({ ...prev, uploadingImg: fileBlob.target.files[0] }));

    const reader = new FileReader();
    reader.readAsDataURL(fileBlob.target.files[0]);
    reader.onload = () => {
      setImageSrc(reader.result);
    };
  };

아래의 FileReader()는 업로드 이미지 미리보기 기능을 위한 메서드이다. 이것을 통해서 업로드된 이미지는 긴 strig 데이터로 컨버트 되고 브라우저는 이 string 데이터를 읽어서 이미지를 출력한다.

3. 보드 또는 게시물 삭제하기 기능
   

2차 프로젝트를 진행하며 느낀점.

1차 프로젝트에서는 백엔드와 통신을 거의 처음 접한 것이어서 간단한 GET 요청에서도 시간 소요가 많아 힘들었던 경험이 있는데 그에 반해 2차프로젝트에서는 어느정도 통신에 대한 이해도가 있던지라 통신하는데 있어서 두려움은 많이 없었던 것 같다. 기업협업 준비와 다른 일정들이 많았던 기간이라 온전히 프로젝트에 집중하기 힘들었지만 팀원들과 여러 번 상의를 통해서 우리가 기간 내에 구현할 수 있는 범위에서 프로젝트를 진행하자는 점을 합의했고 원활하게 Happin 프로젝트를 마칠 수 있었던 것 같다.

아무래도 2달 간 열심히 달려왔기에 팀원 모두 체력적으로 힘들어서 집중력도 많이 떨어졌지만 그럼에도 불구하고 모두들 서로 누가 되지 않도록 열심히 도와가며 목표했던 기능 구현을 할 수 있게 되어서 안심되고 함께하는 사람들이 있음이 얼마나 중요한지도 느낄 수 있었다.