온보딩 프로젝트 후기 : 멀티 패러다임 프로그래밍을 통한 프론트엔드 클린코드

회사에 입사후 진행했던 온보딩 프로젝트를 마치고, 개발기를 회사 테크 블로그에 작성했었다. 회사 개발일정이 촉박해 정신없이 지내다가 1년이 지나고서야 이 글을 내 블로그에도 남기려 했던것이 떠올랐다.

온보딩 프로젝트 인데 왜 이렇게 거창한 이름이 붙게 되었나 하면, 이 프로젝트를 진행하면서 스스로 프론트엔드 개발을 어떤 마음가짐으로 임하고 있는지 깨달았던 시간이었기 때문이라고 생각한다. 이 글에서는 객체 지향적인 설계 관점과 컴포넌트 주도 개발, 클린코드등 다양한 내용에 대해 이야기 하는데, 결국 이러한 것들은 모두 클린한 코드와 아키텍쳐를 유지하기 위해 사용되는 다양한 방법들 이라는 것이다.

단순히 프로젝트를 마치기 위해, 한번 쓰고 버려질만한 코드를 작성할수도 있었을 것이다. 그렇게 하는게 당장에는 조금더 빠를지도 모른다. 캔버스를 다루기 위한 로직을 단순히 컴포넌트 안에서 여러 상태 변경과 side effect 로 점칠해가며 구현 하더라도, 번거로운 설계를 하지 않으니 구현 속도는 유리할수가 있다. 하지만, 조금이라도 내가 요구사항을 잘못 이해했거나 작성한 코드에 버그가 있다면, 스스로 작성한 코드에 대해 문제점을 찾고 수정을 해야한다. 사람이든 AI 든 버그없이 완벽한 코드 작성이나 요구사항을 완벽하게 만족하는 코드를 작성하는것은 불가능 하기 때문에, 우리는 수정에 수정을 거듭 할수 밖에 없다.

그러다보면, 어느새 스파게티 같은 코드가 탄생하게 된다. 위의 상황이라면 컴포넌트 내부 코드는 캔버스 API 와 비즈니스 로직으로 점칠된다. 스스로 작성해놓고도 어쩌다 이지경에 도착했는지 알길이 없다. 이것이 전형적인 일회용 코드가 쌓이는 방식이라고 생각한다. 그렇다면 어떻게 우리는 어떻게 해야할까?

이런 문제를 해결하기 위해 클린 코드를 작성해야한다. 그런데, 그 클린 코드라는것은 꽤나 넓은 범위를 아우르는 개념이다. 때로는 단순히 코드의 배치만을 바꾸는것만으로 가독성이 올라가기도 하지만 설계가 완전히 뒤바뀌어야지 클린한 코드를 유지할수 있게 되기도 한다. 원래는 클린 코드를 작성하기 위한 개념에서 나온것이 아니지만, 그 목적이 클린 코드인 한가지 예시로는 클래스의 단일 책임 원칙이 있다. 클래스의 책임이 너무 커지게 두지 않는것이 클린한 코드를 유지하는 비결인 것이다. 때로는 동일한 요구사항을 구현하는데 더 많은 코드를 작성하게 될수도 있지만, 결과적으로 유지 보수가 쉬워지고 새 기능을 개발하는 시간을 단축시켜 준다. 집단의 생산력에 기여하는것이다.

어떠한 신규 기능 개발을 완료하는데 100 시간이 걸린다고 해보자. Naive 하게 개발한경우, 개발 30 / QA 70시간을 할애해야 에픽이 완료 된다. 클린코드를 지키며 적합한 설계를 통한 개발을 한다면 개발 70 / QA 30시간이 걸린다. 하지만 이후 또 다른 신규 기능을 추가하고 새로운 개발자가 합류한다면, 이 효과는 스노우볼이 된다. 회사 상황이 여의치 못해 수명이 짧은 프로젝트를 진행할것이 아니라면 클린 코드는 필수라고 생각한다. 그렇지만 개발자 구성원이 다같이 동참해야지 비로소 의미가 있는것 같다.

나는 이러한 다양한 패러다임의 코드 작성법과 다양한 프론트엔드 생태계의 툴 들이, 클린한 코드를 유지하는것에 많은 관여를 한다고 느꼈다. 코드는 사람이 작성하기 때문에 사람이 이해하기 쉬워야 한다. 만약 사람이 이해하는게 중요치 않다면 극단적인 예시로 모든 변수명을 짓는데 고민할 필요없이 몇가지 규칙을 정해놓고 숫자값을 하나씩 올려서 정해도 될것이다. (실제로 그렇게 하는곳도 있긴하다.) 가장 단순하고 빠르게 구현가능한 방법으로 개발을 마무리하고, 다음에 이 기능이 수정되어야할때 처음부터 다시 작성해도 될것이다. 파일도 여기저기 구분할 필요없이 한 파일에다가 여러 로직을 묶어놓으면 여기저기 탐색할 필요도 없다. 그냥 소스만 줄줄이 읽으면 된다. 그렇지만 이렇게 하면 읽는 사람만 스트레스인건 누구나 다 아는 사실이다. 이렇게 코딩하다보면 이 스트레스는 필연적으로 본인에게 돌아오게 되어있다.

자바스크립트는, 클린코드를 작성하기 위한 다양한 패러다임의 프로그래밍과 찰떡이다. 태생이 멀티 패러다임 프로그래밍은 자바스크립트는 같은 결과물이라도 다양한 방법으로 작성할수 있다. 이런점들이 현재의 프론트엔드 생태계를 만들고 있고, 프론트엔드 생태계는 가장 효율적인 방법을 향해 발전중이라고 믿는다.

내용은 회사 테크 블로그에 자세하게 작성했으므로 링크를 첨부하는것으로 마무리 하려고 합니다.

온보딩 프로젝트 개발기 - 1부 · 블로그 - 데이터메이커

온보딩 프로젝트 개발기 - 2부 · 블로그 - 데이터메이커