본문 바로가기
교육, 대외활동/우아한테크코스

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

by daami 2024. 11. 25.

 

🍀 목표

 

3주차 피드백을 바탕으로 이번주 목표를 작성했다. 마침 클래스와 모듈화의 기준을 세우고 싶었는데, 이에 대한 내용이 공통 피드백에 잘 나와있었다.

 

1. 비즈니스 로직(데이터 처리 및도메인) 과 UI 로직(화면에 데이터 표시)을 분리한다.

 - UI관련 코드는 별도의 View클래스로 분리한다.

 - 객체 상태를 보기 위한 로그 메시지 성격이 강하다면 toString()으로 상태를 표현한다.

- UI에서 사용할 데이터가 필요하다면 getter메서드를 통해 View 계층으로 데이터를 전달한다.

 

2. 객체의 상태 접근을 제한한다. 필드는 private class 필드로 구현한다.

 ➡️ 이유

   1) 데이터 은닉과 보안: 외부에서 직접 접근할 수 없게 하여 의도치 않은 데이터 조작을 방지한다.

   2) 유지보수성 향상: 객체 내부의 구현을 변경해도 외부 코드에 영향을 주지 않아 코드의 유연성과 확장성을 높인다.

   3) 데이터 무결성 유지

   4) 코드 재사용성 증가

  이러한 이유로, private으로 필드를 선언한 후 getter와 setter메서드를 사용하는 것이 더 좋다!

 

3. getter의 무분별한 사용 줄이기. 데이터를 꺼내기 보다, 데이터를 가지고 있는 객체에서 데이터를 스스로 처리하도록 한다.

 

4. 필드 개수를 최소한으로 줄인다.

 

5. TDD를 적용한다. 즉 테스트 코드부터 작성한다! 그동안 테스트 코드에 소홀했었는데, 이번에는 시간을 들여 하나의 기능을 테스트하도록 해보자. 테스트 코드를 잘 작성하면 디버깅하는데 드는 시간을 줄일 수 있다.

2024.11.07 - [기술지식] - TDD 방법론

 

- 파라미터만 바뀌고 로직이 중복되는 코드라면, 파라미터화된 테스트를 통해 코드의 중복을 줄일 수 있다.

test.each([["999"], ["0"], ["-123"]])("천원 미만의 금액에 대한 예외 처리", (input) => {
   expect(() => {
     const app = new App(input);
     app.play();
   }).toThrow();
 }
);

 

  - 단위 테스트하기 어려운 의존성을 외부에서 주입하거나 분리하여 테스트 가능한 상태로 만든다.

 

 

📌 기능 요구 사항

구매자의 할인 혜택과 재고 상황을 고려하여 최종 결제 금액을 계산하고 안내하는 결제 시스템을 구현한다.

  • 사용자가 입력한 상품의 가격과 수량을 기반으로 최종 결제 금액을 계산한다.
    • 총구매액은 상품별 가격과 수량을 곱하여 계산하며, 프로모션 및 멤버십 할인 정책을 반영하여 최종 결제 금액을 산출한다.
  • 구매 내역과 산출한 금액 정보를 영수증으로 출력한다.
  • 영수증 출력 후 추가 구매를 진행할지 또는 종료할지를 선택할 수 있다.
  • 사용자가 잘못된 값을 입력할 경우 "[ERROR]"로 시작하는 메시지와 함께 Error를 발생시키고 해당 메시지를 출력한 다음 해당 지점부터 다시 입력을 받는다.

재고 관리

  • 각 상품의 재고 수량을 고려하여 결제 가능 여부를 확인한다.
  • 고객이 상품을 구매할 때마다, 결제된 수량만큼 해당 상품의 재고에서 차감하여 수량을 관리한다.
  • 재고를 차감함으로써 시스템은 최신 재고 상태를 유지하며, 다음 고객이 구매할 때 정확한 재고 정보를 제공한다.

프로모션 할인

  • 오늘 날짜가 프로모션 기간 내에 포함된 경우에만 할인을 적용한다.
  • 프로모션은 N개 구매 시 1개 무료 증정(Buy N Get 1 Free)의 형태로 진행된다.
  • 1+1 또는 2+1 프로모션이 각각 지정된 상품에 적용되며, 동일 상품에 여러 프로모션이 적용되지 않는다.
  • 프로모션 혜택은 프로모션 재고 내에서만 적용할 수 있다.
  • 프로모션 기간 중이라면 프로모션 재고를 우선적으로 차감하며, 프로모션 재고가 부족할 경우에는 일반 재고를 사용한다.
  • 프로모션 적용이 가능한 상품에 대해 고객이 해당 수량보다 적게 가져온 경우, 필요한 수량을 추가로 가져오면 혜택을 받을 수 있음을 안내한다.
  • 프로모션 재고가 부족하여 일부 수량을 프로모션 혜택 없이 결제해야 하는 경우, 일부 수량에 대해 정가로 결제하게 됨을 안내한다.

멤버십 할인

  • 멤버십 회원은 프로모션 미적용 금액의 30%를 할인받는다.
  • 프로모션 적용 후 남은 금액에 대해 멤버십 할인을 적용한다.
  • 멤버십 할인의 최대 한도는 8,000원이다.

영수증 출력

  • 영수증은 고객의 구매 내역과 할인을 요약하여 출력한다.
  • 영수증 항목은 아래와 같다.
    • 구매 상품 내역: 구매한 상품명, 수량, 가격
    • 증정 상품 내역: 프로모션에 따라 무료로 제공된 증정 상품의 목록
    • 금액 정보
      • 총구매액: 구매한 상품의 총 수량과 총 금액
      • 행사할인: 프로모션에 의해 할인된 금액
      • 멤버십할인: 멤버십에 의해 추가로 할인된 금액
      • 내실돈: 최종 결제 금액
  • 영수증의 구성 요소를 보기 좋게 정렬하여 고객이 쉽게 금액과 수량을 확인할 수 있게 한다.

입출력 요구 사항

입력

  • 구현에 필요한 상품 목록과 행사 목록을 파일 입출력을 통해 불러온다.
    • public/products.md과 public/promotions.md 파일을 이용한다.
    • 두 파일 모두 내용의 형식을 유지한다면 값은 수정할 수 있다.
  • 구매할 상품과 수량을 입력 받는다. 상품명, 수량은 하이픈(-)으로, 개별 상품은 대괄호([])로 묶어 쉼표(,)로 구분한다.
[콜라-10],[사이다-3]
  • 프로모션 적용이 가능한 상품에 대해 고객이 해당 수량보다 적게 가져온 경우, 그 수량만큼 추가 여부를 입력받는다.
    • Y: 증정 받을 수 있는 상품을 추가한다.
    • N: 증정 받을 수 있는 상품을 추가하지 않는다.
Y
  • 프로모션 재고가 부족하여 일부 수량을 프로모션 혜택 없이 결제해야 하는 경우, 일부 수량에 대해 정가로 결제할지 여부를 입력받는다.
    • Y: 일부 수량에 대해 정가로 결제한다.
    • N: 정가로 결제해야하는 수량만큼 제외한 후 결제를 진행한다.
Y
  • 멤버십 할인 적용 여부를 입력 받는다.
    • Y: 멤버십 할인을 적용한다.
    • N: 멤버십 할인을 적용하지 않는다.
Y
  • 추가 구매 여부를 입력 받는다.
    • Y: 재고가 업데이트된 상품 목록을 확인 후 추가로 구매를 진행한다.
    • N: 구매를 종료한다.
Y

출력

  • 환영 인사와 함께 상품명, 가격, 프로모션 이름, 재고를 안내한다. 만약 재고가 0개라면 재고 없음을 출력한다.
안녕하세요. W편의점입니다.
현재 보유하고 있는 상품입니다.

- 콜라 1,000원 10개 탄산2+1
- 콜라 1,000원 10개
- 사이다 1,000원 8개 탄산2+1
- 사이다 1,000원 7개
- 오렌지주스 1,800원 9개 MD추천상품
- 오렌지주스 1,800원 재고 없음
- 탄산수 1,200원 5개 탄산2+1
- 탄산수 1,200원 재고 없음
- 물 500원 10개
- 비타민워터 1,500원 6개
- 감자칩 1,500원 5개 반짝할인
- 감자칩 1,500원 5개
- 초코바 1,200원 5개 MD추천상품
- 초코바 1,200원 5개
- 에너지바 2,000원 5개
- 정식도시락 6,400원 8개
- 컵라면 1,700원 1개 MD추천상품
- 컵라면 1,700원 10개

구매하실 상품명과 수량을 입력해 주세요. (예: [사이다-2],[감자칩-1])
  • 프로모션 적용이 가능한 상품에 대해 고객이 해당 수량만큼 가져오지 않았을 경우, 혜택에 대한 안내 메시지를 출력한다.
현재 {상품명}은(는) 1개를 무료로 더 받을 수 있습니다. 추가하시겠습니까? (Y/N)
  • 프로모션 재고가 부족하여 일부 수량을 프로모션 혜택 없이 결제해야 하는 경우, 일부 수량에 대해 정가로 결제할지 여부에 대한 안내 메시지를 출력한다.
현재 {상품명} {수량}개는 프로모션 할인이 적용되지 않습니다. 그래도 구매하시겠습니까? (Y/N)
  • 멤버십 할인 적용 여부를 확인하기 위해 안내 문구를 출력한다.
멤버십 할인을 받으시겠습니까? (Y/N)
  • 구매 상품 내역, 증정 상품 내역, 금액 정보를 출력한다.
==============W 편의점================
상품명		수량	금액
콜라		3 	3,000
에너지바 		5 	10,000
=============증	정===============
콜라		1
====================================
총구매액		8	13,000
행사할인			-1,000
멤버십할인			-3,000
내실돈			 9,000
  • 추가 구매 여부를 확인하기 위해 안내 문구를 출력한다.
감사합니다. 구매하고 싶은 다른 상품이 있나요? (Y/N)
  • 사용자가 잘못된 값을 입력했을 때, "[ERROR]"로 시작하는 오류 메시지와 함께 상황에 맞는 안내를 출력한다.
    • 구매할 상품과 수량 형식이 올바르지 않은 경우: [ERROR] 올바르지 않은 형식으로 입력했습니다. 다시 입력해 주세요.
    • 존재하지 않는 상품을 입력한 경우: [ERROR] 존재하지 않는 상품입니다. 다시 입력해 주세요.
    • 구매 수량이 재고 수량을 초과한 경우: [ERROR] 재고 수량을 초과하여 구매할 수 없습니다. 다시 입력해 주세요.
    • 기타 잘못된 입력의 경우: [ERROR] 잘못된 입력입니다. 다시 입력해 주세요.

실행 결과 예시

안녕하세요. W편의점입니다.
현재 보유하고 있는 상품입니다.

- 콜라 1,000원 10개 탄산2+1
- 콜라 1,000원 10개
- 사이다 1,000원 8개 탄산2+1
- 사이다 1,000원 7개
- 오렌지주스 1,800원 9개 MD추천상품
- 오렌지주스 1,800원 재고 없음
- 탄산수 1,200원 5개 탄산2+1
- 탄산수 1,200원 재고 없음
- 물 500원 10개
- 비타민워터 1,500원 6개
- 감자칩 1,500원 5개 반짝할인
- 감자칩 1,500원 5개
- 초코바 1,200원 5개 MD추천상품
- 초코바 1,200원 5개
- 에너지바 2,000원 5개
- 정식도시락 6,400원 8개
- 컵라면 1,700원 1개 MD추천상품
- 컵라면 1,700원 10개

구매하실 상품명과 수량을 입력해 주세요. (예: [사이다-2],[감자칩-1])
[콜라-3],[에너지바-5]

멤버십 할인을 받으시겠습니까? (Y/N)
Y 

==============W 편의점================
상품명		수량	금액
콜라		3 	3,000
에너지바 		5 	10,000
=============증	정===============
콜라		1
====================================
총구매액		8	13,000
행사할인			-1,000
멤버십할인			-3,000
내실돈			 9,000

감사합니다. 구매하고 싶은 다른 상품이 있나요? (Y/N)
Y

안녕하세요. W편의점입니다.
현재 보유하고 있는 상품입니다.

- 콜라 1,000원 7개 탄산2+1
- 콜라 1,000원 10개
- 사이다 1,000원 8개 탄산2+1
- 사이다 1,000원 7개
- 오렌지주스 1,800원 9개 MD추천상품
- 오렌지주스 1,800원 재고 없음
- 탄산수 1,200원 5개 탄산2+1
- 탄산수 1,200원 재고 없음
- 물 500원 10개
- 비타민워터 1,500원 6개
- 감자칩 1,500원 5개 반짝할인
- 감자칩 1,500원 5개
- 초코바 1,200원 5개 MD추천상품
- 초코바 1,200원 5개
- 에너지바 2,000원 재고 없음
- 정식도시락 6,400원 8개
- 컵라면 1,700원 1개 MD추천상품
- 컵라면 1,700원 10개

구매하실 상품명과 수량을 입력해 주세요. (예: [사이다-2],[감자칩-1])
[콜라-10]

현재 콜라 4개는 프로모션 할인이 적용되지 않습니다. 그래도 구매하시겠습니까? (Y/N)
Y

멤버십 할인을 받으시겠습니까? (Y/N)
N

==============W 편의점================
상품명		수량	금액
콜라		10 	10,000
=============증	정===============
콜라		2
====================================
총구매액		10	10,000
행사할인			-2,000
멤버십할인			-0
내실돈			 8,000

감사합니다. 구매하고 싶은 다른 상품이 있나요? (Y/N)
Y

안녕하세요. W편의점입니다.
현재 보유하고 있는 상품입니다.

- 콜라 1,000원 재고 없음 탄산2+1
- 콜라 1,000원 7개
- 사이다 1,000원 8개 탄산2+1
- 사이다 1,000원 7개
- 오렌지주스 1,800원 9개 MD추천상품
- 오렌지주스 1,800원 재고 없음
- 탄산수 1,200원 5개 탄산2+1
- 탄산수 1,200원 재고 없음
- 물 500원 10개
- 비타민워터 1,500원 6개
- 감자칩 1,500원 5개 반짝할인
- 감자칩 1,500원 5개
- 초코바 1,200원 5개 MD추천상품
- 초코바 1,200원 5개
- 에너지바 2,000원 재고 없음
- 정식도시락 6,400원 8개
- 컵라면 1,700원 1개 MD추천상품
- 컵라면 1,700원 10개

구매하실 상품명과 수량을 입력해 주세요. (예: [사이다-2],[감자칩-1])
[오렌지주스-1]

현재 오렌지주스은(는) 1개를 무료로 더 받을 수 있습니다. 추가하시겠습니까? (Y/N)
Y

멤버십 할인을 받으시겠습니까? (Y/N)
Y

==============W 편의점================
상품명		수량	금액
오렌지주스		2 	3,600
=============증	정===============
오렌지주스		1
====================================
총구매액		2	3,600
행사할인			-1,800
멤버십할인			-0
내실돈			 1,800

감사합니다. 구매하고 싶은 다른 상품이 있나요? (Y/N)
N

 

 

📌  기능 구현 목록

핵심 기능(클래스)부터 생각하고, 서서히 나누는 것을 생각했다. 

또 구현해야할 기능을 서술형으로 적었는데, 이렇게 해서 기능의 역할을 명확하게 나타낼 수 있었다.

1. 입력

  •  상품 목록(상품명,가격,재고,프로모션명), 행사(프로모션명,구매량,증정량,시작기간,종료기간) 목록을 불러온다.
  •  구매할 [상품-수량] 을 입력받는다. 개별 상품은 []로 묶어 쉼표(,)로 구분한다.
    •  잘못된 값을 입력할 경우 Error를 발생시키고 해당 지점부터 다시 입력을 받는다.
      •  구매할 상품과 수량 형식이 올바르지 않은 경우: "[ERROR] 올바르지 않은 형식으로 입력했습니다. 다시 입력해 주세요."
      •  존재하지 않는 상품을 입력한 경우: "[ERROR] 존재하지 않는 상품입니다. 다시 입력해 주세요."
      •  구매 수량이 재고 수량을 초과한 경우: "[ERROR] 재고 수량을 초과하여 구매할 수 없습니다. 다시 입력해 주세요."
      •  기타 잘못된 입력의 경우: "[ERROR] 잘못된 입력입니다. 다시 입력해 주세요."
  •  프로모션 적용이 가능한 상품에 대해 고객이 해당 수량보다 적게 가져온 경우, 그 수량만큼 추가 여부를 입력받는다.
    •  Y: 증정 받을 수 있는 상품을 추가한다.
    •  N: 증정 받을 수 있는 상품을 추가하지 않는다.
    •  잘못된 값을 입력할 경우: "[ERROR] 잘못된 입력입니다. 다시 입력해 주세요." 를 출력하고 다시 입력받는다.
  •  프로모션 재고가 부족하여 일부 수량을 프로모션 혜택 없이 결제해야 하는 경우, 일부 수량에 대해 정가로 결제할지 여부를 입력받는다.
    •  Y: 일부 수량에 대해 정가로 결제한다.
    •  N: 정가로 결제해야하는 수량만큼 제외한 후 결제를 진행한다.
    •  잘못된 값을 입력할 경우: "[ERROR] 잘못된 입력입니다. 다시 입력해 주세요." 를 출력하고 다시 입력받는다.
  •  멤버십 할인 적용 여부를 입력 받는다.
    •  Y: 멤버십 할인을 적용한다.
    •  N: 멤버십 할인을 적용하지 않는다.
    •  잘못된 값을 입력할 경우: "[ERROR] 잘못된 입력입니다. 다시 입력해 주세요." 를 출력하고 다시 입력받는다.
  •  추가 구매 여부를 입력받는다.
    •  Y: 재고가 업데이트된 상품 목록을 확인 후 추가로 구매를 진행한다.
    •  N: 구매를 종료한다.
    •  잘못된 값을 입력할 경우: "[ERROR] 잘못된 입력입니다. 다시 입력해 주세요." 를 출력하고 다시 입력받는다.

2. 출력

  •  환영 인사와 함께 상품명, 가격, 프로모션 이름, 재고를 안내한다.
  •  만약 재고가 0개라면 재고 없음을 출력한다.
  •  구매할 상품, 수량 입력 요청 메세지를 출력한다.
  •  프로모션 적용이 가능한 상품에 대해 고객이 해당 수량만큼 가져오지 않았을 경우, 혜택에 대한 안내 메시지를 출력한다.
  •  프로모션 재고가 부족하여 일부 수량을 프로모션 혜택 없이 결제해야 하는 경우, 일부 수량에 대해 정가로 결제할지 여부에 대한 안내 메시지를 출력한다.
  •  멤버십 할인 적용 여부를 확인하기 위해 안내 문구를 출력한다.
  •  영수증을 출력한다.
  •  추가 구매 여부를 확인하기 위해 안내 문구를 출력한다.

3. 재고 관리

  •  고객이 상품을 구매할 때마다, 결제된 수량만큼 해당 상품의 재고에서 차감한다.
  •  각 상품의 재고 수량 고려하여 결제 가능 여부를 확인한다.

4. 프로모션 할인

  •  오늘 날짜가 프로모션 기간 내에 포함된 경우에만 할인을 적용한다.
  •  프로모션은 N개 구매 시 1개 무료 증정(Buy N Get 1 Free)의 형태로 진행된다. (1+1 또는 2+1)
  •  프로모션 기간 중이라면 프로모션 재고를 우선적으로 차감하며, 프로모션 재고가 부족할 경우에는 일반 재고를 사용한다.
  •  프로모션 적용이 가능한 상품에 대해 고객이 해당 수량보다 적게 가져온 경우, 필요한 수량을 추가로 가져오면 혜택을 받을 수 있음을 안내한다.
  •  프로모션 재고가 부족하여 일부 수량을 프로모션 혜택 없이 결제해야 하는 경우, 일부 수량에 대해 정가로 결제하게 됨을 안내한다.

5. 멤버십 할인

  • 프로모션 적용 후 남은 금액(프로모션 미적용 금액)에 대해 멤버십 할인을 30% 적용한다.
  • 멤버십 할인의 최대 한도는 8,000원이다.

6. 최종 결제 금액

  •  총 구매액 = 상품의 가격 * 수량 을 계산한다.
  •  프로모션 할인을 적용한다.
  •  멤버십 할인 적용을 적용한다.

7. 영수증

  •  다음 내역을 출력 형식에 맞춘다.
    •  구매 상품 내역: 구매한 상품명, 수량, 가격
    •  증정 상품 내역: 프로모션에 따라 무료로 제공된 증정 상품의 목록
    •  금액 정보
      • 총구매액: 구매한 상품의 총 수량과 총 금액
      • 행사할인: 프로모션에 의해 할인된 금액
      • 멤버십할인: 멤버십에 의해 추가로 할인된 금액
      • 내실돈: 최종 결제 금액
 
 

 

 

📌  구현 과정

MVC 패턴을 적용해서 다음과 같이 폴더 구조를 정했다.

 

App.js에서 ShoppingController.js를 실행한다. 이 컨트롤러에서 InputView와 OutputView간 로직을 관리한다. 이는 models에 정의한 클래스들을 이용했다. Membership.js는 멤버십 할인을 적용한다. Product.js과 Promotion.js는 DataGenerator.js에 있는 파일 불러오기 함수로 인해 생성되는 객체 형태를 정의해 준 것이다. Stock.js에서 구매를 통한 재고 변경 로직 로직을 작성했다.

 

이번에는 TDD를 시도해보았다. 핵심 기능인 구매하는 기능부터 생각해보았다.

이를 통해 Stock.js를 구성할 수 있었고, 무엇부터 시작해야할지 개발의 순서를 정할 수 있었다. 계속 TDD를 적용하지는 못했지만, 처음 개발의 가닥을 잡는데는 큰 도움이 되었다.

import FILE_PATHS from '../src/constants/filePaths';
import fetchData from '../src/utils/DataGenerator';
import Stock from '../src/models/Stock';
import parseInput from '../src/utils/InputParser';
import validateItem from '../src/utils/ItemValidator';

describe('상품 구매 가능 여부 테스트', () => {
  test('입력한 상품 이름이 재고목록에 있고, 수량이 남아있으면 구매할 수 있다.', async () => {
    const initProducts = await fetchData(FILE_PATHS.PRODUCTS);
    const stock = new Stock(initProducts);
    const input = '[콜라-1],[사이다-1]';

    const parsedInputArray = parseInput(input);

    expect(validateItem(parsedInputArray, stock)).toBe(true);
      /*if (targetProducts.length === 2) {
        targetProducts.filter((product) => product.promotion); //not null. 즉 Promotion 상품 선택
      }
      targetProducts[0].quantity*/
    });
    //예외테스트
  });
  
//escribe("프로모션 상품 구매 테스트")

다 완성하지는 못했던 ShoppingTest.js코드

 

 

 

📌  배운 것들

  • arr.slice(begin, end) 메서드는 어떤 배열의 begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환한다. 원본 배열은 바뀌지 않는다. slice(1) 이면 인덱스 1부터 끝까지 반환한다.
  • 자료형 Map
    • 키: 값으로 구성
    • 객체와 달리, 키에 다양한 자료형을 허용한다.
    • map.set(key,value) : key를 이용해 value를 저장한다.
    • map.get(key) : 해당 key의 value를 반환한다. 
  • 객체에서 키값이 포함되어있는지 알고 싶을 때 -> 이것도 arr.filter() 메서드로 해결할 수 있다! 왜냐하면 객체의 키값은 객체[키]로 접근할 수 있기 때문이다. 즉 키까지 접근하면 Array의 메서드들을 쓸 수 있다.
  • parseInt("123",10) -> 10진법으로, 문자열이 유효한 숫자이면 해당하는 정수 변환 (아니면 NaN을 반환)
  • 파일 시스템에 접근하는 방법 : path
    • path.join()을 쓰면 실행환경에 맞게 구분자를 사용한다.
    • 파일 시스템 접근 시에는 절대 경로를 사용하는 것이 안전하다. 따라서 파일에 직접 접근하여 일을 수행하는 곳에서(ex. fetchData) path.resolve()를 사용하여 절대경로로 변환했다.
  • 배열에 값이 존재하는지 여부를 확인할 때, ( Array.length === 0 )을 사용한다.
    • 처음에 !Array를 썼는데, 이는 Array인지 아닌지 판별하는 것 이므로 적절하지 않다. 빈 배열[ ] 인 경우도 true가 되기 때문이다.
  • Javascript에서 객체는 참조로 전달된다.
    • this.__ 를 통해 값을 얻어오면, 이를 const 변수에 저장하더라도 객체의 해당 프로퍼티를 직접적으로 참조하고 있는 것이다.

 

📌  트러블 슈팅

* 파일 임포트가 안되는 에러 : .vscode폴더를 삭제하고 vscode를 다시 시작하니 되었다. workspace에 cspell을 함부로 추가하면 안되겠다는 생각이 들었다.

 

 

파일명을 대소문자만 변경했을 때 다음과 같은 에러를 마주했다.

* 에러 메세지:

Already included file name '파일경로' differs from file name '파일경로' only in casing.

 

이 경우 

프로젝트 루트의 tsconfig.json 파일에서 다음 옵션을 확인한다.

json
{ "compilerOptions": { "forceConsistentCasingInFileNames": true } }

이 옵션이 true로 설정되어 있다면, 파일 이름의 대소문자를 일관되게 유지해야 한다.

 

따라서 이를 false로 바꾸어주면 해결된다.

📌  소감

나는 이번에 메서드 줄이기, MVC패턴 적용하기 등 기능 외적으로 여러 요구사항을 맞추는데에 더 집중했다. 코드를 쓰다보니 어떻게 해야할지는 알겠는데, 자꾸 좀 더 좋은 코드를 쓰고 싶은 욕심이 들어서 메서드를 계속 나누고 기능 하나를 구현할 때마다 마음에 드는 코드로 리팩토링하곤 했다. 하지만 그러한 욕심으로 완전한 프로그램을 만드는 데에 실패하고 말았다.. 다른 것은 다 되는데, 왜인지 프로모션이 잘 적용되지 않았던 것이다. 일단 적용이 되게 했어야했는데, 메서드의 길이가 길어질 수록 계속 메서드를 나누려고 했다. 그러다보니 내가 만든 MVC 패턴에 갇혀 더이상 진전이 되지 않았다. "돌아가는 쓰레기를 만들어라." 라는 말을 되새기게 되었다. 우선순위를 잘못 설정했던 것이다. 기능 구현에 실패했기에 우테코는 떨어질 것 같지만.. 프리코스를 하면서 이번에 깨달은 점을 포함해서 여러 방면에서 큰 성장을 했다. 혼자서 코딩테스트 문제를 풀 때보다 자바스크립트에 대해 훨씬 많이 배울 수 있었고, 무엇보다 개발을 대하는 태도를 많이 배웠다.

 

학부 시절에 코딩을 할 때는 남들과 비교하고, 좋은 학점을 받아야 한다는 압박감에 개발을 별로 좋아하지 않았었다. 그래서 다른 직업을 탐색해보기도 했다. 하지만 막상 졸업을 하니 내 전공을 살리고 싶다는 생각이 들었다. 분명 전공으로 이걸 선택한 이유가 있었기 때문이다. 내가 개발을 좋아할 수 있을까? 개발자를 내가 직업으로 가져도 될까? 알고 싶은 마음으로 우테코에 지원한 것도 있다. 압박감에서 벗어나니 개발이 꽤 재미있었고 저학년 때 막 개발을 시작했을 때, 내가 느꼈던 성취감이나 보람찼던 감정들이 떠올랐다. 우테코에 합격하고 싶어서 성장하는 모습을 보여주겠다는 마음에 다른 누구도 아닌 나 자신의 성장에만 집중했다. 스터디원분들의 긍정적인 피드백도 정말 큰 도움이 되었다.(🥹 감사해요)

첫 오프라인 스터디날 사진 (내 노트북만 저리 화려하다ㅋㅋ)

 

 

이번 과제를 하며 처음으로 잠을 거의 자지 않고 하루종일 개발만 했다. 나는 재수를 할 때도, 시험 기간에도 절대 밤을 새지 않았는데 내가 밤을 몇 번씩 새가며 과제에 몰두했다는 게 놀라웠다.

맥북에 Flow라는 뽀모도로 앱을 켜놓고 코딩을 했다. 한 Flow 당 40분-60분 정도로 잡고 했다.

 

우테코에 도전한 나 자신에게 칭찬을..😀

 

 

프리코스 이후 나의 목표는 이렇다.

1. 이번 과제를 올해가 가기 전에 구현해보기

2. 과제 구현이 끝나면 프로그래머스에서 Javascript 코딩테스트 문제를 매일 하나씩 풀며 Javascript에 대한 감 놓치지 않기

3. 지금 참여하고 있는 프로젝트로 프론트엔드 프레임워크와 Typescript 익히기