우테코 프리코스 2주차 회고 [숫자 야구]

코몽·2022년 11월 4일

Memoir 우테코 프리코스

WOOTECO

목록 보기

2/4

우테코 프리코스 2주차

2주차는 콘솔로 사용자에게 입력 값을 받고 결과를 출력하는 과제였다.
Node.js 프로그램 제작 문제라고 할 수 있겠다.

기존 1주차에서 배웠던 함수 추출, 에지 케이스 고려, 기능 구현 목록 작성,
기능 구현 항목 단위 함수 작성 및 커밋 메시지 작성 등을 준수 하여 작성했다.

커밋 메시지의 경우 우테코측에서 첨부해준 커밋 Angular.js
커밋 메시지 컨벤션 자료를 참고하여 작성하였다.

깨달은 점

1. this 문제

결론 부터 말하자면 object destructuring 관련하여 this 문제를 겪었다.

개인적으로 this는 빠삭하게 알고 있다고 생각했는데
코딩 경험이 워낙 적다보니 안 써본 형식으로 코드를 작성하니까 이런 실수가 나왔다.

object destructuring을 하다가 생긴 문제이다.
객체의 프로퍼티들을 디스트럭처링하여 사용하는 방식은 자주 사용하지 못했는데
이번에 사용해 보려고 하다가 알게 된 부분이다.

constructor() {
	this.name = 'hi';
	this.obj = {
    	fnc() {
        	console.log(this.name);
        }
    }
}

바로 위와 같이 객체에 함수 프로퍼티가 클래스 함수 선언 방식으로 되어있을 경우
디스트럭처링을 하면 해당 함수 내의 this가 undefined가 된다.

일반 함수로 실행되기 때문이다.
그렇기에 apply 등으로 this를 바인딩 해주거나
객체내에서 화살표 함수 선언 방식으로 변경해주면 예상되로 동잔한다.

디스트럭처링을 하지 않을 경우 this.fnc() 이렇게 선언하여 함수내의 this가
.앞의 this를 가리키는데 디스트럭처링을 하면 fnc() 처럼 일반 함수 실행이 되기 때문이다.

필자는 apply를 쓰지 않고 상위 스코프의 this를 가리키는 화살표 함수를 사용했는데
apply를 사용하는 것보다 더 깔끔하고 가독성이 좋기 때문이다.
이게 정석인지는 모른다.

2. readLine 비동기 문제

이건 또 뭐냐면 node.js에서 사용자한테 입력 값을 받을 때 쓰는 기능인데
자세한건 생략하고 중요한건 인자로 함수가 들어가는데 입력 값을 받아
콜백함수에서 처리하는 로직을 작성하는 방식이다.

문제는 이게 비동기로 작동하여 사용자가 값을 입력하기 전에는
해당 콜백함수가 실행되지 않다가 입력을 받으면 실행하는데
그 사이 뒤에 있는 다른 코드들이 전부 실행되어 버리는 것이다.

찾아보니 이를 해결하기 위해 readLine-sync라는 동기로 작동하는 npm 패키지도 있지만
문제는 MissionUtils라는 우테코측에서 제공하는 라이브러리를 사용해서
I/O 기능을 구현해야 하는 것이다.

근데 해당 라이브러리에서 입력받는 기능인 readLine은 비동기만 제공하고 있었다.
그렇기에 어쩔 수 없이 사용자 입력 값이 필요한 로직들을
전부 해당 콜백함수 안에 넣어서 처리하였다.

물론 어쩔 수 없이라고는 하였으나 그게 원래 정석인지 아닌지는 모른다.
단지 개인적으로 해당 readLine의 콜백함수에서는
입력 값을 저장하는 로직만 작성하고 싶었을 뿐이다.

3. 가독성 대결 - 삼항연산자 vs && ?? 연산자

조건 연산자, 삼항연산자라고도 불리는 (? :) 연산자와 and 연산자인 (&&)
혹은 널 병합 연산자인 (??) 연산자 사이에서 고민이 많았다.

특정 변수가 undefined 인지 여부에 따라 다른 동작하는 로직이라 둘 다 사용이 가능했다.
&&와 ??를 사용할 경우 2번 사용해야 했지만 전체적인 코드 길이는 차이가 없었기 때문이다.

&&나 ??가 2번 사용되는 것 보다 삼항연산자 한 번이 가독성이 더 좋을 것 같아 결국 삼항연산자를 선택하긴 하였다.

이럴 경우에도 정해진 암묵적 컨벤션이 따로 있는지 모르겠다.

4. jest로 테스트 케이스 작성하기

이번 미션은 제공되는 테스트 케이스 외에도 본인이 기능 구현 목록에 따라 작성한 항목들 별로 테스트 케이스를 jest로 직접 작성하여 확인하라는 요구사항이 있었다.

당연 jest는 주는대로 돌려보기만 했지 직접 작성한 적은 없어서
공식문서도 읽고 구글링도 많이 해보며 공부했지만
주로 Vanilla JS 보다는 React 관련한 자료들이 많았다.

그리하여 미리 제공된 jest 테스트 케이스 코드를 보고 분석하여
내가 작성한 기능에 맞게 변경하여 작성하였다.

공식 문서 읽는 연습을 많이 해야겠다고 느꼈는데
그 이유가 읽고 이해는 하여도 막상 이것을 내 코드에 알맞게 응용하기가 상당히 어려웠다.

그러면서 네카라쿠배당토 FAANG MAGAT 가겠다고 하는걸 해당 기업 현직 개발자 들이 들으면 웃다가 사레걸리지 않을까 싶다.

5. 파일 & 상수 분리

다른 사람들의 코드를 참고하니 다들 파일과 상수를 따리 분리하여 작성하였다. 나는 그냥 App.js에다 다 몰아 넣었는데 확실히 분리하는 것이 더 깔끔해 보이고 좋았다. 파일은 상수 파일, 앱 파일, 야구 게임 기능 파일 등으로 분리하는 것이 좋아보였고, 상수는 조건식, 고정 숫자, 출력 문자열, 고정 반복 횟수 등을 상수화 시키는게 좋아보였다. 상수들을 성격별로 객체로 묶어서 Object.freeze하는 방식으로 작성을 하는 사람들이 많았다.

아 그리고 입력 값에 대한 조건식은 가능하면 정규표현식으로 구현하는게 좋은 것 같다.