[우아한 테크코스/프리코스] 웹 프론트엔드 6기 4주차 회고록

시작하기 앞서

드디어 1, 2, 3 주차를 걸쳐 마지막 주차인 4주 차까지 오게 되었다.

3주 차 때 난관을 겪었지만 다행히 해결하여 무사히 미션 제출을 하였고, 점차 발전된 코드와 성장된 나의 모습이 보여 뿌듯하였다.

이번 4주 차 미션은 내가 수요일(15일) 아침에 비행기를 타고 해외에 가야 되기 때문에 화요일까지 끝내야 된다..

할 수 있겠지..? 일단 4주 차도 파이팅!!!!!!!!!

 

2023-11-10(금)

📝 3주 차 피드백

우선 메일로 어떤 피드백이 왔는지 확인하였다.

함수(메서드) 라인

함수의 길이는 15라인으로 제한해야 된다. 왜냐하면 한 가지 함수에는 한 가지 기능만 들어가야 되기 때문이다.

나는 지난 3주 차 때, 해당 부분에 대한 eslint 설정을 했기 때문에,

한 가지 함수에 한 가지 기능만 <- 이 부분만 유의하면서 코드를 작성하면 될 것 같다.

"max-lines-per-function": ["error", { "max": 15 }]

예외 상항

2주 차 때까진 내가 예외 상황에 대해 잘 명시하지 않았는데 코드 리뷰를 통해 예외 상황을 상황별로 추가하게 되었다.

이번 주차도 발생할 수 있는 예외 상황을 잘 고민해야겠다.

비즈니스, UI 로직 분리

한 클래스에 비즈니스와 출력하는 부분을 담당하면 안 된다.

지난 주차 때부터 MVC 패턴을 적용하여 input과 output를 구현하는 부분을 나누었기 때문에 이 부분도 잘 지켜진 것 같다.

그리고 코드를 작성하면서 한 클래스에 담당하는 부분이 일관되었는지 확인하는 것도 유의해야겠다.

객체 상태 접근 제한

자바스크립트에서는 # 를 사용하여 private으로 만들 수 있다. 

그런데 나는 private를 사용하면 불편하다는 이유로 사용하지 않았는데 이번 미션에서는 private를 사용해 봐야겠다.

private 사용 이유
클래스 내부에서만 접근 가능하여 데이터를 안전하게 보관 가능

객체는 객체스럽게 사용

객체에서 데이터를 그냥 가져오는 것이 아니라 (그냥 가져와도 되긴 함)

객체의 구조를 변경하여 객체가 일을 하도록 만들어 객체를 사용하여 다양한 형태의 값을 불러오라는 뜻 같다.

 

예를 들어 내가 지난 3주 차 미션에서 수행했던 코드처럼,

값을 그냥 가져오는 것이 아니라 로또 가격으로 나눠 로또 개수를 가져오는 코드를 작성하라는 의미 같다.

getLottoTicketCount() {
  return this.#amount / LOTTO_CONSTANT.lottoPrice;
}

필드 수 줄이기

필드에 가격, 개수 이렇게 있는 것이 아니라

위에 코드처럼 가격만 있으면 로또의 개수를 손쉽게 가져올 수 있으니깐 필드에 가격만 사용하여 필드의 수를 줄이라는 내용이다.

테스트 케이스

테스트 케이스를 작성할 때엔 성공뿐만 아니라 예외에 대한 케이스도 작성해야 된다.

나는 이 부분을 잘 지키고 있긴 한데 테스트를 실행하는 수가 부족한 거 같아 이번에는 테스트의 수를 늘려봐야겠다.

테스트 코드도 코드다

테스트 케이스를 작성할 때에 반복된 부분을 제거하는 리팩토링 과정이 필요하다.

지난 주차에 작성한 내 테스트 코드를 보면 반복된 부분이 엄청 많은데 이점을 유의하면서 테스트 코드를 작성해야겠다.

테스트를 위한 코드

테스트를 통과하기 위한 코드만을 작성하면 안 된다.

단순 테스트를 통과하기 위해 메서드를 바꾸고 테스트에서만 사용되는 로직을 만들지 말아야 된다.

단위 테스트

단위 테스트할 때, 어려운 부분은 분리하고 테스트 가능한 부분을 단위 테스트 해야 된다.

단위 테스트를 하기 어려운 부분은 하지 않아도 된다는 내용이다.

지난 주차 때 단위 테스트를 하기 어려운 부분이 있었을 때 해당 부분에 대한 테스트를 작성하지 않았는데 이번 주차에서는 최대한 분리를 하여 테스트하고, 만약 테스트 하기 어려우면 하지 않아야겠다.

🗂️ 새로운 미션 제출 방법

지난주까지 기존 저장소에서 fork를 하여 미션을 수행하는 거였는데 이번에는 새로운 방식으로 바뀌었다.

 

먼저 비공개 저장소를 생성하여, collaborator로 우테코 계정을 추가하는 것이다.

 

그리고 이번에는 main 브랜치에서 코드를 작성해야 된다.

로컬에 깃 클론

✏️ 미션 요구 사항

이번은 좀 새롭게 진짜 실무(?)처럼 메일 형식으로 미션 내용을 설명하였다.

구현해야 될 것은 12월 이벤트 플래너이다.

어려워 보이지만 뭔가 흥미진진해 보인다..ㅎ

요구한 기능 사항이 너무 많아서 기능 목록 문서를 작성하면서 이번 미션을 다시 이해하고 정리해 봐야겠다. 

📗 기능 목록 문서 작성

3주 차와 비슷하게 미션에 대한 짧은 소개와 구현 기능 목록에 대해 설명하는 방식으로 작성할 것이다.

 

먼저 해당 12월 이벤트 플래너에 대해 소개하는 내용을 작성했다.

 

다음으로 어떤 클래스를 작성하고, 해당 클래스는 어떤 기능과 예외 상황을 처리해야 되는지 작성했다.

 

중간에 구현하다가 수정할 부분이 생기겠지만 깃에 올려준다!

2023-11-11(토)

이번에도 MVC 패턴을 구현하여 코드를 작성해 볼 것이다.

그전에 prettier와 eslint를 적용할 것이다.
(적용 방법은 아래 링크에서 확인할 수 있다.)

[우아한 테크코스/프리코스] 웹 프론트엔드 6기 2주차 후기

✏️ MVC 패턴 구성

MVC 패턴으로 만들기 위해 controller, model, view를 만들었고

기존에 주어인 InputView와, OutputView를 view 폴더로 옮겨주었다.

그리고 나는 이전 코드에서 Input과 Output를 모두 클래스를 만들어서 객체로 미리 생성했었는데

기존에 있는 Input과 Output 파일은 객체 리터럴로 되어 있었다. 

이런 방법이 있었구나... 잘 구분해야겠다.

클래스 사용
상태를 관리해야 하거나 자체 데이터를 갖는 여러 인스턴스가 필요한 경우
상속을 사용하거나 더 복잡한 구조를 만들어야 하는 경우

객체 리터럴 사용
상태가 필요 없는 간단한 함수 집합이 있는 경우
더 간단하고 가벼운 구조를 선호하는 경우
여러 인스턴스를 생성할 필요가 없는 경우

✏️ 방문 날짜 입력받기

12월 이벤트 플래너를 만들 DecemberEventPlanner.js를 생성하여,

먼저 기본 출력 메시지를 출력했다.

async eventStart() {
  this.receiveOrder();
}

// 주문 받기
receiveOrder() {
  OutputView.printMessage("GRETTING");
  this.receiveOrderOnDate();
}

// 날짜 주문 받기
async receiveOrderOnDate() {
  OutputView.printMessage("ORDER_DATE");
  const date = await InputView.readDate();
  Console.print(date);
}

 

코드를 작성하고 테스트했더니, 날짜까지 입력이 받아진다.

이제 날짜에 대한 클래스 객체를 생성하고, 예외 처리를 해야겠다.

 

예외 처리는 숫자가 아닌 경우, 1부터 31일 아닌 경우 이렇게 두가지 경우를 생각하였다.

#validate(date) {
  if (typeof date !== "number" || Number.isNaN(date)) {
    throw new Error(ERROR_MESSAGES.NOT_NUMBER);
  }
  if (date < EVENT_CONSTANT.START_DAY || date > EVENT_CONSTANT.END_DAY) {
    throw new Error(ERROR_MESSAGES.OUT_OF_DATE);
  }
}

 

예외 상황이 되었을 때, 메시지를 출력하고 다시 날짜를 입력받도록 구현하였다.

테스트를 실행했더니 에러 메시지가 제대로 출력이 되고, 다시 날짜를 입력 받는 곳으로 가게 되었다.

setOrderOnDate(date) {
  try {
    return new OrderDate(Number(date));
  } catch ({ message }) {
    OutputView.printResult(message);
    return this.receiveOrderOnDate();
  }
}

해당 부분을 구현했기 때문에 깃허브에 올려준다.

2023-11-12(일)

✏️ 주문 메뉴, 개수 입력받기

이제 주문 메뉴와 메뉴 개수를 입력 받아야 한다.

날짜 입력 받는 것 처럼 구현을 하고

async receiveOrderMenu() {
  OutputView.printMessage("ORDER_MENU");
  const menu = await InputView.readInput();
  OutputView.printResult(menu);
  return this.setOrderMenu(menu);
}

 

이제 받은 메뉴를 클래스에 저장하고 예외처리를 해야된다.

 

....ㅜ

 

 

여기서 부터 미션을 구현하느라 글을 작성하지 못했다..

화요일까지 끝내야된다는 압박감 때문에...

 

2023-11-13(월)

월요일에는 아래 사진에 있는 내용을 구현하였고

2023-11-14(화)

화요일에는 이러한 내용을 구현하였다.

[깃허브 링크]

GitHub - easyhyun00/javascript-christmas-6-easyhyun00: [우아한 테크코스] 프리코스 4주차

 

글을 마치며..

한 달 동안 진행했던 우테코 프리코스를 무탈없이 잘 마쳤다.

수목금 해외에 있어서 깜박하고 글을 이제서야 올린다ㅜ

4주동안 미션을 수행하느라 바빴지만 그만큼 나 스스로도 성장한게 느껴지고

합격여부를 떠나 정말 좋은 경험이었다고 생각이 든다.

고생한 참가자들과 나에게 칭찬을 해주고 싶다!