우아한테크코스 프리코스 : 2주차 회고

m_ngyeong·2023년 11월 3일

jest

우아한테크코스 프리코스

목록 보기

2/2

🚗 자동차 경주

🖥 프로그래밍 요구 사항

다른 프로그래밍 요구 사항 항목은 이전과 동일했고 추가된 항목이 몇가지 있었다.

☑️ indent(인덴트, 들여쓰기) depth를 3이 넘지 않도록 구현한다. 2까지만 허용한다.
☑️ Jest를 이용하여 본인이 정리한 기능 목록이 정상 동작함을 테스트 코드로 확인한다. (테스트 도구 사용법이 익숙하지 않다면 __tests__/StringTest.js를 참고하여 학습한 후 테스트를 구현한다.)

indent depth가 3이 넘지 않도록 구현하는 것은 성공하였지만 기능 목록별 테스트 코드 작성하는 것은 실패하였다. Jest를 조금 공부했다고 바로 내 코드에 도입할 수 있다고 착각했다. 배운 내용을 적용하는 데는 생각보다 꽤 시간이 소모되었다. 2주차 회고록을 작성하는 이 시점에 3주차 미션이 나왔는데 3주차 미션에도 테스트 코드를 작성하라는 프로그래밍 요구사항이 있다. 커뮤니티에서 알게 되었는데 기능 구현과 함께 테스트 코드를 작성하는 것이 좋다는 것이다. 왜냐하면 코드 리팩토링 시 기능 구현이 같게 되었는지 판단을 내릴 수 있기 때문이다. 그 외도 테스트를 통해 작성한 코드가 의도한 대로 작동하는지 검증할 수 있고 개발 과정 중 예상치 못한 문제를 미리 발견할 수 있는 등 다양한 장점이 있기에 작성을 안 하는 것보다 나쁠 게 없다.

📓 과제 진행 요구 사항

프로그래밍 요구 사항 항목과 비슷하게 기본적인 요구사항은 동일했고 한가지 항목이 추가되었다.

☑️ Git의 커밋 단위는 앞 단계에서 docs/README.md에 정리한 기능 목록 단위로 추가한다.

지난 주차 미션을 진행하기 전 기능별로 커밋하고 의미 있는 커밋 메시지를 작성해야지 목표를 세웠었다. 하지만 실패하였고 이번 주차에는 해내겠다고 다짐하고 1주차 회고록에도 작성하였다. 하지만 이번 미션에서도 실패했다. 미션 수행을 막 시작했을 때는 기능별로 하나씩 커밋을 진행하다가 반쯤 코드를 작성한 이후부터는 그러지 못했다. 제출 마감 시간까지 얼마 남지 않았기에 기능 구현에 중점을 두고 기능 구현이 끝난 후 한꺼번에 커밋을 했다. 정말 다음 주차 미션을 진행할 때는 작성할 기능목록을 토대로 시간분배를 잘해서 시간의 여유를 가지고 기능별로 반드시 커밋을 할 거다.

🕹 기능 요구 사항(구현할 기능 목록)

PR Address

2주차 미션을 진행하면서 아래와 같은 목표를 세우고 지키고자 노력하였고 마지막 두 항목을 제외하고는 얼추 성공했다.

네이밍을 통해 의도를 드러내기
변수 이름, 함수(메서드) 이름을 통해 어떤 의도인지가 드러난다면 굳이 주석 달지 않기
함수가 한 가지 일만 하도록 만들기
indent depth가 3이 넘지 않도록 구현하기
기능별로 커밋하기
커밋 메시지 의미 있게 작성하기

Use Spread Operator

JS로 작성된 코드에서 Spread Operator(...)를 사용한 코드들을 많이 접할 수 있는데 무슨 역할을 하는지 정확하게 알지 못해 잘 사용하지 못하고 있었다. 이번 과제를 진행하면서 Spread Operator이 무엇인지 공부하고 이번 미션에 사용해보았다.

// Use Spread Operator
const maxCarPosition = Math.max(...this.cars.map((car) => car.position));

// Not use Spread Operator
const carPositions = this.cars.map((car) => car.position);
const maxCarPosition = Math.max.apply(null, carPositions);
// apply() : 주어진 this 값과 배열 (또는 유사 배열 객체)로 제공되는 arguments로 함수를 호출

Spread Operator(...)는 반복 가능한 객체를 반환하는 표현식 앞에 표기하며, 이를 통해 반복 가능한 객체를 배열 literal([]) 또는 함수의 인수 목록으로 펴칠 수 있다.

console.log([..."ABC"]) -> ["A", "B", "C"]

function* createNumbers(from, to) {
  while(from <= to) yield from++;
}
let iter = createNumbers(10,15);
console.log([...iter]) -> [ 10, 11, 12, 13, 14, 15 ]

또 다른 기능

배열의 괄호([])없이 배열에 들어있는 요소만 반환

let arr = ['a', 'b'];
console.log(...arr); -> a, b

Array/Object 합치기

let a = [1,2,3];
let b = [4,5];
console.log([...a, ...b]); -> [ 1, 2, 3, 4, 5 ]

배열의 값만 복사
배열를 parameter(매개변수)로 사용

Use Class

class Car {
  // 생성자를 사용한 초기화
  constructor(name) {
    this.name = name;
    this.position = 0;
  }

  moveForward = () => {
    const randomNumber = Random.pickNumberInRange(0, 9);
    if (randomNumber >= 4) {
      this.position += 1;
    }
  };
}

자동차 클래스를 만들어 자동차의 이름과 자동차 이름에 따른 이동하는 값을 가지는 생성자 함수 Car를 정의하였다.

🍧 한 줄 느낌점

2주차 과제를 마치면서 ES6 문법에 몰랐던 것에 관해 새로 접하고 코드를 리팩토링해가면 배워나가고 있다. 다음 미션을 진행할 때도 역시 이번에 느낀 것을 토대로 한 걸음 더 성장한 코드를 작성할 수 있도록 노력해야겠다.

다음 과제에 적용해 볼 것

eslint를 이용해 더욱 생산적으로 코드 작성하기

참고문헌,
sbangool.tistory - Spread Operator,

m_ngyeong

ʚȉɞ

이전 포스트

우아한테크코스 프리코스 : 2주차 회고