[우아한 테크코스] 프리코스 3주차 (프론트엔드 5기)

2주차 피드백

• README.md를 상세히 작성한다
• 기능 목록을 재검토한다
• 기능 목록을 업데이트한다
• 값을 하드 코딩하지 않는다
• 구현 순서도 코딩 컨벤션이다
• 한 함수가 한 가지 기능만 담당하게 한다
• 함수가 한 가지 기능을 하는지 확인하는 기준을 세운다
• JavaScript에서 객체를 만드는 다양한 방법을 이해하고 사용한다.
• 테스트를 작성하는 이유에 대해 본인의 경험을 토대로 정리해본다
• 처음부터 큰 단위의 테스트를 만들지 않는다

기능 목록을 작성할 때, 더 이상 추가할 기능이 없을 때 개발을 시작하려 했다. 하지만 개발이 진행되면서 변수가 발생할 가능성은 언제나 존재하고, 그렇기 때문에 개발하면서 적절하게 변수에 대응하는 것도 중요한 것임을 깨달았다. 또한, 함수가 한 가지 기능을 담당하도록 해야 했다. 지난 주차 때부터 계속해서 중요하게 말씀하셨던 것이고, 이 항목의 중요성은 제가 작성한 코드를 읽어보면서 여실히 깨달았다. 함수의 단위가 작아지면서 기능의 흐름을 직관적으로 이해하기 쉬워졌고, 이는 추후 프로그램을 유지 $\cdot$ 보수를 하는 과정에도 큰 도움이 될 것이다. 이러한 부분에 집중하며 3주차 과제를 시작했다.

3주차 과제

프리코스에서는 class를 활용한 프로그래밍을 요구했다. 그래서 객체지향 프로그래밍에 대해 생각하게 되었고, MVC 디자인 패턴을 도입하고자 했다. MVC 패턴은 데이터 저장과 가공을 담당하는 Model, 데이터를 표시하고 사용자와의 인터랙션을 담당하는 View, Model과 View를 연결하는 Controller로 구성된 GUI를 가진 소프트웨어를 잘 구조화하기 위한 디자인 패턴이다. 이는 각각의 결합도를 낮추어 추후 변경을 쉽게하고 에러 해결을 쉽게 한다는 점에서 의미가 있다.

먼저, Model, View, Controller를 구분했다. LottoGameController를 두어 게임의 전체적인 흐름을 담당하도록 했다. 그리고 사용자 입력에 대한 출력은 LottoGameView에서 처리하도록 했다. 마지막으로 Model에서는 입력한 금액만큼 로또를 발행하는 LottoGameModel, 사용자가 구매한 로또와 당첨 로또를 비교하는 CalculatorModel, 그리고 각 로또의 값을 저장하는 Lotto 클래스로 구분했다. 그리고 각 클래스의 역할에 따라 기능을 구현하기 시작했다. 하지만 접하는 MVC 패턴이었기 때문에 생각했던 것처럼 원활히 진행되지는 않았다. 각각의 역할을 분리하는 데에 의의가 있는 개발 방식인데도 불구하고, 세 영역이 서로를 마구 들여다 보고 있었다. 상황이 심각해졌음을 깨닫고 잠시 개발을 멈춘 뒤 MVC 패턴에 대해 좀 더 공부했다. 마침 우아한 Tech 유튜브 채널에 MVC에 대해 발표한 10분 테크톡 영상이 있었고, 이를 참고하며 문제점을 찾아냈다.

MVC 패턴의 규칙

1. Model은 View와 Controller에 의존하지 않아야 한다.
2. View는 Model에만 의존할 수 있고, Controller에는 의존하지 않아야 한다.
3. View가 Model로부터 데이터를 전달 받을 때에는 사용자에 따라 다르게 보여주어야 하는 데이터만 받을 수 있다.
4. Controller는 View와 Model에 의존할 수 있다.
5. View가 Model로부터 데이터를 받을 때는 반드시 Controller를 통해서 받아야 한다.

위의 규칙을 참고하며 제가 작성한 코드를 풀어나가기 시작했다. 먼저 View는 직관적으로 터미널에 값을 출력하는 부분이라 생각하여 모든 출력 함수를 담았다. Controller는 앞서 언급한 것처럼 전체 게임의 흐름을 담당하도록 했다. Controller가 마치 게임 진행자라고 생각하여 게임을 이끌어가는 듯한 느낌을 받도록 했다. 다음으로 Model에서는 Controller에서 전달 받은 데이터를 가공하여 원하는 출력 값을 반환할 수 있도록 했다. 이렇게 코드를 완성한 뒤 리팩토링을 위해 전체적으로 읽어봤을 때, 이전에 작성하던 방식에 비해 훨씬 깔끔하고 직관적으로 이해되는 모습을 볼 수 있었다. 또한 기능 테스트를 할 때, 어떤 부분에 문제가 있는지 명확하게 나타나기 때문에 소스코드의 어떤 부분을 수정해야 하는지 한번에 알 수 있었다.

소감 🍀

매주 우아한 테크코스의 프리코스를 진행하면서 점점 발전해가는 스스로를 발견하는 중이다. 동시에 과거 제가 작성했던 코드들의 문제점 역시 선명하게 보인다. 이는 절대 부끄러운 것이 아니라, 스스로의 성장을 보여주는 증명서라고 생각한다. 이렇게 프리코스를 기반으로 한 스스로의 성장을 체감할수록, 멋진 소프트웨어를 구현할 저의 미래가 진심으로 기대된다.