우테코 프론트엔드 5기 - 프리코스 3주 차 후기

프리코스 3주 차를 마무리했다.
3주 차는 매일매일 눈 떠보면 시간이 사라지는 마법 같은 하루를 보냈다.😅
뒤이어 설명할 추가된 요구사항이 큰 몫을 해줬다.
이번 후기도 성장했던 부분과 차주 목표를 중점으로 적어 나가 보겠다.

---

🔧 2주 차 공통 피드백 수용

3주 차 미션 시작에 앞서 2주 차 공통 피드백을 점검했다.

 

README.md를 상세히 작성한다.
기능 목록을 재검토한다.
기능 목록을 업데이트한다.

이전 미션을 진행하면서, 기능 구현 목록 작성에 너무 많은 시간을 할애했던 기억이 있다.

상세히 작성하는 것은 중요하지만 그렇다고 함수, 메서드의 설계와 구현처럼 언제든지 변경될 수 있고

구현하는 시점이 되어봐야 알 수 있는 것들을 미리 생각하고 적지 않도록 주의하라는 내용이었다.

이 피드백을 보고 첫 작성에 모든 것을 담으려는 생각을 버렸다!

 

값을 하드 코딩하지 않는다.

이번 3주 차 미션에는 하마터면 하드 코딩할 만한 값들이 정말 많았다.

피드백으로 한 번 더 점검하는 시간을 가졌다.

 

한 함수가 한 가지 기능만 담당하게 한다.
함수가 한 가지 기능을 하는지 확인하는 기준을 세운다.

한 가지 기능에 대한 확인 기준을 세워야 한다는 말이 상당히 큰 도움이 되었다.

코드를 작성하면서 '큰 범위로는 한 가지 기능인 것 같은데... 이걸 더 나눠야 하나..?' 와 같은 생각을 정말 많이 했었다.

이게 모두 기준이 없기 때문이 아니었을까 생각했다. 

---

🙏 피어 리뷰의 매력

프리코스 커뮤니티를 통해 많은 사람의 코드를 보고 리뷰하면서, 코드 작성 꿀팁들을 정말 많이 얻었다.

또한 코드를 읽으면서 내 코드에 대한 개선 방향을 정할 수 있는 것도 참 좋은 것 같다.

 

나 역시 이전 미션에 대한 피어 리뷰를 부탁했는데, 많은 분들이 코드에 대한 조언을 해주셨다. 

그중 Airbnb JS 컨벤션에 대한 피드백이 가장 많았다.
1주 차 시작과 함께 정독했었는데... 그럼에도 지키지 못한 부분이 많았다. 반성해야 할 부분이다.

리뷰를 토대로 3주 차 미션에서 많은 부분을 보완할 수 있었다.

---

다들 따듯한 말도 잊지 않으셨다.

오랜 시간 혼자 공부하면서 이런 말들을 해줄 사람이 거의 없었다.😥(훌쩍..)

다들 진심으로 너무 감사하다!

---

🎰 3주 차 미션 -  로또 게임

3주 차 미션은 로또 게임을 구현하는 과제였고, 이번에도 역시 요구사항이 추가되었다.

추가된 요구 사항 중, 내가 가장 많이 성장할 수 있었던 요구 사항은 다음과 같다.

• 클래스(객체)를 분리하는 연습을 할 것.
  - 메서드의 길이가 15라인을 넘어가지 않도록 구현한다.
  - 메서드가 한 가지 일만 하도록 구현한다.

---

📝 클래스(객체) 분리의 중요성

나는 [분리]와의 악연이 있다. 1주 차 후기 글에도 등장했던 내 개인 프로젝트 이야기를 조금 해보겠다.

프로젝트 당시 몇 안 되는 파일에 모든 로직을 전부 모아 개발했고, 진행이 될수록 분리가 더욱 어려워졌었다.
어떻게든 완성하여 원하던 사람에게 이롭게 쓰였지만,

원하던 방향으로의 확장도, 리팩토링도 할 수 없는 기괴한 구조가 되어버려 프로젝트를 중단할 수밖에 없었다.  

이전까지의 나는 이런저런 사건과 이유로 분리가 중요하다는 것은 뼈져리게 느꼈지만

그렇다고 분리에 대한 기준이 생기거나 분리를 잘하게 된 건 또 아닌, 정체되어 있는 상태였다.

 

3주 차 미션을 하기 전까지는 말이다.🔥

이번 미션의 요구사항은 나의 정체기를 시원하게 뚫어주었다.🤸‍♂️

---

🤔 클래스를 분리하는 이유! (feat. 도메인,비즈니스 로직이란 ?)

제일 먼저 구글에 검색을 해보았다.

대부분의 글에서 SOLID 원칙, 객체 지향 설계 등의 키워드를 볼 수 있었다.

전체적으로 종합해 보면,

클래스가 하나의 기능(책임)을 가져야만 관심사가 분리되고, 유지 보수에 용이하다는 결론이 나온다.

---

🤦‍♂️ 그래서 어떻게 하는 건데..? (학습 과정)

여러 자료를 보면서 느낌은 파악할 수 있었지만, 그래서 어떻게 하는 건지는 알 수 없었다.

 

상당히 부끄럽지만, 내가 3주 차 미션을 하면서 구현한 로또 앱의 구조를 공개한다.

내 생각의 과정을 적어두고, 앞으로도 이런 사고방식으로 학습하고 싶어서 글로 남긴다.

---

😅 1차 로또 앱 구조

'UI를 담당하는 로직을 구분한다.'라는 요구사항을 의식하면서 코드를 작성하다 보니,

자연스럽게 콘솔에 무언가를 보여주는 기능을 모아둔 LottoGameView 클래스를 만들었다.

 

여러 입력에 대한 유효성 검사 로직은 중복되는 부분이 있었고, 재사용을 하고 싶었다.

이렇게 유효성 검사 로직을 모아둔 유틸 느낌의 Validation 클래스를 만들었다.

 

LottoGame 클래스는 입력을 받아

로또를 발행하고 로또를 비교하여 당첨 통계를 냈다.

 

첫 구현은 위와 같았고, 흐름에 문제가 없다고 생각했다.

 

하지만 코드를 보고 있자니, 왜 인지 모르게 중단하였던 내 프로젝트가 떠올랐다.
뭉쳐져 있고, 뭉쳐져 있고... 뭉쳐져있는...

---

😅 읽기 어려운 코드와 엄청난 분량

당시 LottoGame 클래스의 메서드 부분만 캡처해 보았다.

포스팅하는 지금도 한 화면에 꽉 찰 정도로 길다... 180줄 가량의 코드가 한데 뭉쳐있었다.
로또 구매, 번호 비교, 당첨 통계에 대한 모든 메서드를 전부 가지고 있는 상태였고, 개선이 필요했다.

---

😃 분리 기준 세우기

도메인 로직에 대한 이해를 통해 클래스의 분리 기준을 세웠다.

해당 블로그의 자료가 상당히 큰 도움이 되었다. eddy_song 님의 포스팅

---

위 내용을 바탕으로 새로운 구조를 그려보았다.

각 기능에 대한 의사결정 코드를 구분하는 것을 목표로 했다.

 

우선 기능별로 구분하고 보니 다음과 같이 나눌 수 있었다.

• 로또 구매
• 당첨 번호 입력
• 로또 번호 비교
• 결과 통계 

그중 당첨번호 입력에 대한 기능은 단순히 번호를 저장하는 보관소 역할이라 도메인 로직 범위에서 제외하기로 했다.

나머지 3개의 기능에 대한 도메인 로직들을 각 클래스로 분리해 보았다.

 

• 로또 구매 : LottoPurchaseMachine
• 등수 계산 : PrizeCalculator 
• 결과 통계 : Statistic

---

😃 LottoGame 클래스의 변화

클래스를 나누고 나니, LottoGame 클래스에는 변화가 생겼다.

 

 

1. LottoGame 클래스의 의미 파악이 쉬워졌고, 파일의 길이가 줄었다.

개선 전 : 각 페이즈에서 필요한 여러 메서드가 모여있어 클래스의 의미를 파악하기 힘들다

개선 후 : 메서드 명만 보고도 '게임의 각 페이즈를 실행하는 곳'이라는 의미를 파악할 수 있다.

 

 

 

2. 각 페이즈의 기능 파악이 쉬워졌다.

개선 전 : drawLottoPhase에서 너무 많은 기능을 담당하여 정확히 무엇을 하는지 알기 어렵다.

개선 후 : prizeCalculatePhase라는 메서드명과 내용으로 '로또 등수를 계산한다' 라는 의미를 알 수 있다.
                 statisticsPhase도 마찬가지로 '통계를 한다' 라는 의미를 알수있다.

 

각 메서드 본문의 가독성이 확연히 좋아졌다.

---

😃 디렉터리 생성 및 파일 분리

마지막으로 각자의 역할 별로 디렉터리를 만들어 파일을 분리해 보았다.

물론 위의 구조도 좋은 구조라고 말할 수 없다.

하지만 이전보다 좋은 구조라고 당당히 말할 수 있다.

 

후기를 읽는 분들이 혹시 지루할까, 웃고 가시라고 짤을 넣었지만...

화요일 새벽. 리팩토링을 마치고 잠자리에 들면서 조금 벅찬 감정을 느꼈다.

평소 약점으로 생각했던 부분을 정면 돌파하면서 저런 구조를 완성해낸 것만으로 여러 감정이 밀려왔다.

 

무슨 감정인지는 모르겠다만... '열심히 잘 하고 있는 거겠지...' 같은 생각을 했던 것 같다.

---

 

👊 앞으로 보완할 점!

1. 앱의 구조를 조금 더 명확히 파악하고 코드 작성하기.

• 이번 3주 차 리팩토링은 다행히 성공으로 끝났지만,
  만약 조금만 더 복잡한 구조였다면 내 프로젝트처럼 절반의 성공으로 끝났을 수도 있다.
  물론 처음부터 완벽한 구조를 만들 순 없겠지만, 깊은 고민을 통해 조금이라도 더 괜찮은 구조를 얻도록 노력할 것이다. 

2. 클래스에 익숙해지기.

• 프리코스의 시작과 함께 사용하게 된 클래스는 여전히 어색하다.
  생성자에서 다른 클래스를 초기화해도 되는지,
  메서드 내에서 초기화하는 것과는 무슨 차이가 있는지, 이것저것 궁금하고 모르는 것 투성이다.
  더 많이 사용해 보고 관련 코드도 참고하면서 하나씩 풀어가야 한다.
  

---

3주 차를 마무리 하며 😁

저번 후기에서 3주 차에는 속력을 높여 달려보겠다고 다짐했었는데,

바람대로 정말 미친 듯이 달린 것 같다.

이제 결승선을 통과하면 된다. 이대로 완주하자! 💪

 

 

가자아!!!!!!!!!!