프로젝트 배포 링크🧑🏻‍💻: roadtointerview.site

길다면 길었고 짧다면 너무 짧았던 4주 간의 팀프로젝트, 그리고 이제 내일이면 6개월간의 코드스테이츠 부트캠프도 끝이 나게된다. 뭔가 엄청나게 뿌듯하면서도 마음 한켠에는 "진짜 시작은 이제부터"라는 마음에 조금의 부담감도 있는 것 같다. 이제 다음주부터는 코드스테이츠에서 제공하는 공식 스케쥴은 없다. 비어있는 나의 캘린더를 보고 있자니 잘할 수 있을까라는 생각, 하지만 무언가 처음 시작하는 때의 열정적인 마음이 꿈틀대는 것 같다. 마치 성인이 되어 부모님의 집에서 벗어나 처음으로 자취를 하기 직전의 마음이랄까...ㅋㅋㅋ
이제 프로젝트도 끝이 났으니 이력서 및 면접 준비를 하기 전 파이널 프로젝트에 대한 회고를 해보고자 한다. 이번엔 그래도 프로젝트 중간중간 나름의 메이져한 사건이 있을때마다 Dev Log를 작성해 두어서 그때의 노력들을 조금 더 상세하게 적을 수 있을 듯하다. 그럼 시작해보자.🔥

📝 Dev Log History

2021-10-21

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

• 기존 스택 아키텍쳐 및 와이어프레임을 전체적으로 추가하였다. 기존에 나름 잘 만들어둔게 있어서 재활용하면 되는게 아주 큰 메리트였다.
• 개인적으로 프론트엔드 킥으로 활용해보고 싶은 기능이 있어 codesandbox에서 실험해봤다. 질문 페이지에서 답변을 하는 중에 분명 답변을 제시간안에 하기 어려운 상황이 나올 것같아서 framer-motion을 활용하여 drag 이벤트를 만들어 타이머를 흔들어서 괴롭히면 시간이 들어나는 것을 구현해봤다.

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

• 아직 프로젝트 초반이라 힘든 점 보다는 나중에 힘들지 않기 위해 기초를 탄탄히 하는 작업들이라고 생각한다. 2주프로젝트를 적은 인원으로 경험해봤던게 어느정도 도움이 되는 것 같다.

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

• 이제 슬슬 SR기획을 마무리하고 코드 협업에 들어갈테니 깃에대해 좀 더 공부해봐야할 것 같다.
• client-side 사이트맵을 짜봐야겠다. 너무 세부적인 flow보다는 주요 이벤트들이 일어나는 페이지들로 나열하는게 이해하기에도 훨씬 도움이 되는 것 같다. 이 부분 또한 와이어프레임을 잘 짜두니 많은 도움이 된다.

---

2021-10-27

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

• react-hook-form 을 활용한 회원가입 페이지 유효성 체크를 적용해봤다.

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

• 힘들다기보단 하는 김에 좀 제대로 해보고 싶어서 공식문서의 error처리 advanced 부분으로 적용해봤다.
• advanced에 활용된건 optional chaning을 통해 혹시모를 null과 undefined 에 대한 예외 처리
• 유효성 체크가 한 input에 여러개 들어갈 경우 유효성 각각에 맞는 에러메세지를 만들어줘야하지만 옵션값에 value 와 message값에 에러메세지를 등록해두게되면 한줄로 에러처리가 가능하다.

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

• 유효성 체크시 에러메시지의 디자인 적용해보자
• 프론트끼리 페이지 분담 후 페이지 디자인 시작해보자

---

2021-10-29

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

• 클라이언트 도메인에 https를 적용하고 freenom 에서 무료로 생성한 도메인을 적용하기 위해 노력했지만...절반만 성공했다...
• cloudfront를 통한 https적용 성공
• freenom에서 얻은 무료 도메인 route53을 통해 리라우팅하는 과정 실패...

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

• cloudfront를 통해 기존 도메인에 https를 적용하긴 하였으나 구매한 도메인을 route53에 등록하고 생성한 아마존 인증서를 등록했음에도 해당 도메인으로는 접속이 불가능했다.
• 처음엔 다른 팀원이 S3버킷에 배포 자동화까지 끝낸 도메인으로 cloudfront에 적용하여 생기는 문제인건가 의심하여 내 로컬(dev)을 기준으로 새로운 빌드를 진행하여 S3 버킷을 생성하고 프로세스를 진행했지만 역시나 똑같은 이유로 새로운 도메인으로는 접속이 불가능했다.
  여러가지 방법을 찾아보다가 아마존 공식문서에 나와있는 dig +trace ${도메인네임}을 통한 등록된 도메인의 쿼리로그를 조회하거나 nslookup ${도메인네임} ${등록된 네임서버} 로 네임서버와 도메인이 잘 연결되었는지 확인해보았지만 연결되어있지 않았고 해당도메인으로 접속시 DNS_PROBE_FINISHED_NXDOMAIN 의 에러만 확인할 수 있었다.
• 블로그를 뒤져본 결과 위와 같은 문제가 어쩌면 무료로 구매한 도메인에서 발생할 수도 있고(.tk, .ml, .ga 등에서 발생할 수 있다고 한다.) cloudfront에 ACM 인증서를 인증한 뒤 하루가 지나면 또 될 수도 있다는 글을 발견했다... 우선 오늘은 여기까지하고 내일은 문제를 발견할 수 있기를 바란다...후

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

• 우선 https는 도메인에 적용된 상황이니 나중에 더 기회가 되면 찾아보고 우선 프로젝트로 진행해야하는 태스크 먼저 처리해볼 예정이다.
• 내일은 작업했던 페이지(로그인, 회원가입, 마이페이지) 에서 리덕스를 통한 상태관리 및 서버통신을 해볼 예정이다.

---

2021-11-04

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

• 소셜 로그인(구글, 카카오) 을 구현했다.

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

• 카카오 로그인 구현할때 공식문서에서 하라는대로 구현을 했는데 반응이 없어서 고생했는데 알고보니 개발하는 브라우저의 캐시문제였다. 브라우저의 캐시를 삭제하고 새로고침을 했더니 제대로 반응을 했다. 테스트 중 console.log를 alert로 바꿔보고 alert가 반응이 없는걸 보고서야 캐시 문제인걸 눈치챌 수 있었다. 이 삽질로 시간을 너무 많이 낭비했다ㅠ
  구글 로그인 구현때는 react-google-login 으로 로그인을 구현했는데 index.html 에서 function.init 내에 gapi.auth2.init에 클라이언트 id를 담아줘야 제대로 실행이 됐다.
• index.html 에 카카오와 구글의 클라이언트 id를 노출시키는 것에 거부감이 있어서 .env에 환경변수로 빼내는 법을 찾아봤는데 oauth ID에 restrictions로만 활용 된다는걸 찾아서 좀 찝찝하지만 우선은 보류하기로 했다.

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

• 로그인, 회원가입, 마이페이지 에 상황에 따른 예외처리를 좀 추가한다.
• 아직 프로필 이미지 변경 기능이 있진 않아서 기본 로그인 시 클라에서 기본 이미지를 서버로 보내줘야 한다. 이 부분은 내일 해보자.
• 마이페이지에서 정보수정란에 드랍다운 등 framer를 통해서 애니메이션을 적용해보고 싶다.
• 페이지 전체적으로 디자인을 다듬기.

---

2021-11-09

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

• 유저가 맘에드는 인터뷰를 마이페이지 컬렉션에 추가할 수 있는 기능 추가(장바구니 기능(?)) 및 그에 따른 서버 API요청과 리덕스 리듀서 적용
• 도메인의 엔드포인트로 잘못된 요청시 렌더링될 NotFound 컴포넌트 추가

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

• 컬렉션에 추가까지는 나름 순조로웠으나 컬렉션에서 해당 인터뷰를 삭제시 서버로부터 잘 삭제된 내용은 리턴되는데 삭제된 녀석을 제외한 나머지 컬렉션 리스트들이 렌더링 되지 않는다. - useEffect에서 deps 배열의 문제같아 이것저것 넣어서 테스트 해봤지만 컴포넌트가 무한하게 리렌더링 되거나하는 등의 버그가 발생해서 우선 보류하고 내일 팀원들과 얘기해보면서 해결해야할 것 같다.

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

• 컬렉션 추가 및 삭제 기능을 마무리하고 인터뷰리스트 페이지에서 이미 컬렉션에 추가된 녀석들은 filledIcon을 사용하여 이미 표시된 녀석으로 표시하고 인터뷰리스트 페이지에서도 추가 및 삭제가 될 수 있도록 해볼 예정이다.
• 시간이 된다면 랜딩페이지에 디자인 요소를 좀 추가해봐야겠다.

---

2021-11-15

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

• 서로 작업하던 페이지들의 디테일을 챙기기 위해서 서로 해왔던 태스크들을 다른 팀원들에게 바톤터치하는 식으로 진행하였다. 나는 테스트페이지를 제외한 사이트의 전체적인 디테일을 잡아보기로 하였다.
• 랜딩페이지 -> 메인페이지에서 컬렉션 기능 에러 수정 -> 마이페이지 컬렉션에서 바로 도전하기 순으로 작업을 진행하였다.
• 기존에 있던 랜딩페이지가 조금 심심하고 정적인 느낌이 있어 반응형을 유지하되 사용자가 사이트에 접속하자마자 어떠한 사이트인지 바로 알 수 있도록 전체적인 디자인을 수정해보았다.

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

• 이놈의 컬렉션 기능이 이상하게 자꾸 작동하지 않는다ㅠ 로직상의 에러로 인한 특정 에러라도 뱉어주면 좋으련만 에러없이 기능이 작동하지 않아 이에 대한 고민이 많았다.
• 문제에 대한 원인을 찾아보던 중 처음 컴포넌트 마운트 시 useEffect때 Redux내 collectionsReducer에서 해당 유저의 컬렉션을 조회하는데 빈배열이 들어왔고 다음 요청시 컬렉션을 제대로 불러오는 문제를 확인할 수 있었다.
• 이에 대해 팀장님과 상의하여 유저의 컬렉션과 refresh 상태를 만들어 메인페이지(인터뷰 리스트)가 마운트되는 시점에 PostCard.jsx의 props로 내려준 뒤 PostCard.jsx의 addAndRemoveCollection 함수를 별표시가 눌릴 때 컬렉션에 특정 actionCreator를 dispatch 하는 방식으로 진행했고, 기존 리렌더링 및 마운트되는 시점에서의 발생하던 문제를 방지하기 위해 setTimeout으로 0.3초 후 refresh의 값을 true로 바꿔주면 메인페이지에서 getCollections액션을 통해 새로 변경된 유저의 컬렉션들을 불러와서 보여주는 식으로 수정해보았다.

// 코드의 일부
export default function PostCard({ interview, onOpen, collection, setRefresh }) {
  const [mode] = useMode();
  const dispatch = useDispatch();
  const { accessToken } = useSelector(state => state.users);

  const addAndRemoveCollection = () => {
    if (collection) {
      dispatch(deleteCollections({ accessToken, interviews_id: collection?.collections_id }));
      dispatch(showNotification(`컬렉션이 삭제되었습니다!`, 'error'));
      setTimeout(() => setRefresh(prev => !prev), 300);
    } else {
      dispatch(addCollections({ accessToken, interviews_id: interview.interviews_id }));
      dispatch(showNotification(`컬렉션이 추가되었습니다!`));
      setTimeout(() => setRefresh(prev => !prev), 300);
    }
  };

이 방법이 좋은 방법인 것 같진 않다는 생각이 많이 들어 프로젝트가 끝나면 이 부분을 제일 우선적으로 리팩토링 해보고 싶다.

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

• 이제 당장 발표준비를 해야하기에 완성된 기능에서 뽑을 수 있는 gif들을 만들어두어야겠다.
• 발표슬라이드도 만들어야하니...할게 참 많구나...^^

---

그렇게 진짜 어마무시하게 바빴던 발표날이 지나가고...🤦🏻‍♂️ 마지막으로 나에게 질문하고 답변하면서 프로젝트 회고를 마무리해보자⭐️

🅀 프로젝트 중 가장 아쉬웠던 점과 이후 진행하고 싶은 태스크가 있다면 무엇일까요?

🄰 제가 작성한 코드들이 단순 기능 구현에만 초점이 맞춰져있는 것 같다는 부분이 가장 아쉬웠던 것 같습니다.

특정 기능을 구현하는데 여러가지 방법이 있을 수 있다고 생각합니다. 그 중 제가 알고 있는 부분들이 부족해 더 좋은 코드로 기능을 구현할 수 있지 않을까?에 대한 갈증이 있었던 것 같습니다. 이를 통해 리액트 이전 자바스크립트 자체에 대한 이해도가 많이 부족하다는 것을 깨닳았고 자바스크립트랑 더 친해지고 싶다는 생각을 했습니다.

앞으로 프로젝트를 개선하게 된다면 제가 담당했던 파트들의 리팩토링에 대한 부분을 진행해보고 싶습니다. 현재 코드에서 하나의 함수가 여러개의 기능을 담당하고 있거나 페이지에서 유저반응에 대해 적절하게 예외처리를 하고 있지 못하고 있습니다. Lighthouse에서의 퍼포먼스 최적화 및 리덕스를 활용하고 있는 만큼 전역에서 유저의 행동상태에 따른 적절한 예외 조치와 에러처리를 추가해준다면 서비스의 더 좋은 UX를 제공할 수 있을 것이라는 생각이 듭니다.