🔗 깃허브
https://github.com/shinheylynn/javascript-christmas-6-shinheylynn
💡 고민하고 새로 배운 내용
1. MVC 모델
주차가 진행될수록 코드의 가독성과 구조 설계에 대한 관심이 높아짐과 동시에 이전 주차 과제들에서 많은 분들이 MVC 모델을 채택한 것을 확인할 수 있었습니다. 그래서 제가 개인적으로 세운 이번 주차의 목표 중 하나는 코드를 더 가독성 있게 만들고 구조를 개선하기 위해 MVC 디자인 패턴을 적용하는 것이었습니다. 처음에는 어떤 작업이 모델(M)이고 컨트롤러(C)인지 구분 짓는 게 명확하게 와 닿지 않았습니다. 그래서 초반에는 컨트롤러에 배치했다가 모델로 배치했다가 하는 이동 작업이 여러 번 있었습니다. 하지만 코드가 점점 완성 되어 갈수록 구조가 눈에 들어오기 시작했습니다.
사용자로부터 입력 받은 값에 대한 로직 처리는 컨트롤러의 controllers 폴더 내 파일에 작성하고, 컨트롤러를 통해 정제한 데이터는 models 폴더 내 파일에서 관리하기로 했습니다. 실제로 제 코드 같은 경우엔 controller/UserController.js 파일에서 사용자로부터 메뉴 값을 입력 받고, 최종적으로 유효성 검사를 마친 menu 값을 추출 해냅니다. 이후에는 models/benefits 내 파일들 또는 models/priceCalculator.js 파일로 앞서 추출한 menu 값을 받아와 각각의 할인 값 및 총 합산을 추출해내는 로직을 작성하는 구조를 채택하고 있습니다. 그리고 UI 로직에 대해서는 views 폴더에 OutputView.js 와 InputView.js 를 추가함으로써 처리했습니다.
아쉬운 점은 프로젝트 기능 구현에 초점을 맞추다 보니 제가 목표 했던 것만큼은 구조 설계에 신경쓰지 못했다는 점입니다. 목표한 바 중 하나를 예시로 든다면, views 에 해당하는 파일들에 대해서 Print 기능만을 부여하고 싶었지만 해당 기능 외에도 사용자로부터 입력값을 받아오는 기능이나 삼항연산자 등의 다른 로직 처리가 추가되어 있습니다. 이러한 부분들에 대해 리팩토링하지 못한 채 제출한 점에 대해 많은 아쉬움이 남습니다.
하지만 MVC 모델 디자인 패턴을 처음으로 학습하고 직접 활용해 볼 수 있어서 뜻깊었습니다. 파일을 src 폴더 내에 일렬로 생성하는 대신, 각 파일이 고유한 목적을 가지도록 분리하는 방식을 선택했더니 코드의 가독성이 크게 향상되는 것을 확인할 수 있어 신기한 경험이었습니다.
2. Class, const
4주차 과제를 진행할 때만 해도 Class 와 const 의 차이점에 대해 인지하지 못하고 있었습니다. 특히 Class의 constructor 메서드의 존재 여부는 두 가지 선언 방식 간의 주요 차이 중 하나였습니다. 이러한 특성으로 인해 클래스의 인스턴스를 초기화하고 속성을 추가할 필요가 없는 경우에는 const로 선언하는 것이 더 효율적이라는 것을 알게 되었습니다.
초반에는 이 차이를 인식하지 못해 Class와 const를 사용하는 방법에서 어려움을 겪었습니다. 그러나 에러를 해결하며 이러한 차이를 이해하고, 코드를 더 유동적으로 작성할 수 있게 되었습니다. 이 경험을 통해 클래스와 상수를 선언하는 방식 간의 중요한 차이를 이해하게 되었습니다.
3. async, await, static
코드 구현이 점점 복잡해지면서 코드가 runJS 내에서는 정상적으로 작동하는 것을 확인하더라도 테스트를 실행하면 에러가 발생하는 상황이 자주 발생했습니다. 이로인해 어디서부터 문제가 발생했는지 파악하는 것이 어려워 혼란스러웠습니다.
그러나 코드를 작성하면서 각 메소드에 console.log를 추가하여 출력이 어디서 멈추는지 확인하는 방법을 찾게 되었습니다. 제 코드의 경우, 유효성 검사를 수행하는 menuValidator.js에서 각 예외 처리를 하는 메소드들을 static으로 선언하고 이를 한꺼번에 호출하는 구조를 채택했습니다. 그 결과, isValid 메소드에서 문제가 발생할 때 어떤 메소드에서 오류가 나는지 확인하는 것이 어려웠습니다.
ㄴ static isInputValid()
ㄴ static isNotEmpty()
ㄴ static isQuantityValid()
…
ㄴ static isValid() { return this.isInputValid && this.isNotEmpty && … }
// UserController.js에서 최종적으로 호출하는 메소드는 isValid()어떻게 에러를 잡아낼 수 있을까 고민하던 과정 속에서 각 메소드에 console.log("1", 변수)와 같이 출력을 추가하고, 출력이 어디서 멈추는지 확인하는 작업을 반복하면 출력이 멈춘 구간이 에러를 발생시키는 부분임을 깨닫게 되었습니다. 특히, async와 await를 제대로 작성하지 않아 Promise 객체가 반환되고 있는 문제를 발견하여 메소드가 의도한 대로 작동하지 않는 것을 확인했습니다. 이를 통해 다시 한번 비동기 처리의 중요성을 깨달았습니다.
에러를 해결하려고 고민하던 과정 속에서 static 의 문제인가 싶어 static 에 대해서도 자세히 공부하게 되었습니다. 감이 잘 안 잡혔던 초반과는 달리 이제는 static 을 사용하면 객체 인스턴스를 호출하지 않아도 바로 메소드를 불러올 수 있다는 것을 알게 되었고, 용도에 맞게 쓸 수 있게 되었습니다.
🔆 느낀 점
이번 과제에서는 다수의 복잡한 기능을 구현해야 해 어려움을 겪었습니다. 특히 MVP 디자인 패턴을 적용하려 했더니 오히려 파일 구조가 복잡해져 계속해서 파일을 삭제하고 다시 추가하는 일을 반복하게 되었습니다. 또한
async,await,static,const,Class와 같은 다양한 개념을 정립하고 올바르게 구현하기 위해 많은 시간을 투자했습니다.우테코 홈페이지 테스트 코드는 통과했지만, 주어진 기능들을 완벽하게 구현하지 못한 점이 아쉽습니다. 특히, 테스트 코드 작성에 있어서는 우선 주어진 순서대로 플래너가 올바르게 호출되는지 확인하기 위한 단순 출력 테스트용
PrintTest.js파일을 작성했지만, 시간 부족으로 인해 예외 처리별이나 기능 별로 유닛 테스트를 작성하지 못했습니다.그러나 이번 주 동안 새로운 개념을 배우고 크게 성장한 경험을 하게 되었습니다. 에러를 해결하는 반복 작업을 통해 초반에는 이해하지 못했던 여러 개념들이 명확해졌고, 1주차 과제를 진행할 때의 나를 되돌아보면 큰 발전을 느낄 수 있습니다. 처음에는
node.js와jest를 처음 다루어 콘솔 조차도 낯설었지만, 4주차에는 능숙하게 jest 코드를 해석하고 필요한 기능을 구현할 수 있게 되었습니다.아직은 학습의 길이 멀지만, 이 4주 동안 정말 많은 것을 배우고 체감했습니다. 테스트 코드를 직접 작성해보며, 코드의 가독성을 높일 수 있는 구조 설계와 작성법에 대한 고민을 하게 되었습니다. 지금은 과제 완성에 초점을 맞추어 다른 부분에 신경쓰지 못했지만, 향후 프로젝트에서 이번 4주 동안 습득한 지식을 활용해 더 나은 개발자로 성장할 수 있을 것이라 기대합니다.
