[우아한테크코스 4기] 프리코스 2주차: 자동차 경주 게임 회고

자동차 경주 게임

64 commits

정확히 수요일 오후 3시에 2주 차 과제가 날아왔다.

저번 기수와 똑같이 자동차 경주 게임 과제였다. 과제 링크

사실 메일이 날라 오기 전에 이미 한번 구현을 해본 상태였다.

그래서 대충 어떻게 하면 되겠다 라는 생각이 있었는데 다시 진행을 하고

리팩토링을 하다 보니 점점 생각이 깊게 빠졌다.

어떻게 하면 깔끔하게 코드를 짤 수 있을까? 하는 생각이 떠나질 않았다.

그렇게 바꾸고 바꾸고 바꾸다 보니 64개의 commit을 하게 되었다. (사실 평균적인 것 같기도...)

2주 차를 진행하면서 느낀 점들을 적어본다.

어려웠던 것들

1. 클래스 분리는 어떻게 해야 돼?

저번 1주 차 때 하면서 느꼈던 것들을 바탕으로 최대한 반성한 것들을 반영하려고 노력했다.

우선 기능 구현을 최우선적으로 하고 그 뒤에 리팩토링을 했다.

이번에 2주 차 과제 메일이 오면서 같이 코멘트를 하신 부분인데, 리팩토링 할 때 클래스 분리에 도전해보면 좋겠다고 하셨다.

리액트로 컴포넌트 형식으로 개발은 조금 많이 해본 상태라서 컴포넌트를 어떻게 분리해야 하는지는 대충 느낌이 왔다.

근데 바닐라 자바스크립트로 개발을 많이 해보지 않아서 어떻게 분리를 해야 하는지, 클래스는 어떻게 구조를 짜야하는지 잘 감이 오지 않았다. 구글링을 하다가 바닐라 자바스크립트로 리액트처럼 웹 컴포넌트 만들기 포스팅이 있었는데 거기서 아이디어를 얻었다.

 

컴포넌트

리액트 경험으로 컴포넌트를 어떻게 나눠야 하는지는 금방 아이디어가 나왔다.

그것을 토대로 위와 같이 4개의 컴포넌트로 나눴다.

1. 자동차 이름 입력 컴포넌트 (RacingCarNameForm)
2. 시도 횟수 입력 컴포넌트 (RacingTryCountForm)
3. 실행 결과 컴포넌트 (RacingResult)
4. 최종 우승자 컴포넌트 (RacingWinner)

그리고 하나는 생성되는 자동차 객체(Car)였다.

 

이렇게 총 5개의 컴포넌트 개발을 진행했다.

 

Form 클래스에는 입력받은 값들을 컨트롤하는 로직들과 검증 메소드들을 생성했다.

그리고 출력을 해야 하는 컴포넌트는 render와 같은 메소드를 넣어서 출력을 담당하도록 했다.

이렇게 하고 나서 이렇게 하는 게 최선인가? 하는 생각이 떠나질 않았다. 무언가 찜찜한 느낌?...

 

2. Car 객체 관리에 대해서

이번 요구사항에서 Car 객체를 생성하고 new를 이용해 인스턴스를 만들어 사용한다.라는 요구사항이 있었다.

그래서 요구사항대로 자동차 객체를 만들어서 src/index.js 파일에서 cars라는 내부 변수를 생성해서 관리를 했다.

요기서도 조금 찜찜한 게 Car 인스턴스를 관리해주는 곳이 src/index.js 파일인데 이게 뭔가 적절치 않은 것 같았다.

this.$cars 변수에는 배열 형태로 car 인스턴스들이 들어있다.

 

car들을 전진하거나, car들을 이름을 출력하거나, car들을 초기화를 하거나 하는 작업들은

Car 클래스 안에서 진행하기가 조금 그런 게 Car 클래스는 하나의 객체를 의미하는 곳이고,

Car들, Car 인스턴스 전부를 관리하는 무언가가 필요했는데 그것을 어떻게 해야 하는지 계속 고민했다.

이 부분이 조금 애매했고 어려웠던 것 같다.

 

그래서 결국은 CarController 클래스를 생성해서 거기서 자동차 인스턴스들을 관리했다.

이렇게 하니 controller 폴더가 하나 늘었는데 조금 더 복잡해 보일 수도 있다는 생각도 들었다.

어떻게 하면 최적의 코드를 짤 수 있을지에 대한 것은 정말 어려운 것 같다...

배웠던 것들

1. repeat( )

// for문 사용
let string = '';
for (let i = 0; i < count; i += 1) {
	string += '-';
}
return string;

// repeat 사용
return '-'.repeat(count);

4줄짜리 코드를 한 줄로 줄일 수 있는 마법

 

2. file-tree-generator

이번에 README.md는 레포지토리에서 제일 처음 보이는 곳이니까 마크다운 문법도 익혀보고 적용해보라는 피드백이 있었다.

vscode 익스텐션 중에 폴더 구조를 시각화해서 보여주는 익스텐션이 있었다. 그래서 다운로드하여서 사용해봤다.

 

사용법이 너무 쉬워서 좋았다. 그냥 시각화하고 싶은 폴더를 오른쪽 클릭 후

Generator to Tree 버튼을 클릭하면 바로 생성!

왼쪽: 생성, 오른쪽: 생성된 모습

 

느낀 점

어떻게 보면 정말 어렵지 않은 기능들인데 구현을 할 때 이것저것 요구사항들을 만족시키려 하다 보니 꽤나 시간이 걸리는 것 같다.

이틀 뒤면 대망의 3주 차 과제가 나오는데 동향을 살펴봤을 때는 3주차 과제와 최종 코딩테스트 과제가 꽤나 많이 비슷한 것 같아서 3주차 과제는 정말 많이 연습을 해야 할 것 같다.

그리고 3주차 과제는 매년마다 달라져서 조금 기대가 되는 것도 있고 얼마나 어려울까 하는 두려움도 있다.

최종 코테는 5시간인데 정말 정말 촉박할 것 같다... 5시간 이라니...!

 

아무튼 2주 차 끝!