항해플러스 프론트엔드 5기 4주차 회고

들어가며

4주차 과제는 더티코드 개선하기!! 생각보다 양이 많아서 놀랐던 과제였다. 쉬운줄 알았지만 절대 쉽지 않았다. 이번에 배운 것을 토대로 더 가독성 좋고 협업하기 좋은 코드를 작성하는 것을 목표로 해야겠다는 생각이 들었다.

💩 1. 더티코드 개선하기 (basic 과제)

더티코드를 처음 접했을 때, 정말 보기 어렵고 어떻게 개선하면 좋을지 고민이 많았다. 특히 가독성과 일관성에 초점을 맞춰서 개선해보려고 했다. 회사에서 협업을 할 때, 무엇보다 가독성이 좋고 역할이 명확히 분리된 코드가 협업하기 좋은 코드라는 생각을 많이 했었다. 하지만 개발에 집중하다 보면 그런 부분을 놓치고, 결국 시간이 남을 때 리팩토링할 수밖에 없는 경우가 많았다. 그런데 이런 시간은 생각보다 자주 주어지지 않았다. 그래서 아예 초반부터 나만의 규칙을 정해 “이건 꼭 지켜야 한다”는 인식을 가지고 개발하는 것이 중요하다는 걸 이번 과제를 통해 다시 느꼈다. 한 파일 안에 지저분하게 엉켜 있던 코드들을 역할에 맞게 나눠주는 것이 가장 중요하다고 생각했고, 아래와 같이 폴더 구조를 정리했다.

처음부터 이렇게 정리되어 있던 것은 아니다.
처음엔 리액트로 변경할 가능성을 고려하지 않고 개발을 진행했어서, 이후 점진적으로 개선을 해 나갔다.

1. createElement로 작성한 부분을 innerHTML 기반으로 바꿔 리액트 전환 시 좀 더 수월하게 변경할 수 있도록 했다.
2. state를 만들어 여러 곳에서 상태를 중복으로 관리하지 않고, 하나의 중앙 상태에서 관리되도록 했다.
3. 계산 및 할인 관련 로직은 각각 별도로 분리하여 역할 중심으로 나누는 데 초점을 뒀다.

코드를 더 클린하게, 완벽하게 리팩토링하는 일은 정말 끝이 없는 것 같다. 계속해서 리팩토링하며 기본과제에 시간을 많이 쓰고 있어서, 완벽하진 않아도 내가 정한 나만의 기준 가독성 좋은 코드인가?,협업하기 좋은 코드인가?를 고려했을 때 많은 부분 개선을 한 것 같아 그 다음 심화 과제인 기술 고도화 작업으로 넘어갔다.

⚛️ 2. React,TS로 바꾸기 (Advanced과제)

심화 과제는 기본 과제에서 작성한 코드를 React + TypeScript로 고도화하는 작업이었다. 우리 팀은 심화과제에 들어가기 전에 zep에서 만나 회의를 하며우리만의 컨벤션을 정했다. 간단하게 정리해보면 아래와 같다.

📋 6팀 코드 컨벤션

1.명확하지 않은 단어는 축약어쓰지말고 정확한 단어 써주기 / 목적이 불분명한 변수명 지양하기
1. 전체 컴포넌트는 function, 내부 함수는 const로 선언
2. 목적이 비슷한 함수들 util등 폴더로 만들어서 관리하기
3. 간단한 설명주석 붙이기!
4. var 사용 지양 → const, let 사용
5. 띄어쓰기 잘해주기!
6. 함수 상단에는 JsDoc으로 한줄 설명 넣기
7. 의미 있는 상수 선언
8. 가능한 한 함수는 단일 책임 원칙(Single Responsibility Principle)을 지킬 것
9. node는 $를 붙여 elements라는걸 암묵적으로 사용함
10. 모든 파일/폴더 이름 - 사용하기
11. 함수 네이밍 규칙

최대한 이 부분을 고려해서 코드컨벤션을 지키며 개발을 진행하려고 했다. 그리고 기본과제에서 나눈 부분을 고려해서 폴더를 나누고 react,ts로 변경하는 작업을 했다.

basic에 있는 폴더구조와 크게 다르지 않게 하려고 했지만, 다르게 할 수밖에 없었던 부분도 있었다.

1. basic/ui → advanced/components

UI를 생성했던 template 기반 코드들은 컴포넌트 단위로 분리해서 components 폴더 하위로 나눴다.

1. 기본 과제에서 로직 안에 있던 함수들은 hook으로 분리하거나, zustand의 useCartStore 안으로 이동시켜 장바구니 관련 상태를 집중시켰다.
2. 중앙 상태 관리를 zustand로 일원화해 전역 상태를 보다 체계적으로 관리할 수 있도록 했다.

심화 과제를 하며 리액트의 편리함을 다시 한번 느꼈다. JS에서는 새로운 UI 요소를 갱신하거나 추가할 때 DOM 조작이 수반되어 번거로운 반면, React는 컴포넌트와 선언형 UI를 기반으로 훨씬 더 직관적이고 깔끔한 코드를 작성할 수 있게 해준다. 또, 처음으로 zustand를 활용해 상태를 관리하면서, 장바구니 추가/제거/계산 등 주요 로직들을 모두 이곳에서 처리하니 유지보수가 훨씬 더 쉬워졌다는 점이 인상 깊었다.

무엇보다 이번 과제에서 가장 좋았던 점은,팀원들과 함께 컨벤션을 정하고, 좋은 코드란 무엇인지 고민하며,실제 코드에 적용해 본 경험이다. 회사에서 일할 때는 늘 바쁘게 개발만 하다 보니 내 코드가 얼마나 협업에 적합한지, 얼마나 클린한지 돌아볼 기회가 적었는데, 이번 기회를 통해 그동안 놓쳤던 중요한 부분들을 많이 깨닫게 됐다.

앞으로도 좋은 코드, 클린 코드를 만들기 위해 항상 장인정신을 가지고 개발에 임하고 싶다. 그리고 이번에 배운 것들을 단순한 기술이 아니라 ‘습관’으로 체화해 나가고자 한다.