[우테코 프리코스] FE 김머핀의 4주차 회고록 - 이러다 다 죽어~

서론

이번 화요일 제출을 마지막으로 4주차로 프리코스를 마무리하였다. 아직 어떤 식으로 더 진행하겠다에 대해서는 아직 나온 내용은 없지만, 다들 열정적으로 하는 사람들도 많고 그들에게 배울 수 있는 점이 많다고 생각한다.
프리코스 1차 합격자는 대학 종강 이후이니 그전까지는 복습이나 테스트코드 Jest연습을 이어나가기로 결심하였다.
이번에 4주차를 쓰면서는 내가 파일을 분류했던 과정과 내가 생각하는 이번 우테코 코드를 평가해보고 느낀점으로 마무히라 것이다 :+1

제발 1차 합격 기원!!! 다들 살아서 만납시다!!! 이러다 다 죽으면 안돼

(과연 나는 살아남을 수 있을까…)

새로운 코드 대면

다리게임을 보니 넷플릭스에서 대흥행을 이끈 오징어게임 최종라운드의 게임이다.
이번에는 App 하나만 주는 것이 아닌 다양한 파일을 제안함으로써 답과 구조를 어느정도 의도해준 느낌이 들었다. 처음에 했을 때 너무 양식을 내가 따라가는 것이 아닌가도 많이 느꼈기에 이번에는 더 많은 변화를 주려고 노력하였다.

코드 분할

처음으로 이상하게 생각했던 것은 BridgeGame과 App만 클래스이고 나머지는 함수 객체로 이루어져있음을 확인하였다.
클래스인줄 알고 BridgeGame.move() 해보신 분은 개추해주세요~

그렇기에 일단은 두 가지 클래스와 나머지 파일들의 의미를 확실히 하기 위해서 그림을 정리해 보았다.

이렇게 나는 View와 Class 두가지로 분할하였고 그에 대한 나의 해석을 보여줄 수 있을 것이다.

App에 대한 고찰

항상 App에 대해서는 많은 생각이 들게 한다. 이곳에서 입력을 어떻게 부터 시작해야 하는 것인가에서 많은 코드를 수정하게 된다.
하지만 결국 나는 App이란 것이 결국 호출에 있어서는 최상위 계층이라고 생각한다.
무조건 출발은 이곳에서부터라는 인지를 한다.

물론 이렇게 틀에 가두는 생각이 좋은 방향은 아니지만, 결국 테스트 코드는 app.play()로 시작하기에 나쁘지 않은 방향성이다.

그래서 결국 이 게임에 대한 전반적인 흐름 속에서 이 코드가 무조건적으로 가지고 있어야할 것은 결국 다리의 상태이다.

게임을 보면 알겠지만 게임 한번에 이루어지는 다리의 상태는 한번이다.
게임이 종료되면 다시 시작할 수 있는 문구에 대한 조건이 없었다고는 하지만 있다고 하여도 재시작을 하게 된다면 다리의 상태를 관리하는 것이 더 편리해질 것이라고 생각하였다.

Class vs const = {};

이번 과제에서 분할에 대한 고찰에 접근하면서 가장 크게 느낀 것은 이 2가지의 차이가 무엇일까이다.

이 문제를 너무 복잡하게 가져가지 말자. 나는 복잡하게 생각할지 언정 읽는 사람조차 복잡하게 느껴서는 안된다. 최대한 가독성을 높히고, 이유있는 코드여야만 한다.

물론 나의 잣대이니 너무 깊게 생각하지 않아도 좋다.
나는 Class는 JS 관점에서 바라보았을때는 단순한 Syntactic sugar적인 면이 강하다고 생각하는 사람으로써 결국에 이는 하나의 분류를 간단하게 하기 위해서라고 생각한다.

Class라는 결국 JS 입장에서는 함수에 지나지 않지만, BridgeGame이라는 하나의 클래스를 만들고 다리게임을 실행하기 위한 메서드가 하나의 목적의 통일성이 존재한다면은 Class를 사용하는 것이 좋은 방식이라고 생각한다.

그렇기에 나는 이렇게 주어진 코드에서 따로 Class를 더 분류하는 것보다는 구조를 그대로 가져가는 것이 좋다고 생각했다.

View

이번에 폴더구조에 너무 많이 시간 쓰지말라고 일부러 이렇게 나누어줬던 것 같다.
View는 두 가지, 입력과 출력이다.
여기서 더 나누어야할까? 굳이?
나는 언제나 코딩을 하면서, 결국은 내가 읽기 편해야 다른 사람도 읽기 편한 것이라고 생각하는 입장에서 출력을 정리하면 아래와 같다.

입력
1. 사용자의 다리길이 입력
2. 다리 움직이는 방향 입력
3. 게임 재시작 혹은 종료 입력
출력
1. 다리 상태 출력
2. 최종 결과 메세지 출력

정말 많지 않다. 이것을 과연 내가 클래스로 병합하거나 하나의 폴더로 묶는 것이 큰 의미가 있을까?
단순히 가독성만 해칠 뿐이다. 그렇기에 나는 이 둘을 하나의 사용자의 시선에 노출되는 부분인 View에 해당하다고 생각하여 View 폴더에 분할하였다.

constant(상수)

상수에 대해서는 저번에 우테코 피드백에 대해서 있던 내용을 많이 생각하였다.

그렇게 하다가 가끔씩 둘러보다보면 뭔가 이상한 상수 변수명들을 보며, 변수명의 중요성을 느꼈다.

...SIGNAL.O: ‘O’,

음... 어....

그래서 변수명에 대해서는 확실한 분리를 이용했다. 간단하게 View에서 활용하는 것과 BridgeGame에서 활용되는 내용으로 분리하여 아래 사진과 같이 완성하였다.

느낀 점

4주간의 JS만을 활용해서 과제를 수행하는 것은 알고리즘 스터디 이례로 처음이다. 실제로 로직을 작성하면서 JS 몰랐던 메서드들을 배워가면서 학습한 것이 JS에서의 많은 활용을 배웠던 것 같다. 프론트엔드 개발에 있어서 현재 JS는 핵심 코어인데, 리액트만 하면서 그 본질을 놓쳐서는 안된다는 것을 마음 속에 새기게 되었던 것 같다.
나중에 한번 메서드 공부도 해보면 좋을 듯!?
다들 1차합격도 하고! 최종코테도 합격하고! 우테코 정식 5기로 만났으면 좋겠습니다. 감사합니다.