[우아한 테크 코스 : 숫자 야구 게임] 우리 꽤 잘 맞을 지도?

질문과 배운 점.

1. vscode 터미널창에 node 파일명.js 명령어를 입력해 실행하는 방법과 2. 상단 실행 버튼을 눌러 출력창에 실행하는 방법의 차이가 뭐예요?

초반 과제를 진행할 때, 프로그래밍 요구사항 중 "Console.readLineAsync"를 활용하던 중 작성법에 맞게 구현했는 데도 숫자 입력이 되지 않아 애를 먹었습니다. 알고 보니 node환경에서 파일을 실행하는 방법을 잘못된 방법으로 진행해  다음과 같은 어려움을 겪었던 걸 알게 되었습니다.  처음 사용했던 방식은 상단 실행버튼을 눌러 출력창에 실행하는 방법을 이용했는 데요.  출력창과 터미널창 디버그 콘솔창의 차이가 궁금해 공부하는 시간을 가졌습니다.

- 출력 창 : 로그 혹은 에러정보를 담고 있는 창.  값 입력이 불가능하다.(그래서 readLineAsync 입력할 수 없었던 것)

- 터미널 : 직접 명령어를 입력해  조작하는 일반적인 터미널.

-  디버그 콘솔:  디버거 연결된 프로레스의 출력. BP 걸고 현재 변수값을 보거나 함수, 표현식 호출 가능 (Q. BP 걸고 현재 변수값을 보는게 어떤 의미일까?  디버그 콘솔을 사용해 보자)

터미널창이 아닌 출력창에 입력을 받으려 시도하는 깜찍한 모습

2. Object.seal이 뭔가요? 

리팩토링당시 가장 먼저 수정한건 데이터 불변성 유지입니다. 이넘을 사용하면 가독성이 좋아지고 고정값으로 이용가능하니 중간에 변경될 일이 없어 위험부담이 줄기 때문이죠.  수정시 한 번에 수정 가능해 유지보수비용이 줄어드는 장점도 있습니다.  데이터 불변성 보장에 대해 좀 더 찾아보던 중 Object.seal 을 새롭게 알게 되어 Object.freeze와 비교하여 차이점을 공부했습니다.

2-1. Object.defindProperty()가 무슨 일을 하나요?

그러던 중 Object.freeze와  Object.freeze를 각각 알아보기 전에  객체의 defineProperty 개념 공부가 필요했습니다. 

https://study-record99.tistory.com/120

Object.defineProperty()

2-3. Object.defindProperty()의 descriptor 속성 configurable과 writable 차이가 뭔가요?

 Object.defindProperty()를 공부하던 중  descriptor중에 configurable와 writable 모두 속성값을 변경하는 일을 하는 점이 의아했습니다.  "속성의 값을 변경하는 일"과 "객체를 삭제하는 일"이라는 기능 2개로 속성을 나누지 않고 "속성의 값을 변경할 수 있고, 객체에 삭제하는 일"과 "할당 연산자로 속성의 값을 바꾸는 일" 두 가지로 나눈 것이 MDN 의 설명이였습니다. 이 설명은 봤을 때 기능을 비슷한 일들끼리 묶었다고 생각되지 않았습니다. (단일책임원칙 위배 아니니?) 그리고 "할당연산자로 속성의 값을 바꿀수 있다"와 "속성의 값을 변경할 수 있다"라는 의미의 차이를 이해하기 어려웠죠. 

mdn Object.defineProperty() 의 configurable 와 wirtable 설명

그래서 우테코 커뮤니티 동기들과 이 주제에 대해 대화를 했고, 이 개념을 이해하기 위해서는 property attribute에 대해 개념공부가 필요하다 느꼈습니다.  그래서 property attribute에 대해 공부하게 됩니다.

https://study-record99.tistory.com/121

결론

두 뎁스 질문의 결론은  Object.seal()과 Object.freeze() 모두 객체 확장을 막지만 Object.seal()는 속성값 변경이 자유롭다는 점입니다. Attriubte 관점에서 본다면 Object.seal()는 기존 객체에 프로퍼티의 접근자 configurable만 false 처리하는 반면,Object.freeze() 는 configurable와 writable  모두 false 처리하는 것 이죠. 이를 통해 해당 숫자 야구 게임 프로젝트중 객체 확장을 막지만 속성값이 계속 변하는 score에는 Object.seal()를, 속성값과 객체 확장을 막는 Object.freeze()를 활용할 수 있었습니다.

 

3. 중복되는 라이브러리 함수명을  중복제거할 순 없을까?

@woowacourse/mission-utils 의 Random 및 Console API를 활용하던 중 불필요하게 반복되는 MissionUtils 명령어가 눈에 띄었습니다. 코드를 해석하는 데 불필요한 함수명이라 판단하여 제거하고자 했습니다. 

기존코드

import { MissionUtils } from "@woowacourse/mission-utils";

//../ MissionUtils가 불필요하게 중복작성되어 가독성이 떨어진다. 
 const number = MissionUtils.Random.pickNumberInRange(1, 9);
 
//../
const number = await MissionUtils.Console.readLineAsync(message);

시도1

혹 @woowacourse/mission-utils 라이브러리 안에 MissionUtils 이 있고 그안에 Random 과 Console API 가 있으니 @woowacourse/mission-utils/MissionUtils 라이브러리로 접근하면 그안에 Random 과 Console API 를 바로 가져올 수 있지 않을까 생각했습니다. 하지만 ./MissionUtils 이라는 것이 Export 로 정의되지 않았다고 오류를 던졌습니다. 지금 생각해보면 NPM 라이브러리에 대한 이해도가 떨어져 해당 시도를 했다 느끼네요.

import { Console, Random } from "@woowacourse/mission-utils/MissionUtils";

const number = Random.pickNumberInRange(1, 9);
const number = await Console.readLineAsync(message);

시도2 구조분해 할당

import { MissionUtils } from "@woowacourse/mission-utils";

const { Console, Random, ...rest } = MissionUtils;

결론  Console, Random 직접 접근

 Console, Random API 를 중간 MissionUtils 없이 바로 접근할 수 있어 해당 방식으로 리팩토링하여 중복을 없앴습니다. 

import { Console, Random } from "@woowacourse/mission-utils";

아직도 궁금하다 이말입니다.

• 사용자 입력값에 유효성 검사를 진행하는 isInputValid 함수에 에러 처리에 반증은 없는 지, 코드 개선점.
• 클래스 문법을 활용해 클린코드 짜는 방법이 궁금. 기존 분리한 함수를 App 클래스 내부 메서드로 넣으면 this. 가 무한 추가 작성되어 가독성이 떨어진다. 그리고 함수들 모두를 App 클래스 내부 메서드로 넣는것이 합당한건지 궁금하다.
• 클래스를 어떨때 사용하는지.? 도 고민 고민 중 임ㄷ ㅏ
• 여러개의 스타일로 복제 할게 아니면 클래스의 사용을 잘모르겠는데 해당 미션에서는 App을 함수가 아닌 클래스로 만든 이유는?. ( 인스턴스생성때 아무것도 인자로 넣지 않았는 데 뭐하러 함수가 아닌 클래스인지 ?)

회고

코스과정이 너무 잘맞는 다! 는 느낌이 강하게 들었어요.  미션이라는 큰 틀만 통과하면 그 외는 자율적으로 공부할 수 있는 점이 가장 좋았습니다.  하루하루 공부하는 주제가 정해져 있지 않다보니 스스로 생긴 질문의 대답을 찾는 시간이 있어 만족감이 높았습니다. 또 이러한 성향때문에 독학만 하다보면 보다 중요한 공부주제를 계속 벗어나 더 깊은 질문의 늪으로 빠지는 경향이 있는데 미션 데드라인덕에 중간 중간 공부깊이를 적절하게 끊고 더 중요한 주제를 공부할 수 있었습니다.  또 같은 주제로 다양한 코드를 리뷰해볼 수 있어 클린코드에 대해 더 편리하게 고민할 기회가 생겨 좋았습니다. 

초반에는 하루 목표를 에러처리와 관련된 테스트를 통과한다라는 식에 하루 데드라인안에 목표를 정했습니다. 그러다보니 중간과정에서 진전없이 계속 막힐 때 초초한 마음이 들었습니다.  목표를 오늘안에 해내고 싶다는 욕심때문에 해당 막히는 부분들을 깊게 파고 들어 문제를 정확하게 파악하지 못하고 정확한 사고없이 이것저것 시도한것이 스트레스로 작용했기 때문입니다. 하루 목표보다 더 높은 우선순위로 새롭게 배운 점과 떠오른 질문들을  만드는 것을 삼고 문제를 해결하는 중간과정이 공부의 핵심이라는 것을 놓치지 않아야 겠습니다. 

제일 우선은  지금 제대로 공부하는 것이다. 그러니 차근차근 공부하자

 

 

숫자 야구 게임 풀이 

https://github.com/joywhy/javascript-baseball-6

GitHub - joywhy/javascript-baseball-6: 우아한 테크코스 프리코스 1주차과제 온보딩