Dev. (12) 썸네일형 리스트형 [실전] 프론트 기존 컴포넌트를 개선한 경험 공유 제가 '내부에 개발자가 필요한 이유, 리팩터링'(링크)에서 리팩터링을 틈틈이 하는 것이 좋다고 결론을 내렸었습니다. 최근에 회사에서 작업을 하면서 리팩터링도 함께 진행했었는데요. 그에 대한 경험을 간략히 정리해보고자 합니다. 목차 왜 리팩터링을 결심했나요? 테스트 코드 부터 역할분리 새롭게 만들 컴포넌트 설계 테스트 코드 통과 마무리 왜 리팩터링을 결심했나요? 기획의 요구사항만 만족하면 일은 끝났지만, 리팩터링을 해야겠다고 판단한 이유는 아래와 같습니다. 😫 기존 코드가 너무 복잡하다 forwardRef 컴포넌트를 불필요하게 사용 그로 인해 데이터 흐름이 역행하는 경우가 발생 ↩ global 상태를 사용하지 않아도 될 곳에서 global 상태를 사용 ❌ 모듈의 역할분리가 안됨 🗂 컴포넌트간 강하게.. TDD 는 코드 설계를 위한 도구이다. 저는 언제부터인가 '어떻게 하면 코드의 품질을 좋게하고, 서비스 안정성을 높일 수 있을까?' 라는 고민을 가지게 되었습니다. 여러 방법중 TDD라는 개발 방법론에 관심을 가지게 되었고, TDD를 공부하게 되었습니다. TDD에 대한 회의적인 시각이 많았는데요. 저는 오히려 TDD를 긍정적으로 보는 입장입니다. 왜 그런지 이번 글을 통해 정리해보겠습니다. 목차 들어가기 전에 TDD가 테스트를 위한 거라고? 왜 좋은 코드가 만들어 지는데요? 그래! TDD 한번 해보자! 우리가 얻은 이점! 테스트 커버리지 100%? 마무리 들어가기 전에 이 글에서는 범위를 2가지로 좁혀보겠습니다. 프론트에 대한 TDD 우선 프론트단에서의 TDD를 이야기 할겁니다. 그 중 가장 인기 있는 React 를 기반으로 한 예제를 다.. 리팩터링 할려고? 그래.. 테스트코드는 있고? 리팩터링을 무작정 하는 것보다 테스트 코드가 작성되어 있는 상태에서 하는 것이 개발시간을 줄이는 방법입니다. 리팩터링을 한다는 것이 기존의 복잡한 코드를 수정해서 개선하는 일인데, 수정한 코드가 정상적으로 돌아가는지는 일일이 테스트를 해보는 수 밖에 없습니다. 이런 부담감을 줄이기 위해서는 테스트 코드가 필요로 합니다. 목차 리팩터링이 주는 부담감 테스트 주도 개발 TDD 필터를 리팩터링 해본 실전 테스트 코드 작성 방법 테스트 코드 구축의 기본! 모킹 마무리 리팩터링이 주는 부담감 개발자 모두 리팩터링이 얼마나 중요하고, 어떤 효과를 주는지는 알고 있습니다. 하지만 개발자조차도 리펙터링은 무섭습니다. 특히 코드끼리 독립적이지 않고 서로 얽혀 있다면, 부담감은 가중됩니다. 좋은 뜻으로 기존 코드를 깨.. 기술부채 잡는 품격있는 클린코드 똑같이 동작한다고 해서, 다같은 코드는 아닙니다. 코드도 품질이 있습니다. 좋은 품질의 코드는 가독성이 좋고, 유연하며, 응집도가 높고, 결합도가 낮습니다. 이런 좋은 품질의 코드를 작성하기 위해서는 기준과 방법을 공부할 필요가 있습니다. 이 글을 시작으로 앞으로 클린코드에 대해서 정리해보겠습니다. 목차 코드도 품질이 있다 발목 잡는 기술부채 뒤늦은 조치 좋은 품질의 코드란 클린코드를 살펴보다 마무리 코드도 품질이 있다 개발자가 아닌 이상, 대부분 🤷♀️ "어떤 코드든 기능이 돌아가기만 하면 됐지 뭐.." 라는 식의 사고를 많이 합니다. 저도 대학생시절 대외활동에서 기획자 역할을 맡았을 시 결과물만 나오면 된다는 생각으로 임했던 것 같습니다. 하지만 눈으로 보이는 게 다가 아닙니다. 눈으로 보이는 .. 이전 1 2 다음
