지난 이야기
지난 시간에는 이호준 멘토님께 첫번째 리팩토링에 대한 피드백을 받은 이야기를 해드렸는데요.
못 보신 분들은 이 링크 클릭!
제가 갈피를 못 잡고 있자 멘토님이 힌트를 하나 주셨습니다.
클래스를 갈아끼우는 형식으로 만들어봐!
클래스가 뭔지도 모르겠고,, 온통 처음하는 것들 투성이라 정신은 없었지만 대충 느낌이 오는 것이 있었습니다.
구멍 뚫린 지팡이가 있고 구멍에 원소석을 바꿔끼우면 그 원소 속성을 가진 지팡이가 만들어지는 것 아닐까?! 하고 생각해봤는데요.
42의 다른 동료들에게 물어봤을 때 이게 정답인 것 같았습니다.
그런데 자바스크립트로 그런걸 할 수 있나..?
그래서 일단 if ~else문이 잔뜩 붙은 코드를 만들어 멘토님께 가져가봤습니다.
이게 OOP 맞나요..?
(if문이 가득했던 첫번째 시도..(주석 안의 코드))
나: 멘토님,, 제가 일단 고쳐오기는 했는데 이게 맞을까요..?
멘토님: (허탈한 웃음) 네가 생각하기엔 어떤데? 맞는 것 같아?
나: 아뇨,,,
멘토님: 그치? 뭐가 잘못된 거 같아. 일단 if else와 if return의 차이를 찾아와!
저는 이 블로그를 비롯한 몇 개의 블로그를 통해 성능 상의 차이는 없다는 것을 알게 되었습니다.
그렇다면 도대체 뭐가 다르지......? 그냥 보기 좀 좋다 밖에 없는 것 같은데..
스스로 만족스러운 답은 아니었지만 일단 멘토님께 말씀드렸더니
그래, 그거 맞아!
허탈했습니다..ㅋㅋㅋㅋㅋㅋㅋ
그와 동시에 큰 깨달음을 얻었습니다.
성능에 대한 부분을 생각하지말고 얼마나 보기 좋은지, 고치기 좋은지가 핵심 포인트구나!
일단 고치기는 했는데...
자바 스크립트에 대한 기초 지식 없이 무작정 시작한 개발이다보니 클래스를 갈아 끼우는게 되는지 확신도 없고 어떻게 찾아야할지도 몰랐습니다.
그래서 위와 같은 if문 투성이 코드가 나왔죠..
하지만 분명 방법이 있을 것이라고 생각했습니다.
아무리 블로그를 찾아봐도 별로 답이 없다고 생각하던 중 이런 문장을 봤습니다.
자바스크립트의 클래스는 특별한 생성자 '함수'이다
자바스크립트는 함수를 일급객체로 사용한다.
이 프로젝트 이전에 GO언어를 사용하다보니 함수가 일급객체로 사용되는 것에 어느정도 익숙했고, 클래스가 함수라면 당연히 매개변수로 넘길 수 있을 것이라고 생각했습니다.
그래서 무작정 매개변수로 넘겨 되는지 테스트 해봤더니! 됐다!!! 성공했습니다!!!
그렇게 알아낸 방법으로 처음에는 CRUD에 맞게 하나씩 라이브러리를 만들었는데요. 생각해보니 전과 별로 다른 것이 없어 보였습니다.
멘토님께 차라리 이 부분을 DAO로 빼고 모델별로 라이브러리를 만드는 방법에 대해 여쭤보니 그게 정답이라고 하셨죠!
그렇게 다 완성했지만 여전히 결합도는 높아보였고 크게 달라진 점이 없어보였습니다.
무엇보다도 비동기처리에서 콜백지옥에 빠져들고 있었죠.
공부! 공부를 하자!
이를 해결할 방법을 찾다보니 계속해서 공부를 미루고있던 Promise, async/await를 이용해야겠다는 결론에 다다랐습니다.
본가에 내려간 김해(제가 김해사람이라... 죄송합니다) 비동기와 콜백, 프로미스, async/await에 대해 본격적으로 공부했습니다.
다음 블로그가 정말 큰 도움이 되었습니다.
async/await를 쓰는 가장 큰 이유는 비동기처리를 할 때 한 동작의 결과를 다른 동작의 매개변수로 써야할 때 콜백을 이용하면 복잡해지는 코드를 단순화할 수 있다는 글을 보고 이거다 싶었습니다.
그렇게 밤새 코드를 뜯어고치기 시작했습니다.
아래는 순서대로 로그인 기능의 스켈레톤, 첫번째 리팩토링, 두번째 리팩토링 결과물입니다.
얼마나 달라졌는지 한 번 보시죠!
(스켈레톤입니다. Depth도 너무 깊고, 결합도가 너무 높습니다.)
(첫번째 리팩토링 결과입니다. 여전히 결합도가 높고 여러 번의 에러처리가 중복되어 있습니다.)
(두 번째 리팩토링 결과입니다. 간격을 크게 두고 있음에도 불구하고 줄 수가 굉장히 짧고 직관적입니다.)
이렇게 세 개의 코드를 두고 멘토님과 리뷰를 하니 얼마나 제 코드가 발전했는지 알 수 있었습니다.
처음보는 멘토님도 훨씬 알아보기 쉽다고 해주셨고 디버깅과 코드의 유지보수도 쉬워졌습니다.
다음 과제는 파일 클래스!
코드 리뷰가 끝나고, 멘토님께 이미지 파일의 처리에 대해 질문했습니다.
그러자 이번에는 파일의 검증과 처리에 대한 클래스를 만들어올 것을 주문받았습니다.
정말 서비스를 위해 가는 길에는 끝이 없는 것 같습니다.
다음 글에서는 파일 클래스를 어떻게 구현했는지에 대해 연재해보겠습니다.
긴 글 읽어주셔서 감사합니다!
(해당 시리즈는 네이버 블로그에 있던 저의 글을 velog로 옮긴 것임을 밝힙니다.)
