JUSTCODE - Week6(1차 팀 프로젝트 회고)

클론 대상 사이트:
https://grafolio.naver.com/works/list.grfl
프론트 깃허브 페이지:
https://github.com/wecode-bootcamp-korea/justcode-7-1st-photofolio-front
백엔드 깃허브 페이지:
https://github.com/wecode-bootcamp-korea/justcode-7-1st-photofolio-back
팀 노션:
https://www.notion.so/wecode/PhotoFolio-330fe6e36a4a4a6ebbc0648dd5194403
배포 링크:
http://54.180.151.218:3000/works
발표 영상:

---

프로젝트 정보

팀원 구성:
프론트엔드 3명, 백엔드 3명

사용한 기술:
JS(React), Scss

개발 기간:
22.10.31 ~ 22.11.13

협업 도구:
github, 슬랙, 구글미드/줌, 노션(칸반보드, 타임라인), VSC liveShare

기타 도구:
포스트맨

협업 방식:
매일 오후 1시 30분에 전체 스크럼 진행,
전날 진행 상황을 알리고 오늘 할 일을 공유하였다

프론트의 경우 매일 오후 11시에 모여 금일 작업을 공유하고
pr/merge를 함께 진행하여 충돌을 해결하였다

프로젝트에 임한 태도:
프로젝트의 목적이 퀄리티 높은 결과물을 만들어 내는 것이 아니라
배운 내용을 활용하고 협업 과정을 익히는 것이었기 때문에

검색과 라이브러리를 통해 찾을 수 있는 코드보다 비효율적이라도
내가 맡은 기능을 직접 고민해서 풀어보려 노력했다

---

담당 파트 소개:

로그인

헤더에서 로그인 버튼 클릭 시 노출되는 로그인 모달창이다
조건부 랜더링을 통해 노출을 관리해주었고
모달창 바깥을 눌렀을 때 모달창을 끄기 위해서
외부에 커다란 div를 만들고 z-index로 이벤트를 구분하여 state를 관리해주었다
css의 shadow효과로 바깥 부분을 어둡게 처리했다

---

회원가입

로그인 창에서 이동할 수 있는 회원가입 모달창이다
로그인 창에서 회원가입 창으로 이동할 때 서버 에러가 발생했는데 원인이
fetch 코드를 useEffect[가입정보객체]로 관리해주었기 때문이었다

가입 버튼을 누를 때 실행되어야 하지만, 랜더링 시 사이드 이펙트가 한 번 실행되기 때문에
회원가입 창이 랜더링 될 때 마다 에러가 발생했고, 조건문으로 fetch의 실행을 제한시켜 에러를 방지하였다

input[type="file"]과 files객체를 통해 프론트에서 입력받은 파일을 관리하고
formData객체를 사용하여 입력받은 파일을 서버로 전송할 수 있었다

---

카드/카드리스트 컴포넌트

해당 사이트에서 사진 정보를 보여주는 컴포넌트이다
페이지 별로 데이터를 다르게 받아와야 하기 때문에
조건문으로 url을 비교하여 fetch 요청 주소를 변경하여
화면에 보여줄 응답 객체를 다르게 받아왔다

---

게시글 업로드 페이지

게시글 메인 페이지

원본 페이지에서 페이지를 이동하지 않기 때문에
input에서 onChange이벤트로 파일 입력에 따라 state값을 관리하여
조건부 랜더링으로 보여줄 컴포넌트를 변경하였다

게시글 작성 페이지/태그 모달창

태그 텍스트를 클릭하면 모달창이 나오고,
모달창의 input에서 입력한 텍스트가 하단의 태그로 추가되는 방식이다

태그 정보는 부모 div를 ref훅으로 참조한 뒤
부모 div의 값을 배열에 추가하여, 배열 함수로 가공한 뒤 사용하였다

  function updateTagMockDataFunc(event) {
    const updateTagMockData = [];
    if (tagFieldRef.current) {
      tagFieldRef.current.childNodes.forEach(element => {
        updateTagMockData.push(element.innerText);
      });
    }
    setUploadTagData(updateTagMockData);
  }

업로드 모달창

가장 후회하는 부분1..
시간이 없다고 기능만 추가하고 더 신경쓰지 못했는데
발표 영상을 볼 때 너무 아쉬웠다
다음 작업에는 잠을 줄여서라도 눈에 보이는 부분은 완전히 작업해야겠다고 느낀 부분

업로드 페이지 구조도

처음부터 구조를 생각하지 않고 컴포넌트를 나누어
마지막에 데이터를 정리하기가 상당히 어려웠다
결국 정리를 하고 나서야 요청할 데이터를 정리할 수 있었는데
처음부터 페이지의 구조를 고민할 필요가 있을 것 같다

카테고리 컴퍼넌트

가장 후회하는 부분2..
마찬가지로 다음 부터는 어떻게 해서든 완성해야겠다고 느꼈다

---

작업 후기

어려웠던 점(코드):

코드적인 부분에서 고민없이 컴포넌트를 나누다보니
나중에 분리한 컴포넌트에서 데이터를 모으는 과정이 복잡해졌다
컴포넌트를 분리하고, 합치면서 데이터의 흐름이 복잡해 질 수 있기 때문에
내 작업 상황을 구조화하여 계속해서 정리하며 파악하는 것이 중요하다고 느꼈다

어려웠던점(소통):

첫 팀 프로젝트다 보니,
협업 시 팀원과의 소통에 시간과 체력을 어느정도로 배분해야할 지 알지 못했기 때문에,
초중반까지 체력 분배에 어려움이 있었다
다음 프로젝트 때 특히 신경써야 할 부분이라고 느꼈다

---

아쉬웠던 점:

내가 몇 시간 또는 며칠씩 고민했던 기능들을 돌아보니
차분히 생각했다면 더 빠르게 해결할 수 있었을 것이라는 생각이 들었다
다음부터는 작업이 막힐 때, 단계별로 침착하게 접근하려 한다

---

느꼈던 점:

코드의 동작을 정확하게 파악하지 못한 상태로 작업을 하게 되면 예상치 못한 에러로 이어지기 때문에,
한 줄의 코드라도 정확한 동작을 파악하려는 노력을 해야 한다

---

좋았던 점:

팀원과 함께 작업하는 협업 프로세스를 알게 된 것
깃허브를 통한 협업으로 깃과 깃허브에 익숙해진 것
컴포넌트를 분리하여 코드를 재사용하는 것에 익숙해진 것
fetch를 사용한 서버 통신에 익숙해진 것
프론트에서 파일을 관리하고 formData 객체를 통해 서버로의 파일 전송 방법을 알게 된 것
혼자 공부하는 것이 아니라 같이 얘기하고 고민하면서 공부할 수 있었던 것

---

마치며

사실 목요일 까지만해도 혼자서 결과에 대해 걱정이 있었는데
마지막 금토일 사이 팀원 분들의 엄청난 노력으로
걱정이 무색할 만큼 예상치를 훨신 뛰어넘은 결과물이 나온 것 같아서
갈수록 죄송한 마음이 커졌다

좋은 마무리를 해보는 경험이 언제인지 기억도 나지않는데
다시 좋은 세이브 포인트가 된 것 같았고,

2주간 항상 좋은 팀원이 아니었다는 것을 알기 때문에
돌아볼 수록 함께 달려주신 팀원들에게 감사한 경험이었다