목표와 회고

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

Creative_Lee 2022. 11. 8. 10:27

프리코스 2주 차를 마무리했다.
2주 차 미션은 우여곡절이 훨씬 많았다.
그걸 다 부셔내고
후기를 적고 있다니... 확실히 성장했다!

이번 후기도 성장했던 부분과 차주 목표를 중점으로 적어 나가 보겠다.

🔧 1주 차 공통 피드백 점검

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

 

커밋 메시지를 의미 있게 작성한다.

1주 차 미션을 진행하며 커밋 컨벤션을 적용했지만, 익숙하지 않은 탓에 실수를 많이 했었다.
의미 있는 커밋 메시지에 대해 리마인드 했다.

 

이름을 통해 의도를 드러낸다.
축약하지 않는다.

공백 라인을 의미 있게 사용한다.

변수, 함수명을 축약하다가 중의적인 표현이 되어버린 적이 많은 것 같다.
이름이 길어지더라도 확실한 의도를 전할 수 있도록 해야겠다고 생각했다.

 

space와 tab을 혼용하지 않는다.
linter와 codeFormatter의 기능을 활용한다.
EOL(End Of Line)을 확인한다.

1주 차 미션을 진행하면서
작업 환경 별 코드 포멧팅이 상이하여 변경사항이 올바르게 표시되지 못한 커밋이 있었다.
이번 미션 시작과 동시에 prettier 설정 파일부터 작성했던 이유이기도 하다😅


2주 차 미션 -  숫자 야구

2주 차 미션은 숫자 야구 게임을 구현하는 과제였고, 요구사항이 추가되었다!

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

  • Jest를 이용하여 본인이 정리한 기능 목록이 정상 동작함을 테스트 코드로 확인한다.
  • indent(인덴트, 들여쓰기) depth를 3이 넘지 않도록 구현한다. 2까지만 허용한다.
  • 함수(또는 메서드)가 한 가지 일만 하도록 최대한 작게 만들어라.

📃 테스트 코드 작성의 중요성!

'Javascript info'라는 사이트에서 JS를 공부하면서, 테스트 자동화와 Mocha를 접한 적이 있다.

테스트 코드라고 말하기도 부끄러운 '1 + 1 은 2이다.' 같은 테스트 코드를 작성하며 이해해 보려 했었다.

당연하게도 테스트의 목적과 의미를 이해할 수 없었고, 심지어 문법조차 어렵게 다가왔다.
그렇게 해당 챕터를 넘어갔었다.

그때부터 지금까지 '프로덕션 코드부터 잘 짜고 그 후에 테스트 코드 공부하자!'
라는 생각으로 테스팅 공부를 미뤄왔던 것 같다. 그게 맞는 건 줄 알았다.

 

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


🤔 쉽지 않은 테스트 코드...

우선 기본을 다지기 위해 테스트 코드의 목적과 장점, Jest의 기본 문법에 대해 공부하며 포스팅하였고
이를 바탕으로 내가 만든 기능에 대한 테스트 코드를 작성해 보았다.

하지만 쉽지 않았고, 특히 코드의 형식을 어떻게 통일해야 하는지 감이 오지 않았다.
예시로 주어진 테스트 코드를 보고서는 감을 잡기 어려웠다. 

고민은 깊어만 갔다.


🌞 한 줄기의 빛... MissionUtils 테스트 파일!

테스트 코드를 썼다 지웠다를 반복하며 고민을 이어가던 중,
'MissionUtils는 공개적으로 여러 명이 사용해야 하니깐 확실하게 검증하지 않았을까 ?'
'혹시... 테스트 파일이 있지 않을까 ?"
하는 마음에 뒤져 보았는데...

ㅇ..유..유레카!!

MissionUtils의 test 폴더를 발견했고, 테스트 파일의 코드에서 given, when, then 키워드를 발견했다!!!

given, when, then은 일종의 테스트 코드 패턴으로
앞서 테스팅에 대해 공부하며 알게 됐던 키워드이지만, 미숙했던 탓에 올바르게 적용하지 못하고 있었다.

이 발견을 통해 다양한 예시 코드를 보며 조금 더 나은 테스트 코드로 개선할 수 있었다.


🤪 재밌다! 테스트 코드!

테스트를 실행하고, 수정하고, 만들고를 반복하면서 이전에는 느끼지 못했던 장점을 조금씩 느낄 수 있었다.

기본적으로 내가 작성한 코드가 잘 동작한다는 것을 검증할 수 있었고, 버그 발생에 대한 불안함이 줄어들었다.

또한 코드를 리팩토링한 뒤 테스트를 실행하는 것만으로도 이전과 같은 올바른 동작을 하는지 검증할 수 있었다.

자연스레 리팩토링에 소요되는 시간도 줄어들게 되었다.

Good~

작성한 테스트가 Pass✅ 하는 걸 볼 때마다 더해지는 성취감은 덤이다.😉

물론 아직 기본적인 Matcher 메서드를 주로 사용하여 다소 1차원적인 모양이지만... 

앞으로 의식적으로 테스팅을 연습하면서 더 깊게 공부해 볼 것이다.


** 테스팅을 학습하면서 큰 도움이 됐던 영상을 소개한다. [우아한테크세미나 TDD 리팩토링 by 포비]

** 어떤 방향으로 테스팅을 학습해야 하는지에 대해 중점적으로 보면 좋을 것 같다. 


👊 클린코드 작성하기 (feat. 동료의 관점)

클린 코드를 작성해야 하는 이유는 간단하다. 나만 볼 코드가 아니기 때문이다.

동료와 협업하는 과정에서 필연히 내 코드를 이해시켜야 하는 순간이 올 것이다.

추가된 요구사항도 비슷한 맥락에서의 의도가 아닐까 생각한다.

메서드가 한 가지 일만 하도록 최대한 작게 만들어라. 
indent(인덴트, 들여쓰기) depth를 3이 넘지 않도록 구현한다. 2까지만 허용한다.

작성이 끝난 코드를 다시 살펴보면서 위 요구사항을 지키지 못한 부분이 있는지,

동료의 입장이 되어 코드를 처음 본다고 생각하며 읽어보았다. 

상당히 주관적인 관점으로 작성한 코드가 많았고

많은 시간을 할애하여 리팩토링을 했다.


🤔 나만 아는 의미...

 

기존 코드🤮

END_TRIGGER, Console.close()의 의미가 파악이 되지 않을 것이다.

 

위 코드는 trigger에 따라 게임을 재시작하거나 종료하는 로직이다.

 

나는 '재시작, 종료' 라는 조건을 알기 때문에 END라는 단어에서 종료의 의미를 찾을 수 있다.

Console.close() 함수는 사용자 입출력 인스턴스를 종료시키는 미션에서 제공한 유틸 함수이다.

나는 해당 함수가 무슨 동작을 하는지 알고 있다.

이 역시 나만 알고 있다.

 

조건을 모르고 처음 읽는 동료는 END, Console.close()의 동작을 바로 파악할 수 없다. 

 


리팩터링 후 코드 😀 

Console.close() 👉 quitGame()으로

END 👉 QUIT으로 변경해서 종료의 의미를 강조하였다.

조건과 본문이 자연스럽게 이어지면서 의미 파악이 쉽다.

 


🤔 나만 편한 로직...

 

기존 코드🤮

getStrikeBallCount는 스트라이크와 볼의 개수를 반환하는 함수이다.

목적을 알았어도 로직을 파악하기 어려울 것이다.

 

특히 밑줄 친 코드를 이해하기는 더욱 어려울 것이다.

'볼 개수에서 스트라이크 개수를 왜 빼주는 것이지?' 하고 의문을 가지게 되며

맥락 파악을 위해 다시 위쪽 for문으로 시선이 옮겨가야 한다.

 

이런 코드의 장점은 작성자가 편하다는 것이다.

이런 코드의 단점은 작성자만 편하다는 것이다.


리팩터링 후 코드 😀 

2개의 for문을 1개로 통합했고, 볼 개수에서 스트라이크 개수를 빼주는 로직도 제거하였다.

 

각 조건문에서 각자의 카운트만 계산하기 때문에  의미도 단순하고 파악하기 쉽다.
위에서 아래로 읽어 내려오면서 자연스럽게 로직의 맥락을 파악할 수 있는 코드가 되었다.

 


** 클린 코드를 학습하면서 큰 도움이 됐던 repository를 소개한다. [clean-code-javascript-ko]

** 코드를 작성할 때 어떤 것을 유의해야 하는가에 대해 중점적으로 보면 좋을 것 같다. 


👊 앞으로 보완할 점!

 

1. 테스트 코드 또한 동료가 이해할 수 있도록 가독성 있게 작성하기

  • 테스트 코드에서 내 코드가 잘 작동한다는 검증을 할 수 있다.
    반대로 테스트 코드를 보고 어떤 동작을 하는지, 어떻게 사용되어야 하는지 알 수 있어야 한다.
    또한 프로덕션 코드를 추가했을 때, 테스트가 왜 실패하는지 쉽게 진단이 되어야 한다.
    이번에 내가 작성한 테스트 코드는 위와 같은 부분을 지키지 못한 것 같다.
    앞으로 더 많은 테스트 코드를 작성해 보면서 테스트 코드의 질 또한 높일 수 있도록 노력할 것이다.

2. 다른 사람이 작성한 코드 더 많이 보기

  • 프리코스를 진행하면서 다른 사람의 코드를 읽는 경험을 하게 되었다.
    개념에 대한 예시 코드나, 공식 문서가 아닌 실제 코드는 처음 읽는 것이다.
    코드를 읽으면서 문맥을 파악하는 것도 실력이라고 생각한다.
    앞으로 더 많은 사람들의 다양한 관점이 담긴 코드를 읽어보면서 배우고 흡수할 것이다.

2주 차를 마무리 하며 😁

2주 차에 학습한 모든 내용 중 가장 뇌리에 깊게 박힌 건 단연 테스트 코드이다.

 

내겐 멀게만 느껴졌던 테스트 코드인데, 어느새 더 좋은 테스트 코드에 대한 고민도 하고 있다.

테스트에 대한 거리감을 어떻게 좁혀 나갈 수 있는지,

어떻게 내 것으로 만들 수 있는지 알게 되어 너무 좋다.

 

1주 차 미션으로 성장할 수 있는 길이 열렸었다.

이번 2주 차에는 목표했던 대로 열린 길을 따라 열심히 걸었다고 생각한다.

다음 3주 차에는 천천히 속력을 높여 달려보도록 하겠다! 💪

 

가자!