프로젝트를 마치며

2주 반의 기간동안 프로젝트가 끝이 났다. 이번 프로젝트에서도 아쉬운점과 잘했던점이 같이 존재했던 만큼 이번에도 간단하게 회고를 해보려고 한다.

배운 기술

이번 프로젝트에서는 새로운 추가기능을 거의다 담당하면서 새로운 라이브러리와 기능을 많이 접하고 공부했다.

내가 구현한 추가기능
1. 컬러 피커
2. 드래그 앤 드롭
3. 가로 스크롤
4. 다크 모드/ 언어 변환
5. 무한 스크롤

이렇게 적어보니 생각보다 많다. 물론 여기에서 무한 스크롤이나 다크모드/ 언어변환은 기존에 알던 기능으로 구현이 가능했다. 하지만 나머지 기능은 새롭게 배운 내용들이다.

컬러피커

기존의 라이브러리가 잘 구현되어 있었고 쉽게 커스텀이 가능해서 참 좋았다. 앞으로 프로젝트에서 컬러를 사용자가 커스텀하는 기능을 추가한다면 다시 사용하고 싶다. 들인 시간대비 퍼포먼스가 좋달까... 가성비가 좋았다.

드래그 앤 드롭

드래그 앤 드롭은 이런 일정 관리 서비스에서 필수라고 생각해서 추가한 기능이다. 해당 기능을 100%구현한것은 아니다. 나는 마우스 이벤트를 통해 api요청을 보내는 것을 구현했다. 그리고 요청받은 데이터를 렌더링하는 부분은 다른 팀원분이 담당해주셨다.

구현 자체는 크게 어렵지 않았다. 하지만 약간 힘들었던 것은 여러 컴포넌트로 이뤄진 페이지다 보니 ref값을 지정하고 컨트롤하는 것이 익숙하지 않았던것 같다. 이번에는 WEB API를 사용해서 구현했지만 다음에는 라이브러리를 사용해서 구현해보고 싶다.

가로 스크롤

가로 스크롤은 구현할 계획이 없었지만 css로 스크롤을 삭제한 이후에 대시보드 기능 구현하면서 스크롤이 가로에 생성되면서 구현해야겠다는 생각이 들었다. 사용자가 트랙패드나 가로 스크롤이 있는 마우스를 사용하지 않으면 아예 옆으로 이동이 불가능한 문제가 있었기 때문이다.
구현 자체는 크게 어렵지 않았다. 마우스의 클릭 이벤트를 통해 마우스의 현재 위치와 이동한 위치를 계산해 움직일 영역의 포지션을 움직여주는 것이다.

약간 힘들었던 부분은 기존의 드래그앤 드롭 이벤트를 구현하면서 드래그 이벤트가 겹치는 것이었다. 다행히 해결법을 찾아 해결했다.

다크모드/언어변환

해당 기능은 기존에 사용하던 context를 만들어서 구현했다. 우선 해당 값이 변경됬을때 모든 컴포넌트에서 리렌더링이 필요하기 때문에 리덕스로 관리하지는 않았고 간단하게 context값으로 만들어줬다.

약간 힘들었던 부분은 모든 페이지와 컴포넌트에 테마와 언어값을 전부 내가 설정하느라 힘들었다. 원래 이렇게 일일히 변경을 해줘야하는지 약간 의문이다. 뭔가 더 효율적인 방법이 있지 않을까 고민이 된다.

무한스크롤

무한 스크롤을 직접 구현한것은 아니다. 하지만 유의미했던 것은 내가 알고 있는 지식을 팀원에게 공유해서 팀원이 해당 기능을 구현했다는 것이다. 물론 내가 전부를 알려주고 이해시킨것은 아니지만 내가 도움을 준것은 확실하다.

이후에 나도 스크롤 기능을 사용하기도 했다.

아쉬운점

연산 로직 구현 부족

위에 내가 구현한 기능들은 간단한 코드들이다. 물론 프론트엔드 개발자에게 엄청난 연산을 요구하는 기능이 없긴하다. 하지만 리덕스나 리코일같은 전역변수 라이브러리는 복잡한 편이다. 이 부분을 내가 해보지 못해 아쉽다. 다행히 팀원분이 잘 구현해주셔서 좋았다. 약간 아쉬운 부분은 내가 용기내서 해봤다면 어땠을까 싶은 것이다. 이 기능을 해보지 못해 내가 다른 추가기능을 전부 책임지긴 했다.

그래서 아쉬운 점을 타파하고자 next-auth를 공부해보기로 했다. 현재 서비스에서 아쉬운 점이 로그인 시에 보안이 너무 아쉽다. 그래서 약간 보안성을 높여보고, 나름의 연산과 api처리를 연습해보고 싶다.

다음 프로젝트에서는 내가 전역변수 라이브러리나 인증 부분을 맡아보고 싶다. 처음엔 힘들겠지만 나중에는 많이 남지 않을까...

깔끔한 로직

내가 많은 코드를 작성했지만 내가 과연 깔끔하고 온전한 코드를 작성했는가는 자신없다. 다행히 기능 구현에는 문제도 없고 팀원분들도 내 코드를 읽고 사용하는데에는 문제 없었다. 하지만 더 깔끔하고 가독성 좋게 코드를 작성할 수 있지 않을까하는 생각이 든다.

처음 코드를 작성한 그대로 끝난건 아니다. 중간중간 리펙토링을 진행하고 피드백을 전부 수정하긴 했다. 그래도 아쉽다 아쉬워..!

잘한점

확실하게 하나를 고를수 있다. 저번 프로젝트에서는 내 코드를 읽고 사용하는 방법을 익혔다고 확신한다. 이번 프로젝트에서는 팀원의 코드를 읽고 사용하는 경험을 익혔다. 특히 이번 서비스의 경우에는 여러 페이지로 구성되어 있다기 보다는 다양한 컴포넌트를 이용해 조합하는 경우가 많았기 때문에 더욱 그랬다.

이걸 확실하게 느낀것은 프로젝트 마지막에 리펙토링을 진행하면서 느꼈다.

이미지에서 드롭다운 메뉴는 내가 구현한 컴포넌트는 아니다. 하지만 배포를 하면서 리스트를 보여주는 부분에서 스크롤 기능이 구현되지 않아 나름 버그가 있었다. 내가 무한 스크롤에 자신있었기 때문에 내가 리펙토링을 자처했다.

물론 처음에는 힘들었지만 코드를 읽고 팀원이 왜 이렇게 코드를 작성했는지, 어떻게 기능이 동작하는지를 확인할 수 있었다. 지금은 잘 동작한다! 참 뿌듯했던 순간이었다.

마무리

프로젝트 시작전에 팀원의 말 한마디가 생각난다. 코딩하는게 게임하는것 같다는 것이 말이되나 싶었다. 하지만 이번 프로젝트를 하면서 어떤 기분인지 약간 이해가 됬다. 게임을 좋아하는 입장에서 메인 기능을 구현하는 것은 메인 퀘스트 느낌이고 리펙토링하는 것은 서브 퀘스트 느낌이다. 서브지만 결국 메인 스토리에 영향을 끼치는 중요한 부분이랄까...

암튼 2주 기간이 참 짧았던것 같다. 팀원 운이 좋았던 것도 있었다. 모두가 열정적으로 참여해줬고 소통이 잘됬다. 심지어 다음 팀에서 실망할까봐 걱정이다. 하지만 좋은 선례를 익혀간다고 생각하면 된다. 다음 팀을 내가 이런 팀으로 만들어가면 된다.

다음 프로젝트가 빨리 시작되었으면 좋겠다. 혼자하는 것보다 훨씬 동기부여도 되고 진행속도가 붙으면 더 재밌어진다. 그리고 더욱 성장한 내 모습이 기대된다.

일단 여기서 끝이 아니라 남은 과제가 있다. 위에서 언급한 next-auth를 해야한다. 이 기능을 하면서 또 배우는 것도 있기에 기쁜 마음으로 배워야겠다.

앞으로도 화이팅..~