우당탕탕 우테코 7기 2주차 프리코스 회고 🔥

안녕하세요, 개발하는 토마토입니다 ~ ! 우테코가 어느덧 절반이나 지나갔다는 사실 ! 오늘은 3주차 과제가 오픈되는 걸 보자마자 잊기 전 회고를 써야겠다 싶어 달려왔습니다 !

 

이번 과제는 자동차 경주 과제로, 사용자가 자동차 이름 및 시도횟수를 입력하고, 0부터 9사이의 랜덤 숫자를 제공받아 4이상일 경우에만 전진하여 가장 많이 간 자동차가 최종 우승자가 되도록 구현하는 과제였습니다.! 저번에는 마음가짐의 내용이 많았다면 이번에는 개발적인 부분에 조금 더 초점을 맞춰서 회고를 하게 되었습니다 ☺️

 

TDD 적용 기념 ㅎ,,,ㅎ

 

이번 주차에 시도한 것

 

1. TDD

- 테스트 코드 작성 -> 실패 -> 클래스 및 메서드 구현 -> 테스트 성공 

이게 기본 프로세스였지만, 한번에 테스트를 성공하게 작성하기란 어려웠기 때문에 최대한 작은 단위로 진행하였고, 한번에 성공하지 못하더라도 여러 차례에 거쳐 성공하도록 하였습니다!

 

2. 클래스 구현

- 함수형 컴포넌트만 작성하던 저는 자바스크립트가 객체 지향 언어 중 하나이기도 하였고, 이번 문제에 따르면 자동차가 수행하는 것(전진) 이 자동차마다 동일한 점, 경기 진행하여 우승자를 가려내는 것 역시 매번 동일한 점을 고려하여 클래스로 구현을 시도하였습니다!

 

이번 주차에 꺠달은 점 🤔

 

1. 클래스 내에서 private 변수 두기

Car 이라는 자동차 클래스와 name과 position을 변수로 두었는데, 외부에서 이 변수들에 접근할 수 없도록 하는 Private 변수 처리를 할 수 있다는 사실을 처음 알았습니다 :0 아래 처럼 # 를 붙여주는 방식으로 구현할 수 있습니다

 

class Car {
  constructor(name) {
    this.#name = name.trim();
    this.#position = '';
  }

 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes/Private_properties

 

2. 에러 메시지 말고도 상수화 할 수 있는건 많다..

 

Magic Number - 하드 코딩된 일정한 값 및 문자열

이번 자동차 경주 미션에서는 랜덤 숫자가 4이상 나와야 전진을 하는 조건이 있었는데, 아래와 같이 저는 하드 코딩을 해서 넣었습니다만,, 

이렇게 하드 코딩된 값들은 추후 유지보수를 생각하면 저 값을 하나하나 찾아서 바꿔야 하는 어지러운 상황..😳 또한, 사용자의 입력을 받고 출력하는 메시지 역시 굳이 텍스트 그대로 넣는것 보단, 상수값으로 두는게 낫겠다 싶었습니다 !

 

move(randomNumber) {
    if (randomNumber >= 4) {
    	      this.position += '-';
    }
}

 

3. TDD

(1) test.each 사용하기

test.each: Jest 에서 파라미터화된 테스트를 진행할 수 있도록 해주는 메서드

* 이번에 반영해서 제출하지는 못했지만,, 원래 코드가 18줄이었는데 단 8줄로 바꿀 수 있다는 사실,, test.each로 묶어서 테스트 하게 될 경우 각 테스트에 대한 설명을 작성할 수는 없지만 그 부분은 에러 메시지 상수값의 변수명으로 해결할 수 있는 부분이라 3주차때 꼭 반영해야만 하는 부분입니다!

describe('유효하지 않은 값 테스트', () => {
  test('빈 값일 경우 에러를 반환한다.', () => {
    expect(() => NameValidation.isValid('')).toThrow(EMPTY_CAR_NAME_ERROR);
  });
  test('한 개의 값만 입력한 경우 에러를 반환한다.', () => {
    expect(() => NameValidation.isValid('john')).toThrow(ONE_CAR_NAME_ERROR);
  });

  test('이름이 다섯글자 이상인 경우 에러를 반환한다.', () => {
    expect(() => NameValidation.isValid('Catherine, John')).toThrow(
      MORE_THAN_FIVE_LETTERS,
    );
  });
  test('중복된 이름이 있을 경우 에러를 반환한다.', () => {
    expect(() => NameValidation.isValid('John,John')).toThrow(
      SAME_CAR_NAME_ERROR,
    );
  });
});

describe('유효하지 않은 값 테스트', () => {
  test.each([
    ['', EMPTY_CAR_NAME_ERROR], // 빈 값일 경우
    ['john', ONE_CAR_NAME_ERROR], // 한 개의 값만 입력한 경우
    ['Catherine, John', MORE_THAN_FIVE_LETTERS], // 이름이 다섯 글자 이상인 경우
    ['John,John', SAME_CAR_NAME_ERROR], // 중복된 이름이 있을 경우
  ])('입력값: %s, 예상 에러: %s', (input, expectedError) => {
    expect(() => NameValidation.isValid(input)).toThrow(expectedError);
  });
});

 

(2) beforeEach() 사용하기

beforeEach() : 각 테스트가 실행되기 전에 특정 작업을 반복해서 수행해야 할 때 사용하는 함수

테스트를 수행할 때마다 객체를 만들어야 하는 경우 중복된 코드를 넣는것 보다 가독성이 좋고, 각 테스트가 독립적으로 수행될 수 있게 도와주기 때문에 클래스 컴포넌트에 대해 테스트를 하신다면, beforeEach()를 사용하시는 걸 추천드립니다!

describe('Car 클래스 테스트', () => {
  let car;
  beforeEach(() => {
    // 각 테스트가 시작할 때마다 새로운 Car 객체 생성
    car = new Car('pobi');
  });

 

 

 

그 외 자잘하게 깨달은 점  & 고민🤔

1. Console.log 빼기

- 분명 VSCode 내의 디버깅 툴을 이용해 디버깅을 했는데 여전히 습관적으로 console을 쓰다 보니 딱 한줄 남아있었더라구요 ㅎㅎ,, 다음엔 아예 콘솔 없이 디버깅을 하는걸로..

 

2. 조건문 순서

- 특히 유효성 검사할 때 조건문을 많이 쓰는데, 순서 정립을 덜 하고 쓰고 있다는 것 같다는 생각이 들었습니다.. 1,2주차 모두 조건문 순서를 바꿨을 때 분기 처리가 간단해지는 경우가 있었다는 사실..

 

3. 상반되는 코드 리뷰

- 많은 분들께 코드리뷰를 받았는데, 한 코드에 대해 상반되는 의견을 가지는 경우가 있어 이럴 때는 어떤 리뷰를 반영해야 할지에 대한 부분이 고민이 됩니다 :) 많은 분들께 받으면 생각하지 못한 부분에 대해 다양한 피드백을 받을 수 있다는 장점은 있지만, 앞서 말한 경우에는 제가 타당한 이유를 찾아 선택해서 수용해야만 하는 상황도 오더라구요 ! 어떤 피드백을 받아들이든 그 '이유'를 명확히 한다면 어떤 피드백을 수용하더라도 그게 정답일 수 있겠다고 생각했습니다

 

마음가짐의 변화 🍅

프리코스에 참여하기 전까지 저는 남들과 저를 비교하면서 주눅이 들긴 했어요🥲 하지만 프리코스에 임할 때는 ‘아직 많이 부족하니까 최대한 많은 사람들에게 배우자’는 마음가짐을 가지려고 노력했던 것 같습니다 ㅎㅎ 코드 리뷰를 진행하면서 다른 분들의 코드를 보고 처음에는 ‘왜 나는 저렇게 생각하지 못했을까?’라는 생각이 들기도 했고, 코드리뷰 하기가 조금은 두렵게도 느껴졌지만,, 마음을 다잡고 이렇게 비교할 수 있는 코드들이 있다는 점에 감사함을 느끼게 되었습니다!

 

게다가 그 피드백들을 꼼꼼히 적어두고, 다음 과제에 반영하면서 필요한 것들을 스스로 찾아보고 공부하는 과정에서 많은 걸 배우고, 리팩토링 하는 재미도 깨닫게 되었던 것 같아요 ㅎㅎ 어느덧 절반이 지나가버린 프리코스! 남은 2주도 빡세게 몰입해서 많은 것들을 배워가면 너무 좋을 것 같아요 ㅎㅎ