첫 회고록

1. 첫 직장 퇴사

7월 6일 퇴사를 하였다.
비록 3개월 조금 넘는 짧은 회사 생활이었지만 얻은 것이 참~ 많은 것 같다.
신기하게도 이 3개월이 나에게는 정말 1년 같이 느껴졌는데 단조로웠던 내 인생에서는 꽤 재미있는 시기였던 것 같다.
처음에는 그토록 바라던 프론트엔드 개발자로 일을 한다는 것만으로도 너무 좋아서 주말에도 회사 가고 싶은 마음이 들 정도였으니 말이다.
그러나 시간이 지나면서 끊임없이 스스로에게 성장에 대한 압박을 주고 있었다.
성장에 대한 열정과 그에 미치지 못하는 성장 속도 나는 결국 퇴사를 선택했다.
물론 다른 여러 이유도 있지만.. 퇴사 후에 개인적으로 더 공부하고 싶었었다.
그러다 우연히 원티드 프리온보딩 코스를 알게 되었다.

2. 프리온보딩 코스 지원

우연히 알게 된 프리온보딩 코스를 보고 이건 운명이라고 느꼈다. (퇴사하길 잘했다..라고 느낀 순간이었다.)
다급히 노트북을 키고 프론트엔드 개발자를 준비하는 친구에게 알려 선발 과제를 후다닥 풀고 같이 지원하였다.
선발 결과 날 발표 시간에 맞춰 핸드폰만 붙잡고 있었다.
40분이 넘어도 연락이 오지 않아 🙈 멘탈이 나간 상태였는데 50분이 넘어서야 합격 연락이 왔고 다행히도 친구도 같이 합격을 하게 되었다!! 🙉
내 맘을 들었다 놨다 들었다 놨다 들었다 놨다 하는 행복한 날이었다.

3. Orientation

설렘을 가득 안고 월요일 첫 수업 OT 강의를 ZOOM으로 시청하였다.
ZOOM과 같은 화상으로 하는 무언가를 해본 적이 없어 굉장히 어색하기도 하고 기대가 되었다.
사업개발팀 정승일 님께서 프리온보딩 코스 소개와 앞으로의 진행 방향에 대해 알려주셨는데 목소리가 아주 좋으셨다.
개인적인 생각으로 백기선 개발자님과 외모와 목소리가 너무 닮아서 동일 인물인가 싶었다.
다음으로 멘토 안예리한 김예리님께서 커리큘럼 소개와 선발 과제 피드백 등등 해주셨는데 피드백 파트에서 뜨끔하는 부분이 많아 부족함을 많이 느꼈다.
앞으로 나와 70여 명의 프리온보딩 동료들을 지도해 주실 10년 짬밥 프론트엔드 개발자님이라 그런지 후광이 엄청났다.
멘토 김예리 님을 따라 폭풍 성장해야겠다라고 다짐하는 순간이였다.

4. TEAM RE4CT

팀이 선발되고 팀끼리 슬랙에 모여 팀장과 팀명을 정하는 시간이었다.
다른 팀들 모두 자기 팀 숫자와 관련된 팀명을 지었다.
나는 4팀이었는데 4와 관련된 건 404 에러 밖에 생각이 안 나길래
404 아이디어를 던졌고 조금 성의없는 팀명이긴 하지만 반응이 의외로 괜찮았다..?
다른 아이디어들로 나온 게 RE4CT, TEAM W4NTED 였는데 괜히 개발자가 아니구나라고 느꼈다.
팀명 투표시간이 왔고 404는 0표 마지막에 동정표로 1표(감사합니다) 받고 RE4CT가 팀명이 되었다.(정말 맘에 든다)
팀장은 지원자가 없어 사다리타기를 하게 되었고 다행히 서포터로 남았다.
그리고 시작된 첫 기업과제...

5. 첫 기업과제

과제는 페어 프로그래밍으로 짝과 함께 협업을 하며 진행하는 방식이다.
지금까지 혼자 공부하고 프로젝트를 진행하면서 번아웃이 자주 와서 힘들었는데 페어 프로그래밍으로 짝과 함께 과제를 하다 보니 재미도 있고 서로의 코드를 보면서 궁금한 것도 물어보고 즐거웠다.
첫 기업 과제는 '하얀마인드' 기업의 인피니티 스크롤 구현 과제였다.
예전에 자바스크립트로 구현을 해본 경험이 있어 무난할 줄 알았는데
리액트로 구현해보니 당연하게도 쉽지 않았다. useRef로 등록한 element를 intersectionObserver API에 observe 등록을 하는 과정에서 useEffect dependency에 ref를 넣고 삽질을 했다.
ref는 당연하게도 re-render가 되지 않는데 dependency에 넣고 왜 안되는지 한참 고민한것이다.
결국은 ref를 등록할 엘리먼트가 참조하는 상태배열값을 dependency에 추가를하고 해결했다.
코드를 실행하고 확인해보니 역시나 버그가 발생하였다.
그 버그는 10번째(마지막)엘리먼트 감지후 데이터를 업데이트하고 새로운(업데이트 후에 마지막)엘리먼트로 observer가 옮겨가야 하는데 10번째 엘리먼트에도 observer가 남아있어 추가로 감지하여 옵저버 콜백이 실행되는 버그였다.
이것은 useEffect에 cleanup function으로 disconnect()를 추가 하여 간단히 해결하였다.

useEffect(() => {
  const fetchMoreObserver = new IntersectionObserver(
    ([{ isIntersecting }]) => {
      if (isIntersecting) {
        setPage((page) => page + 1);
      }
    }
  );
  if (triggerRef.current) {
    fetchMoreObserver.observe(triggerRef.current);
  }
  
  return () => {
    fetchMoreObserver.disconnect();
  };
}, [comment]);

참고
Mutable values like 'ref.current' aren't valid dependencies because mutating them doesn't re-render the component. (react-hooks/exhaustive-deps)