항해 플러스 프론트엔드 - 2챕터 회고

1. 먼저

이번 챕터의 경우 실질적으로 현재 업무에 가장 도움이 되는 과정이었던것 같습니다.
지금 담당하는 업무 중 하루에 1/4는 기존 솔루션 쪽 작업을 하는 수준으로 스파게티 코드를 항상 보고 있는 상황입니다.

코드에 사용된 변수가 해당 파일에서 선언하지 않은 경우도 많고, 파일간의 관계나 순서에 따라서도 오류가 발생하는 꽤나 과거에 개발된 방식으로 근 15년 간 쌓인 js파일들이 거의 한 폴더 내에서 십여개가 동작을 하고 있는데, 나름 빠르게 업무 파악하고 숙지하는 스킬을 가졌음에도, 로직 절반을 보는데에는 3주가 소요되었습니다.

나머지 절반은 일단, 제 업무와 직접적인 영향이 없는 코드 다 보니, 그때 그때 필요에 의해서만 찾아서 수행하고, 파악한 부분에 대하여서만은 보지 않고 설명이 가능한 진짜 담당자가 된 상태입니다.

따라서, 이번 챕터를 통해 최종적으로는 현업의 코드를 그나마 읽기 좋은 형태, 유지보수가 가능한 형태로 리팩토링하는 것이 되겠습니다.

챕터 구성

  • Chapter 2-1. 클린코드와 리팩토링
  • Chapter 2-2. 디자인 패턴과 함수형 프로그래밍
  • Chapter 2-3. 관심사 분리와 폴더구조

2. 챕터 목표

챕터를 진행하면서 느낌으로만 알고 있던 잘 정리된 코드, 읽기 쉬운 코드에 대한 명확한 개념에 대하여 알고자 목표하였습니다. 테오의 발제를 통해 매주 선배 개발자들이 고민해왔던 부분들과 현재의 프레임워크와 라이브러리들이 지향하는 부분들을 이해하였고, 그 결과로써 내가 어떻게 활용중인 단계가 된 것인 지에 대한 희미했던 것들을 명확하게 인지하는 것이 목표였습니다.

또한, 좋은 코드를 구성함에 있어서 가장 고민이 많이 되는 디렉토리 구조를 어떻게 정리하는 가에 대한 예시로 FSD를 구성해보면서, 파일들을 옮기기 쉬운 형태로 만드는 단일 책임의 파일들을 구현하는 경험 또한 좋았습니다.

블록화된 파일들을 처음엔 잘못된 위치에 있었더라도, 옮기는 공수 자체가 매우 적어질 수 있는 환경이 된 것 이 가장 큰 장점이었습니다.

항해 플러스 프론트엔드 - FSD

최종적으로 큰 프로젝트는 아니지만, 한 페이지 분량의 기능을 정리하면서 어느정도 개념에 대하여 알게되는 경험이 너무 좋았고, 특히나 만줄이 넘는 회사 파일들에 대하여 단일 책임 원칙은 우선적으로 반영해보려고 계획중에 있습니다.

3. 성취

이번 챕터 덕분에 코드를 잘게 쪼개놓았을때의 장점을 알게 되었고, 좋은 코드는 모나지 않은 코드, 누가 봐도 그렇구나하는 코드라는 것을 알게 되었습니다. 그간 너무 복잡하게 로직을 구현하는 것을 아닌가 했었는데, 복잡한 로직속에서도 분리할 수 있는 함수들을 큰 로직에서는 감추고, 결과를 예측가능하도록 함수를 구성하여 반환하도록 짜는 연습이 되었던것 같습니다.

4. 반성

2챕터 마지막 과제 중 tanstack query 사용에 대한 완전한 학습이 되지 않았습니다. 늘상 들어왔던 라이브러리 인데, 너무 소홀했던 것은 아닌가 합니다.

5. 추후 목표

다음 챕터부터는 여태까지 코치님들께서 작성해 주셔왔던 테스트 코드를 직접 작성하는 과정을 겪게 되는데, 이 때 현재까지 학습했던 부분들이 희석되지 않도록 노력하여 동일한 퀄리티로 깔끔한 코드를 보장하는 것이 목표입니다.

6. 유지할 강점

이번 쉬는 기간에도 2~3시간 씩은 코드를 읽고 개선작업을 진행했습니다. 다행히도 매일 코드를 봐도 질리지는 않는 것 같습니다.

항해 플러스 프론트엔드 - 항해 잔디
하루 펑크난 날은 시스템 이슈...

7. 개선할 약점

쉬는간에 잠시 2일마다 작성하기로 마음 먹었던 일일 기록이 멈췄었습니다. 코딩은 할 마음이 나는데 글을 주기적으로 쓰는 마음은 아직 정착하지 못한 듯합니다.

장문의 기술 연구를 위한 글을 쓰기 전에 먼저 블로그 글을 쓰는 것과 친해지는 것을 목표로 다시한번 이 항해 기간에 과제를 진행하며 느꼈던 점들이나, 봉착한 문제들을 써보도록 노력할 예정입니다.

0개의 댓글