💡 코드를 나눴는데도 복잡한 이유는 뭘까?코드를 작성하다 보면 점점 길어지고 복잡해지는 순간이 옵니다.이때 "함수를 작게 나누면 코드가 더 깔끔해지겠지?"라고 생각하며 분리하지만,막상 나누고 나서도 복잡함이 해소되지 않거나 오히려 가독성이 떨어지는 경우가 많습니다. 이유는 무엇일까요?단순히 함수를 쪼갰다고 해서 코드가 더 나아지는 것은 아니기 때문입니다.이 글에서는 함수 분리의 흔한 함정과 더 나은 함수 분리 방법에 대해 알아보겠습니다.함수 분리를 했는데도 복잡한 이유여러 개의 역할(관심사)이 섞여 있다.아래 fetchData 함수는 "데이터 가져오기"라는 역할을 한다고 보이지만,사실 내부적으로 3가지 이상의 일을 수행하고 있습니다.서버에서 데이터 호출받은 데이터를 React 상태로 저장 (setDat..
Frontend Architecture
프론트엔드 개발을 하다 보면 UI와 로직이 섞여 복잡해지는 문제를 자주 마주하게 됩니다.예를 들어, 로그인 버튼의 위치만 변경하려고 했는데 로그인 로직까지 수정해야 한다면, 이는 코드가 제대로 분리되지 않았다는 신호입니다. 이런 문제를 해결하는 가장 기본적이고 효과적인 방법은 "한번에 한 가지 일만 처리하도록" 설계하는 것입니다.즉, 관심사의 분리(SoC, Separation of Concerns) 원칙을 적용하는 것입니다.관심사의 분리란?관심사의 분리는 각 코드가 특정 역할만 담당하도록 나누는 설계 원칙으로,이를 통해 우리는 "한 번에 한 가지만 걱정해도 되는" 구조를 만들 수 있습니다. 관심사가 명확하게 분리된 코드는 다음 두 가지 특징을 가집니다.낮은 결합도(Loose Coupling)→ 코드 간의..
