1차 프로젝트 - 커뮤니티 홈페이지 클론 (hola) 로그인, 회원가입 구현 (3) 회고록

이렇게 해서 나의 첫번째 프로젝트는 끝이났다.
처음 시작할 때,,도대체 나 아는게 없는데 이걸 어떻게 하지 했는데
어찌저찌 했다...그런데 이렇게 부족하게나마 프로젝트를 완성할 수 있었던 것은
팀원분들의 도움이 정말 컸다.
회고록에는 내가 이번 프로젝트를 하면서 느낀점, 중요하다고 생각하는점, 내가 부족했던 점 등을 적어보려고 한다. 다시한번 리마인드하면 다음 프로젝트에 더 잘할 수 있을 것 같다.

1. 프로젝트 하면서 느낀 점 (중요하다고 생각하는 점)

1) 팀원들의 협업⭐️⭐️⭐️⭐️⭐️

사실 제일 중요하다고 해도 과언이 아닌 것 같다...솔직하게 나의 능력으로는 아직 제대로 된 페이지를 구현하기에 힘들다. 처음 시작할 때 보다는 좀 나아졌지만 내가 프로젝트 처음 시작할 때는 정말 이걸 할 수 있을까 라는 생각이 제일 많이 들었다. 그래서 담당 파트를 정할 때도 걱정이 많았다. 진행하면서도 어려운 것이 많았는데, 그 때마다 구글 검색, 복습 등을 하여 해결한 것도 있었지만 팀원분들이 도와주신 것도 많았다.
특히 PR올릴 때 마다 어떤식으로 변경하면 좋을 지 피드백도 잘 해주셨고,
에러가 나서 해결하려고 몇시간씩 잡고 있다가 해결이 안되어서 팀슬랙에 공유했더니 본인 일 처럼 해결을 위해 적극적으로 알아봐주신 팀원분도 계시다.
우리팀은 하루에 2번씩 루틴하게 회의도 진행했고 그때그때 팀슬랙도 이용하여
항시 커뮤니케이션 모드였다. 그렇기 때문에 의견 공유하는데 어려움이 없었고
그것은 프로젝트를 완성하는데 큰 도움이 되었다.
기억나는 것이 fetch로 서버 연결하려고 함수를 입력했는데 아무리해도 서버통신이 안된 적이 있었다. 몇시간 이것저것 해보고 헤매다가 팀슬랙에 공유했더니 한 팀원분이 .then(res.status) if문의 위치를 변경해보라고 알려주셨다.
나는 그런 방법은 아예 생각도 못했던 것이기 때문에 만약 내가 그냥 붙잡고 있었으면 절대 혼자서 해결할 수 없었을 것이다.

2) 백엔드와의 계획수립

우리는 처음 계획을 수립할 때 프론트는 프론트끼리, 백엔드는 백엔드끼리 계획을 수립했다.
나중에 프로젝트 진행하면서 이것은 잘못된 방법이었다는 것을 깨달았다.
미리 계획 수립 단계에서 백엔드랑 key, stack등을 협의하여 통일시킨 다음에 진행했어야 수정할 것이 줄었을 텐데, 그러지 못했다. 나는 상대적으로 백엔드와 통신할 일이 많지 않아 나중에 수정한 것이 많지는 않았지만 다른 팀원분들은 구현한 코드를 다 지우거나 수정했어야 했다.
처음에 시간이 좀 들더라도 백엔드, 프론트엔드간의 계획을 상세하게 잡아놓고
그에 맞춰 진행해야한다는 것을 깨달았다.

2. 좋았던 코드, 부족하다고 생각하는 부분

1) 개인적으로 잘했다고 생각한 부분

이용약관 부분이 개인적으로 만족스럽게 구현했다고 생각하는 부분이다.
회원가입 전 단계에 이용약관을 넣어 선행조건 만족 시에 회원가입 페이지로 넘어가게 구현하고 싶었는데, 이용약관의 특성상 전체 동의 클릭 시 하위 목록에 있는 세부 동의 사항들이 자동으로 한번에 동의 체크가 되고 각 하위 목록 동의를 하나씩 클릭하다가 다 클릭되면 전체 동의란에도 자동으로 체크되어야 했다.
그래서 그 부분을 useState와 조건문으로 각 동의란의 상태값을 저장하고 useEffect로 값이 변화될 때 마다 함수를 실행시켜 자동 체크 기능을 구현했다. 또한 미 충족시에 버튼을 누르면 오류 메세지를 생성했다.

function Agreement() {
  const navigate = useNavigate();

  const [allCheck, setAllCheck] = useState(false);
  const [ageCheck, setAgeCheck] = useState(false);
  const [serviceCheck, setServiceCheck] = useState(false);
  const [personalCheck, SetPersonalCheck] = useState(false);

  const [agreementError, setAgreementError] = useState(false);
  const [disabled, setDisabled] = useState(false);

  const [modal, setModal] = useState(false);
  const modalShow = () => {
    setModal(true);
  };

  const onCheckClick = e => {
    e.preventDefault();
    if (!allCheck) {
      setAgreementError(true);
    } else {
      setAgreementError(false);
      setDisabled(false);
      navigate('/signup');
    }
  };

  //1. 전체버튼
  const allBtnCheck = () => {
    if (allCheck === false) {
      setAllCheck(true);
      setAgeCheck(true);
      setServiceCheck(true);
      SetPersonalCheck(true);
    } else {
      setAllCheck(false);
      setAgeCheck(false);
      setServiceCheck(false);
      SetPersonalCheck(false);
    }
  };
  //2. 14세 버튼
  const ageBtnCheck = () => {
    if (ageCheck === false) {
      setAgeCheck(true);
    } else {
      setAgeCheck(false);
    }
  };
  // 3. 서비스 버튼
  const serviceBtnCheck = () => {
    if (serviceCheck === false) {
      setServiceCheck(true);
    } else {
      setServiceCheck(false);
    }
  };
  //4. 개인정보 버튼
  const personalBtnCheck = () => {
    if (personalCheck === false) {
      SetPersonalCheck(true);
    } else {
      SetPersonalCheck(false);
    }
  };

  useEffect(() => {
    if (ageCheck === true && serviceCheck === true && personalCheck === true) {
      setAllCheck(true);
    } else {
      setAllCheck(false);
    }
  }, [ageCheck, serviceCheck, personalCheck]);

2) 부족하다고 생각하는 부분

사실 여유가 됐다면 로그인 페이지에 소셜 로그인 부분도 구현하고 싶었다.
지금은 아이콘만 넣어놓고 클릭했을 때 hallo 계정으로 로그인해달라고 alert메세지가 뜨도록 구현했다.
하루 전에 소셜 로그인 구현을 시도했으나, 구글 로그인 창 띄우는 것까지는 성공했는데 아이콘 변경하는 것이 더 어려웠다. 기본 설정되어있는 클릭버튼은
우리 UI에 맞지 않아서 변경해야했는데 변경하는 방법이 잘 이해가 안되었고
시간상 완료가 불가능 할 것 같아 원상태로 되돌렸다.
나중에 소셜로그인창 구현하여 리팩토링 진행할 예정이다.

그리고 회원가입 페이지도 코드가 중구난방인 것 같다.
일단 기능 구현 위주로 코드를 작성하긴 했는데, 육안으로 보기에 정리가
잘되어있는 코드는 아닌 것 같다. 내가 코드를 작성했어도, 다른 사람이 보기에도 잘 알아볼 수 있는 코드가 잘 작성된 코드라고 생각한다. 이 부분도 조금씩 수정할 예정이다.

3) 어려웠던 부분

다른 부분도 다 어려웠지만 특히 git merge부분에서 팀원 전체가 해멨다.
처음에는 개인 작업 저장할 때처럼 branch/이름으로 레포를 생성하여 각자 push 하여 저장했었는데, 이후 git merge에 대한 수업을 듣고 나서 지금까지의 저장방식에 대한 문제점과 효율성에 대해 생각하게 되었다. 관리방식 변경에 대한 부분이 논의가 되어 각 기능별로 branch를 생성하여 저장하기로 했는데 그 것을 실제로 적용하기가 생각보다 쉽지 않았다.
기존에는 내가 작업한 브랜치 하나로 관리하여 push를 했다면 기능별로 나뉘니 내가 관리해야하는 브랜치가 다수가 되었다. 그러다보니, 그 브랜치들을 push 하고 merge할 때 마다 conflict가 나서 그 것을 해결하는 데에 많은 시간을 소요해야했다. 결국에는 왜 이런 문제가 발생했는지 알아보기 위해 오류 메세지를 검색하거나, 팀원분들이랑 어떻게 해야할 지 의견을 공유하면서 해결해나갔다.

3. 정리하면서

정말 좋은 팀원분들 만나서 도움도 많이 받았다...
특히 한분은 우리 로고랑 메인 대슬라이드를 직접 제작해주시기도 했는데 너무 귀엽고 우리 팀의 아이덴티티 (4조)가 잘 나타나서 자랑스러웠다.
이외에서 오류났을 때, PR올릴 때 팀원분들의 적극적인 피드백으로 발전해 갈 수 있었다. 부트캠프 시작할 때도 동기가 정말 중요하다는 것은 들어서 알고 있었지만 시간이 지나면서 진짜 같이 나아가고 발전해가는 관계인 것 같아, 팀원(동기)의 중요성을 절실히 깨닫고 있다. 개발이라는 것은 혼자 잘하는 것도 중요하겠지만 팀원끼라 원활한 의사소통을 통해 더 좋은 방향으로 같이 잘하는 것이 더 중요한 것 같다. 2차 프로젝트가 걱정되면서도 설렌다.. 내가 잘 할 수 있을지 너무 걱정되는데, 더불어 팀원과 만들어나갈 결과물이 매우 기대된다.
의견 공유도 열심히 하고 부족한 것도 더 공부하면서 나아가야지!!
진짜진짜 화이팅하자@@@!!