객체지향 자바스크립트1

서론

최근에 추천을 받아 코드스피츠 강의를 찾아서 듣게 되었는데, 생각 이상으로 강의가 너무 좋아서 강의 하나당 1시간 반에서 2시간 정도 되는 꽤 긴 길이의 영상이지만 2편까지 내리 보게 되었다. 인프런에서 함수형 프로그래밍 강의도 신청해서 듣고 있는데 여튼 기회가 되면 함수형도 좀 다뤄보면 좋을 것 같고 여러 방식의 코드를 짜보는 게 내 코드를 더 발전시킬 것 같다는 생각이 들어서 나름의 현질(?)을 하게 되었다.

개인적으로 코드스피츠와 인프런 강의를 보면서 느낀 게 내가 지금까지 알고 있던 객체지향과 함수형 프로그래밍은 다 틀린 거였고 진짜 나는 코드를 막 짰구나 싶고 여러모로 반성을 많이 하게 되었다.

여튼 나는 함수형 프로그래밍이든 객체지향 프로그래밍이든 두 가지의 관점을 명확히 이해하지 못하고 value와 object를 마구 섞어 썼던 사람으로서, 어떤 것이 더 좋다고 말할 수는 없지만 중요한 것은 둘 중 하나라도 제대로 구현할 줄 안다면 현재의 나의 코드보다는 훨씬 더 유지보수 하기에 용이하고 코드 재사용성도 높일 수 있는 그런 코드를 짤 수 있을 거라는 생각은 확실하게 든다.

개인적으로 최근에 입사 과제도 여러 차례 수행했고 한 군데의 회사에서는 채점표도 받았는데, 약 10개월 간 혼자서 취준을 하면서(작년 이맘때 쯤부터 회사 다니면서 노마드 코더 영상 보면서 js를 익히기 시작했으니 자바스크립트 언어를 사용하게 된 지는 약 1년 정도 됐다고 볼 수 있다.) 작은 프로그램 하나 괜찮게 돌릴 수 없던 수준에서 (자잘한 버그들은 있지만) 그래도 기술서에 적혀있는 기능들을 나름대로는 충실히 돌아가는 작은 서비스 하나를 만들 정도가 되기까지 나름대로 컴퓨터 앞에서 얼굴 빨개져 가며 공부하고 만들고 실패했던 경험들이 있고, 그것들이 1년간 알차게 쌓였던 것 같다.

그치만 여전히 내 코드는 어디에 내놓기에는 조금 부끄러운 수준이고 지금 코드에서 더 나은 코드로 더 실력을 끌어올리고 싶다는 욕심(?)과 목표가 있다. 요즘에 느낀 건 내 코드가 여전히 클린 코드와는 조금 거리가 멀고 코드 재사용성 부분에서 많이 약하다는 점인데 그도 그럴 것이 일단 기본적으로 한 페이지를 만드는 데 웬만하면 거의 다 커스텀을 해버려서 전부 하드코딩 식으로 되어버린다는 단점이 있다.

일단 그 이유를 나름대로 생각하자면, 여러 개의 컴포넌트의 상위 개념을 만들었다가 처참하게 실패한 역사가 있기에 일단은 그렇게 만드는 걸 의식적으로 지양했고, (상위 개념의 클래스에 말도 안되게 엄청나게 구체적으로 메소드 동작 코드를 적어댔으니 이미 거기서 망한 거였는데 그걸 몇 개월이나 지나서야 알게 된 건 정말 문제가 많다.)

하나의 페이지를 만들기 위해 여러 개의 필요한 컴포넌트들을 그 때마다 생각해서 짰기 때문에 각 컴포넌트들은 기본 골격은 비슷하게 가져가지만 동작 내용이 다 달라서 외부 모듈로 function을 만들어서 여러 번 돌려서 사용하는 것 말고는 딱히 코드 재사용성이라고 볼만한 게 없었다.

그렇기 때문에 나중에 코드가 완성되고 나서 보게 되면 하나의 페이지를 만들기 위해서 하나의 모듈 안에 엄청나게 많은 로직들이 들어가게 되는 문제점이 있고 만약 새로운 기능이 추가되거나 어떤 로직이 추가되어야 하면 영향을 받을 필요가 없어보이는 곳까지 전부 다 영향을 받아버리는 문제점이 있기 때문에 나의 코드는 여러 객체들이 너무나 의존성이 큰 나쁜 코드가 되어 버리고 말았다.

그래서 이런 걸 어떻게 해결해야 하나 고민을 하다보니 solid 원칙에 대해서도 알게 되었고, 의존성 주입이라는 개념에 대해서도 조금 더 이해하게 되었고, 제일 중요한 원칙인 ‘역할’과 ‘구현’을 분리해야 한다는 것을 조금 더 깨우치게 되었다.

그래서 class를 extends 하는 것보단 implements 하는 게 좀 더 나은 선택이고 확장하는 개념 대신 위임(소유) 방식을 택하는 게 좀 더 낫다는 점에 대해 이제는 조금 더 차이를 알고 동의하게 되었다.

그래서 오늘 내일은 내가 만든 예제를 가지고 좀 더 갖고 놀아보면서 최근에 습득하게 된 지식들을 조금 더 내 것으로 만드는 작업을 해보려고 한다.

여기 다음과 같은 코드가 있다.

OOP 본격 연습 예제

Component를 확장한 Header 클래스가 있고 Header header 객체를 하나 만들어 렌더링 한다. header를 클릭하면 selected 상태가 변경되어 렌더링 되는 아주 간단한 예제인데 현재 코드를 보면 그냥 … Component를 만들어서 기본 골격만 만들어 놓았다는 걸 빼면 결국 여러 컴포넌트드를 만들기 위해 내부 동작 코드들은 하드 코딩을 해야 하는 게 다를 바가 없다.

그래서 이제 이걸 좀 더 분리하는 작업을 해보고자 한다.

안타깝게도 아직 js엔 인터페이스 개념이 없기 때문에(타입스크립트를 쓰면 좋은 이유가 타입 체커없이 명시적으로 타입을 선언하고 이를 컴파일 때 알려준다는 🐶이득 말고도 인터페이스 개념이 도입되었다는 것만으로도 박수를 쳐야할 것 같다는 생각이 들긴 했다.)

지금 드는 생각으론, 역할에 해당하는 코어 클래스를 여러 개 만들어서 구체적인 동작을 하도록 확장하고 확장된 클래스들을 담아서 좀 더 추상적으로 역할을 수행하는 클래스를 생성해서 의존성 주입을 구현하고 지금 과부하되어 있는 클래스의 역할을 덜어내도록 코드를 리팩토링 할 예정이다. 과연 다음 코드의 모습을 어떨지, 내가 의도한 방향대로 만능 클래스를 부숴버리고 좀 더 오밀조밀한 클래스들의 조합으로 현재 동작하는 있는 방식을 그대로 유지할 수 있을지 좀 더 연습하면서 코드를 만져봐야 할 것 같다.

fin.