2022.11.13 ~ 2022.11.25 2주에 걸친 2차 프로젝트가 끝났다.
나는 프론트엔드 개발로 참여했다.

지난번 1차에 이어 진행한 두번째 프로젝트!

• 팀원 : 프론트 4명 / 백엔드 3명

---

프로젝트 설명

주제

클론 사이트

• 메가박스

선정 과정 및 이유

첫 회의 전까지 각자 페이지 한 두개 정도 정해오기로 했다.
이번 팀은 전보다 프론트엔드 팀원이 한 명 더 많아서 조금 더 여유롭게 만들 수 있겠다! 싶었다.
난 원래 유데미나 인프런 같은 강의 사이트를 만들어보고 싶어서 이번에는 유데미 페이지를 제안했다.

첫 회의때 이야기를 나누던 중에 다들 대량의 데이터를 다루고 비교하는 데이터 비교 사이트를 하고싶어하는게 느껴졌다. 순간 수업때 경험해봤던 영화진흥위원회 open api가 떠올랐고, 프론트입장에서 구현할 수 있는 페이지가 다양하고, 백엔드 입장에서는 대량의 데이터를 다룰 수 있는 메가박스가 생각났다.

다행이 내가 제안한 메가박스 페이지의 반응은 좋았고, 결국 클론 사이트로 선정되게 되었다.

---

구현할 페이지

• Header, Footer
• 메인페이지
• 전체영화 페이지(검색하면 전체영화 페이지로 이동)
• 빠른 예매
• 좌석 선택
• 영화 상세 페이지
• 상영시간표
• 회원가입
• 로그인
• 아이디/비밀번호 찾기
• 마이페이지
  • 예매/예매취소 페이지
  • 나의 무비스토리 페이지(좋아요 한 작품을 볼 수 있다)
  • 회원정보 수정 페이지

확실히 1차 프로젝트때보다 페이지가 훨씬 많다..!

---

내 담당 기능

• 회원가입
• 로그인
• 아이디/비밀번호 찾기
• 마이페이지
  • 회원정보 수정

---

협업 툴 및 개발환경

협업 툴

• Trello 칸반보드를 사용하여 티켓으로 일정관리
  
• Daily Stand Up Meeting : 매일 오전 10시에 30분간 미팅 진행
  • 어제까지 작업한 사항 공유 및 오늘 작업계획 공유
• Discord로 소통 및 공지사항 전달

---

개발환경

• OS : MacOS, Windows, Ubuntu
• 언어 및 기술Stack
  • 프론트엔드 : HTML, CSS, JavaScript, SASS, React
• 형상관리 : Github
• 협업 : Discode

---

후기 및 느낀점

→ 메인페이지!

→ 회원가입페이지(제가 만들었어요!)

→ 회원가입페이지(인증번호가 문자로 온답니다!)

---

소통의 중요성

2차 프로젝트는 1차에서 이미 익숙해졌기 때문에 1차 프로젝트에 비해 회의가 많이 줄어들게 된 것 같다.

회원관리 부분을 담당하고 나서 느낀점은, 다른 기능들과의 접점이 많이 없는 것 같다는 점이다.
유일한 접점이라고 하면 회원가입 후 로그인해서 localStorage에 토큰 넣는 정도..?
내가 회원가입과 로그인 기능을 구현해야 팀원들이 조금 더 편하게 로그인 한 상태에서의 화면을 작업할 수 있기 때문에 접점이 있다고 생각한다.

내가 맡은 기능에만 집중하다보니까 어느새 다른 팀원들의 코드나 기능들에 대해 잘 모르게 되고, 다른 팀원의 blocker를 봐도 코드를 이해하는데 시간을 많이 써서 대답을 할 수가 없었다. 내가 조금 더 다른 팀원에게 관심을 가지고 적극적으로 소통했어야 했는데, 담당한 기능에서 막히는 부분이 많다보니 시간이 부족하여 생긴 문제라고 생각한다.

팀프로젝트는 소통이 매우 중요하다고 다시 한 번 느끼게 된 경험이었다.

새로운 Git convention

이번 프로젝트때는 잘하는 팀원들을 만나서 많이 배울 수 있는 프로젝트였다.
git을 잘 아는 팀원 주도 하에, 원래 익숙하던 git commit 방법이 아닌, 새로운 commit 룰을 정했다.

원래 commit 규칙

• 매일 밤 11시에 하던 작업 멈추고 pr날리기
• 작업하던 브랜치에 develop merge 한 후 이어서 작업

지금 규칙

• 기능 하나가 완전히 구현되면 pr날리기
• merge한 브랜치는 버리기

git 브랜치를 사용하는 다양한 방법을 알게 되었던 좋은 경험이었다.

별건 아니지만 크게 깨달은 것

useState를 사용할 때 가끔 setter함수가 바로 반영되지 않는 경우가 있다.
이번 프로젝트를 하던 도중, 난 분명 setter함수로 상태값을 바꿨는데, 값이 바뀌지 않아서 아주 당황했던 적이 있었다.
구글링을 통해서 나온 방법으로도 소용이 없었다...

const [id, setId] = useState('');

//원래 이렇게 썼던 코드를
setId('myId');
//이렇게 하면 반영된다하는데.. 안된다...
setId(id => 'myId');

한참 해매던 나는 구세주 팀원분의 도움으로 해결할 수 있었다!
내 코드를 보면 setter 함수 뒤에 실행할 함수가 있다.
useState값의 setter함수 뒤에 다른 동작 코드가 있으면 반영이 바로 안되는 경우가 있다고 한다..!!!
그래서 setter함수를 제외한 코드들을 따로 빼서 useEffect안에 넣으면 된다고 한다.

const getId = () => {
  fetch('http://localhost:8000/users/ID', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      phone_number: phoneNumValue,
      birthday: birthValue,
      name: nameValue,
    }),
  })
    .then(res => res.json())
    .then(json => {
      //여기에는 setter함수만 두고
      setId(json.userID);
      setJoinDate(json.created_at);
    });
};
//여기에 기타 동작 코드를 넣는다.
useEffect(() => {
  if (joinDate !== '') {
    openAlertModal();
  }
  //의존성 배열에 joinDate를 넣어서 getId함수가 실행돼서 joinDate가 바뀌면 실행되도록 한다.
}, [joinDate]);

코드를 위처럼 짜니까 바로 정상적으로 값이 반영되는것이 아닌가..!!!!!!
이때 정말 나는 많이 부족하구나..를 느끼고 반성하게 되었다..

마무리

이렇게 2차 프로젝트도 끝이 났다. 이제 다음주에는 코드 리팩토링이 예정되어있다..
내맘대로 짠 엉망진창 코드를 다시 마주해야 한다니 조금은 두렵다..
하지만 멘토님들과 팀원들의 조언을 통해 리팩토링하고 나면 달라질 내 코드를 상상하니까 설레기도 한다!
내일부터 다시 블로그도 매일 쓰면서 열심히 해야지!

---

2주동안 새벽까지 열심히 하시는 팀원분들을 보며 저도 더 열심히 하자는 의지도 얻고 많이 배운 시간이었습니다!
JEGABOX 팀원 분들 모두 고생많으셨습니다!😊