ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 2주 프로젝트 회고 - 배운 점, 아쉬운 점
    thoughts 2019. 9. 15. 22:12

    미래에 있을 프로젝트를 위하여, 2주 프로젝트에서 겪었던 시행착오를 간략하게 정리해보고자 한다.

     

    지난 수요일. 2주 프로젝트가 끝이 났다. 나는 프론트단을 담당했다. 짧은 시간이었지만 하나의 어플리케이션을 완성하기 위해 온 정성을 쏟았다(얼마나 신경을 썼던지, 살이 3키로나 빠졌을 정도였다). 체력은 모조리 소진되었지만 덕분에 많은 것을 배울 수 있었다. 단순히 지식적인 면 뿐 아니라, 노하우를 익힐 수 있었다는 점에서 정말 영양가 있는 시간이었다.

     

    2주 프로젝트, 무엇을 배웠나?

      1. 앤트 디자인(antd)을 자유자재로 적용할 수 있게 되었다!

     이번 프로젝트에서는 팀원의 강력 추천으로 antd를 써 보게 되었다. '다 꾸며져 있어서 갖다 쓰면 된다더라'는 말에 혹했다. 다 꾸며져 있는 건 사실이었지만, '그냥 갖다 쓰기'에는 시행착오가 참 많았다. 지금까지 디자인 프레임워크를 써 본적이 없었던지라 더 서툴렀던 것 같기도 하다. 가령 Form 컴포넌트의 경우 antd에서 제공하는 기능을 충분히 활용하려면 HoC 패턴을 사용해야 했는데, 그걸 미처 몰랐던 나는 엉뚱한 곳에서 있지도 않은 메소드를 호출하는 등의 삽질을 한참이나 했었다. 하지만 익숙해지니 신세계가 열렸다. UI 면에서, 내가 상상했던 거의 모든 기능들이 이미 antd에 마련되어 있었다. 특히 사진 업로드 컴포넌트와 카드 컴포넌트 덕분에 디자인에 쏟을 시간을 크게 절약할 수 있었다. 

     디자인 프레임워크를 직접 써 보기 전에는 자유도 면에서 제약이 크지 않을까 막연한 걱정을 했다. 이미 마련되어 있는 컴포넌트를 가져다 쓴다는 개념 때문이었다. 하지만 antd 컴포넌트들에 내장되어 있는 프로퍼티가 다양했던 덕분에, 처음에 계획했던 모든 기능을 무리없이 구현할 수 있었다. 누군가 다음에도 토이 프로젝트에 antd를 쓸 의향이 있냐고 묻는다면 주저없이 yes라고 대답할 수 있다.

     

    2. 리액트 라우터를 언제, 어떻게, 왜 쓰는지 알게 되었다.

     이번 프로젝트에 돌입하면서 가장 자신이 없었던 부분 중 하나가 리액트 라우터였다. 두어 번 써 본 경험은 있었지만, 여전히 알쏭달쏭한 부분이 많았기 때문이었다. Link는 뭐고, Switch는 또 뭐고, Route와 Router의 차이는 또 뭔지... 명확한 개념을 잘 파악하지 못하고 있었다. 이런 상태에서 프로젝트를 시작했고, 그 결과 무지하게 삽질을 했다. 분명히 url은 바뀌는데 페이지는 안 넘어간다던지, 리다이렉트가 안 된다던지 하는 문제를 몇 번이나 겪었다. 하지만 그 지난한 삽질 덕분에 이제야 리액트 라우터를 이해하고 쓸 수 있게 된 것 같다. 

     

    3. 아키텍쳐의 중요성을 배웠다.

     말이 '2주' 프로젝트지, 우리 팀에 주어진 시간은 사실상 열흘 뿐이었다. 처음 이틀은 설계, 팀 프로젝트를 위한 세팅을 하느라 보냈고, 그 다음 하루는 린터 에러를 고치느라 고생을 했다. 그러고 나니 일주일이 남아 있었다. 마음이 바빴다. 설계가 조금 미흡하다는 사실을 알면서도 급한 마음에 코드부터 쳐 내려가기 시작했다. 부족한 설계도를 가지고 집을 짓기 시작하니 문제가 끊임없이 발생했다. 생겨난 에러를 '돌려막기' 식으로 해결하기 위해, 계획에도 없는 스테이트와 라우터를 자꾸만 만들었다. 미봉책을 자꾸 끌어다 쓰다 보니 결국 남은 건 못생긴 코드였다. 함수형 컴포넌트, 클래스형 컴포넌트, 훅스가 마구 섞여 있었고, 라우트와 스테이트 관리는 엉망이었다. 

     결국 기능 구현은 잠시 쉬어 두고 전체 코드를 다시 리팩토링을 하는 시간을 가졌다. 쓸모 없는 라우터는 없애고, 데이터 흐름을 다시 정리하여 꼭 필요한 경우에만 스테이트를 만들어 주었다(여담이지만 다음에는 꼭 리덕스를 쓸 것이다 부들부들..). 폴더 구조도 개편하여 페이지와 컴포넌트를 분리하였다. 깔끔하게 정리를 하니, 가독성이 좋아졌음은 물론이고 계속 해결되지 않던 페이지 리다이렉션 문제도 쉽게 해결할 수 있었다.

     급할수록 돌아가라는 격언이 얼마나 현명한 말인지 뼈저리게 체감할 수 있었던 시간이었다. 명확히 합의된 설계를 가지고 코드를 작성하기 시작했다면, 오히려 시간도 아끼고 효율도 높일 수 있지 않았을까 하는 아쉬움이 남았다.

     

    댓글

Designed by Tistory.