[회고] 인터뷰 연구소 프로젝트 회고

프로젝트가 끝났다! 그래서 6/12 ~ 7/31 기간동안 진행했던 이번 프로젝트에 대해서 회고를 해보려고 한다. 이번 프로젝트를 하면서 개인적으로 느낀것도 많고 배운점도 많아서 정리할 내용이 꽤 많아진 것 같아 기쁘다.

☺️ Liked (좋았던 점)

새로운 기술 스택 사용

이번 프로젝트에서는 주요 스택으로 React, TypeScript 를 비롯해 새로 Emotion과 Redux-toolkit을 사용해보기로 했었다. Redux-toolkit은 이전 프로젝트에서 한번 사용해보려고 공부를 했었던 기술이고, Emotion은 내가 자주 사용하는 Styled-Components와 사용법이 비슷하다고 해서 팀원과 함께 논의를 한 후에 도입하기로 했다.

실제로 사용해 보니 Emotion은 그렇게 어렵지 않게 익숙해 질 수 있었다. Styled-Components 와 비슷하게 쓸 수 있는 @emotion/styled 패키지도 있었지만, 이번 프로젝트에서는 객체형태로 사용했다. Redux-toolkit도 직접 사용해보니 훨씬 편했다. 기존에 Redux를 사용했을때는 라이브러리를 사용하기 위한 보일러 플레이트 파일이 많았는데 확실히 Redux-toolkit을 사용하니까 조금 더 직관적으로 이해할 수 있었다.

계획한 것은 아니었지만 기능을 구현하면서 추가적으로 사용하게 된 기술들도 있었는데, 바로 Redux-persist와 React-Query 이다. Redux-persist는 다크모드 상태와 유저의 로그인을 확인하는 상태를 저장해두기 위해 사용했다. Redux는 페이지가 새로고침 되는 경우 store에 저장된 값이 초기화 되기 때문이다. React-Query는 좀 더 효율적인 코드 작성을 위해 팀원분이 먼저 사용해보고 추천해주셨는데 실제로 내 코드에도 적용을 해보니까 엄청 편했다. 현재는 부분적으로 적용된 상태라 서버에서 필요한 데이터를 가져올때 useQuery를 사용하고 있고, 데이터를 수정하거나 삭제 한 다음 useQueryClient의 invalidateQueries를 사용해 데이터가 만료되었음을 알려주고 새로 데이터를 받아오는 방식으로 구현되어 있다. 나중에 찾아보니 데이터를 변경이나 수정할때는 useMutaion 을 사용해야 한다고 했다. 이 부분은 추후에 코드를 리팩토링하면서 변경해 볼 생각이다.

사실 이번 프로젝트에서 사용해본 새로운 기술들은 모두 내가 한번쯤은 시도해 보고 싶었던 것들이다. 이번 기회에 시도해 볼 수 있어서 좋았고, 잘 알지 못하고 시도한 기술도 있었지만 오히려 도전 과제를 받은 것 같아서 좀 더 의욕적으로 작업할 수 있었다. 나는 대부분 생각이 많은 편이라 코드를 먼저 짜보기 보다는 공식문서를 먼저 읽어보거나 사용법을 정리해 둔 글들을 먼저 읽어보는 편인데 이렇게 간단한 사용방법을 먼저 익힌 뒤 직접 프로젝트에 적용해 보면서 내가 필요한 부분을 더 공부해나가는것도 역시 좋은 방법인 것 같다.

꾸준한 PR 리뷰

PR 리뷰는 지난 프로젝트때 시도했지만 잘 되지 않아서 아쉬웠었는데, 이번 프로젝트에서는 꾸준히 리뷰를 주고받을 수 있어서 좋았다. 내 코드를 다른 사람이 본다는 게 조금 부끄럽기도 하고 민망했지만, 막상 리뷰를 받으면 내가 미처 체크하지 못했던 부분들과 해당 기능을 구현하는데 있어 더 나음 방법을 추천받기도 해서 굉장히 유익한 시간이었다. 나도 다른 팀원분의 코드를 읽으면서 어떤 기능을 어떻게 구현했는지 이해하려고 노력하면서 새로운 것들을 배우기도 하고 내가 생각한 궁금증이 있으면 리뷰를 달기도 하면서 서로에게 도움이 되는 리뷰를 하려고 노력했다.

역시 PR 리뷰에 있어서 가장 도움이 되는 점은 다른 사람의 코드를 읽고 궁금한 점이 있다면 바로 리뷰 코멘트를 달 수 있다는 점이다. 처음에는 팀원이 쓴 코드를 읽는 데 시간이 정말 오래 걸렸다. 프로젝트 초반이라 코드를 작성하는 서로의 습관을 잘 모르기도 했고 내 경우에는 다른사람의 PR을 읽고 리뷰를 하는게 처음이라서 더 그랬던것같다. 독서를 많이 하면 독해력이 늘어나듯이 코드를 많이 읽으면 읽을 수록 코드를 빨리 읽고 이해하는 능력이 좋아지는 것 같다. 어느정도라고 수치화 해서 말할수는 없지만 프로젝트 초반보다는 여러 코드를 읽는 능력이 조금은 더 나아졌다고 생각한다.

자기객관화

이번 프로젝트를 하면서 내가 어떤 점이 부족한지, 어떤 내용들을 더 공부해야하는지 이전보다 좀 더 명확하게 알게 되었다. 이전에는 내가 공부를 더 해야겠다는 생각은 했지만 어떤 면을 더 발전시켜야 할지 고민이 되었었다.

하지만 이번에 프로젝트에서 역할을 맡아 진행해 보면서 몇가지 느낀 점이 있다. 나는 자꾸만 지금 현재 알고 있는 지식으로만 기능을 구현하려고 한다. 그러니까 익숙한 방식으로만 코드를 자꾸 짠다는 뜻이다. 하지만 이런 방식으로 작업을 하다보니 빠진 내용이나 요구사항이 전부 구현되지 않는 부분도 있었다. 그리고 한 파일에 너무 많은 내용이 담겨 있었기 때문에 나중에 수정해야할 부분들을 찾을때 문제가 되기도 했다.

😢 Lacked (아쉬웠던 점)

새로운 기술 스택의 미숙함

새로운 기술들을 사용해서 좋았지만 사용이 미숙해서 원하는대로 기능들을 구현하는데 평소보다 시간이 많이 걸렸다. 여러가지 에러를 맞닥뜨렸지만 가장 힘들었던 것들 중의 하나는 Emotion의 Theme 기능을 설정하는 부분이었다. 이전에 사용하던 Styled-Components와 사용법이 비슷하면서도 달랐고, 검색해본 자료들도 내가 원하는 방식으로 구현된 내용이 아니었기 때문이다. 물론 타입스크립트를 사용하기 때문에 발생한 문제여서 따로 파일을 생성해 타입을 설정해주니 해결되었다.

또 다른 문제는 중간에 도입하게 된 Redux-persist와 React-Query 였다. Redux-persist는 도입을 결정하기로 생각하는데에 시간이 오래걸렸다. 어떤 state 들을 로컬 또는 세션 스토리지에 저장해 둘지 고민하는 것 때문이었다. React-Query의 경우에는 동작 방식을 이해하는데에 꽤 오래 시간이 걸렸다. 아마도 직접 해보지 않고 먼저 글로 내용들을 읽어보았기때문에 오히려 더 어렵게 느껴진것같다.

일정 계획의 오류

팀원분과 의논해서 전체적인 일정을 잡았지만 초반에 생각보다 작업 진행이 원활하지 않았다. 내가 작업하던 부분 내에 오류가 있기도 했고, 디자인 작업이 조금 밀리면서 예상했던 일정보다 조금씩 지체되었다. 또 중간에 코로나에 걸리는 바람에 몸이 좋지 않아서 거의 1주일 정도는 예상했던 작업량의 절반도 못했던것같다. 그래서 예상했던 일정보다 프로젝트 일정이 거의 2주정도 밀리게 되었다. 예상하지 못한 상황들을 대비해서 조금 더 조절해서 일정들을 짰어야 했는데, 많이 아쉬운 부분이다.

최적화 되지 않은 코드

일정이 조금 늦어지다 보니 기능을 구현하는 데 급급해서 최적화를 더 신경쓰지 못했다. 코드의 가독성, 기능의 최적화, 명확한 역할에 따른 파일 분리 등 이런 부분들이 잘 되지 않았다. 가능하면 리팩토링을 하면서 정리해보고 싶다.

디자인에 대한 집착

정말 매번 기능에 더 신경을 써야 한다고 다짐하는데, 정돈이 안된 페이지를 보고 있으면 견디기가 너무 힘들다…🥲 그래서 이번에도 디자인을 맡겠다고 했지만 최대한 간결하게! 보기 불편하지만 않도록! 그리고 반응형을 고려함! 이 정도 요구조건만을 생각하고 작업했다. 하지만 생각보다 시간이 오래 걸렸고 또 자꾸만 만족할 수가 없어서 이쯤에서 그만둬야 한다고 생각했는데 더 시간을 들이게 됐다. 다음번에는 정말, 정말, 정말 디자인보다 기능에 더 집중하려고 한다…

더 많은 소통을 위한 적극적인 노력

이전 프로젝트때 많은 소통으로 원활했던 프로젝트를 하면서 소통의 중요성을 느꼈는데, 막상 이번 프로젝트에서는 팀원들에게 더 적극적으로 다가가거나 소통하지 못했던것 같아서 개인적으로는 좀 아쉬운 부분이다. 나와 다른 방식으로 공부한 사람들, 또 다른 직군에 있는 사람들과 함께 프로젝트를 한다면 새로운 것들을 많이 알아갈 수 있는 기회이기도 한데 조금 더 적극적으로 소통을 시도 해 봤어야 했다는 생각이 좀 든다.

😮 Learned (배운 점)

클라이언트 로그인 로직에 대한 정리

이번에 로그인 파트를 맡으면서 클라이언트 쪽에서 JWT 토큰을 사용해 어떻게 로그인 처리를 하는지 잘 정리해 볼 수 있었다. 단순히 로그인 요청을 보내고 쿠키 등을 사용해 로그인을 처리하는 것 뿐만 아니라 로그인을 어떻게 유지 시키는지, 언제 로그아웃이 되고 토큰 만료 처리를 해야하는지에 대해서도 이해하게 되었다.

컴포넌트화의 중요성

파트를 나눠서 작업하면서 반복적으로 사용하게 되는 함수나 컴포넌트들이 있었다. 잘 분리해 둔 컴포넌트들은 다른 페이지나 기능에서 유용하게 활용할 수 있었지만, 한 페이지에 쭉 작성하고 분리하지 않은 함수들은 재사용 측면에서 효율이 떨어졌고 결과적으로 깔끔한 코드를 작성할 수 없었다. 추후 리팩토링을 할때 최대한 컴포넌트화를 잘 해보려고 생각하고 있다.

🤔 Longed for (앞으로 바라는 점)

메모는 꾸준히

프로젝트를 몇번 하면서 느낀거지만 작업을 하면서 블로그까지 쓰는건 너무 어려운 일인 것 같다. 그래서 이번 프로젝트때는 노션에 그날 배운것들을 정리만 잘 해두자고 생각했는데 막상 정리해보니 빠진 것들이 정말 많다. 정말 어려웠지만 결국 해결한 에러들도 기록해두지 않아서 조금 아쉽다. 다음 프로젝트때는 내가 참고했던 링크라던지 에러가 났던 화면들 정도는 그때그때 캡쳐해둬야겠다.

질문하기 전에 먼저 시도하기

질문을 하기 전에 내 로컬환경에서 할 수 있는 테스트를 모두 해보고, 관련된 자료가 있다면 한번 더 확인하고, 그리고 구글링을 하면서 해결 방법을 알아본 뒤에 그래도 안된다면 어떤 문제가 있고, 내가 어떻게 해결하려고 시도를 했는지 정리해서 질문을 하는게 좋은것같다. 앞으로는 조금 더 꼼꼼하게 정리하도록 해봐야겠다.

일정 정리는 우선 순위를 먼저 정하기

작업의 우선 순위를 먼저 정하고 그 순서와 내 작업 속도를 고려해서 일정을 정리하는 것이 좋을 것같다. 그리고 단순히 언제부터 언제까지 같은 느낌으로 대략적인 일정을 짰다면, 실제로 작업에 들어가기 전 해당 기간 동안 하루에 어느만큼 작업을 해야하는지까지 정리를 해두는 것이 좋겠다.

💡좀 더 발전시키고 싶은 기능 또는 고도화 해보고 싶은 기능

• 자동 로그인
• 소셜 로그인
• PC 설정에 따른 다크모드 설정

😎 간단한 마무리 소감

이번 프로젝트를 하면서 많은 문제가 있었다. 끊임없이 반복되는 CORS 에러라던가, 알 수 없는 Type으로 인한 오류들 등 그때 당시에는 해결하기 위해 정말 노력하고 애를 썼었다. 그래도 이전보다는 조금 더 성장하지 않았을까? 그런 생각이 들어서 이번 프로젝트는 정말 많이 뿌듯하다. 또 이전부터 해보고싶던 기술 스택들도 사용해 볼 수 있었고 꼭 해보고 싶던 로그인과 배포 부분도 부분적으로는 참여할 수 있어서 좋았다. 프로젝트를 몇번 해보면서 좋은 프로젝트는 역시 느낀점이 많은 프로젝트가 아닌가 생각하는데, 이번 인터뷰 연구소를 만들면서 느낀점이 정말 많았기 때문에 나에게는 꽤 의미가 있는 프로젝트가 된 것 같다.