🎯주제

입력한 문자열에서 숫자를 추출하여 더하는 계산기를 구현한다.

쉼표(,) 또는 콜론(:)을 구분자로 가지는 문자열을 전달하는 경우 구분자를 기준으로 분리한 각 숫자의 합을 반환한다.
- 예: "" => 0, "1,2" => 3, "1,2,3" => 6, "1,2:3" => 6
앞의 기본 구분자(쉼표, 콜론) 외에 커스텀 구분자를 지정할 수 있다. 커스텀 구분자는 문자열 앞부분의 "//"와 "\n" 사이에 위치하는 문자를 커스텀 구분자로 사용한다.
- 예를 들어 "//;\n1;2;3"과 같이 값을 입력할 경우 커스텀 구분자는 세미콜론(;)이며, 결과 값은 6이 반환되어야 한다.
사용자가 잘못된 값을 입력할 경우 "[ERROR]"로 시작하는 메시지와 함께 Error를 발생시킨 후 애플리케이션은 종료되어야 한다.

😖 어려웠던 점

처음에는 함수형 프로그래밍에 익숙해져 있었기 때문에 클래스 문법이 낯설고 어렵게 느껴졌었다. 객체 지향 프로그래밍의 개념을 JavaScript에 적용하는 것이 특히 도전적이었다.
사실 처음에 class를 사용하서 코드를 짜는 것을 보고 앞이 막막하였다. 하지만 포기하지 않고 계속 공부해보고 코드를 짜보니 점차 익숙해져서 과제를 완성해볼 수 있었다.
이전에도 클래스 문법을 많이 들어보았지만 요즈음에는 클래스보다 함수형을 더 많이 쓴다는 이유로 공부를 깊숙히 하지 못하였지만 이번 우테코 프리코스를 통해서 자세히 공부해볼 수 있었단 계기가 되었다.

또한, 테스트코드에 대해서도 배울 수 있었다. 이 우테코 프리코스에서는 Jest를 이용하여 테스트코드를 짰다. 추가적으로 TDD 개념에 대해서도 자세히 알게 되었다.

요구사항을 꼼꼼하게 잘 확인하자❗

기능 목록 작성

이번 과제를 통해서 가장 크게 깨달은 것은 기능 목록 작성의 중요성이다.
저는 처음에 이것이 왜 문제 조건에 있을까 의아해 하였지만 기능 목록 작성을 하고 문제를 조금씩 풀어보니 확 깨닫게 되었다.
제가 작성한 기능 목록 작성에 맞춰서 코드를 순서대로 짜보니 문제 전체 맥락을 파악할 수 있게 되었고, 문제를 차근차근 더욱 더 체계적으로 풀 수 있게 되었다.
이전에는 보통 프로젝트를 할 때 코드를 일단 먼저 짜서 다음 것을 생각하는 습관이 있었는데, 이번 프리코스 1주차 문제를 통해서 기능 목록 작성의 중요성에 대해서 크게 깨닫게 되었다.
기능 목록 작성을 하였을 때 가장 크게 깨달은 것이, 막상 코드를 먼저 짜고 다음 것을 생각하면 세부적인 부분들을 놓칠 확률이 매우 크다.
하지만 코드를 작성하기 전에, 기능 목록 작성하는 시간에 몰두하고 깊이 생각을 하고 난 뒤에 코드를 기능 목록 작성에 맞춰서 짜면 평소에 놓칠 수 있었던 세부적인 부분들을 빠짐없이 고려하고 더 완벽한 코드를 짤 수 있었다.
또한, Edge case(예외 케이스)들을 떠올릴 때도 매우 큰 도움을 얻을 수 있었다.
그래서 모든 문제를 풀 때, 코드 작성에 바로 들어가는 것이 아닌 기능 목록 작성에 시간을 먼저 쏟고 꼼꼼히 생각하고 작성한 뒤에 코드를 작성하는 것이 매우 중요하다고 깨달았다.

📖 배웠던 점

1. 자바스크립트 class 의 필수 개념

자바스크립트에서 클래스(Class)는 객체 지향 프로그래밍의 핵심 개념이다.
ES6에서 도입된 이후, 클래스는 더 직관적이고 구조화된 코드 작성을 가능하게 되었다.

1. 클래스 선언

클래스는 class 키워드를 사용하여 선언.

class Person {
  // 클래스 내용
}

2. 생성자 (Constructor)

생성자는 클래스의 인스턴스가 생성될 때 자동으로 호출되는 특별한 메서드이다.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
 
const person = new Person('홍길동', 30);
console.log(person.name); // 출력: 홍길동

3. 메서드 (Methods)

클래스 내에서 함수를 정의하여 메서드를 만들 수 있다.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
 
  sayHello() {
    console.log(`안녕하세요, 제 이름은 ${this.name}입니다.`);
  }
}
 
const person = new Person('홍길동', 30);
person.sayHello(); // 출력: 안녕하세요, 제 이름은 홍길동입니다.

this 개념

자바스크립트에서 this는 현재 실행 컨텍스트를 가리키는 키워드이다.
클래스 내에서 this는 주로 현재 인스턴스를 참조하는 데 사용된다.

클래스의 메서드 내에서 this는 해당 메서드를 호출한 객체를 가리킨다.

class Person {
  constructor(name) {
    this.name = name;
  }
 
  greet() {
    console.log(`안녕하세요, ${this.name}입니다.`);
  }
}
 
const person = new Person('김철수');
person.greet(); // 출력: 안녕하세요, 김철수입니다.

테스트코드 (TDD)

이번 과제에서 테스트 코드는 문자열 계산기(String Calculator)를 테스트하는 것이 주어졌다.

Jest를 사용한 테스트 프레임워크를 사용하였다.
입력을 모킹(mocking)하고 출력을 스파이(spy)하여 테스트를 수행하였고
다양한 입력 시나리오에 대한 테스트 케이스를 포함하고 있다.
예를들어,
주요 테스트 케이스 유형:

기본 구분자를 사용한 계산 (쉼표, 콜론)
커스텀 구분자 사용
예외 처리 (음수, 숫자가 아닌 입력, 잘못된 구분자 사용 등)
빈 입력 처리
다양한 에러 상황 테스트

등을 테스트해볼 수 있었다.

이 테스트 코드는 TDD(Test-Driven Development) 방식이다. 문자열 입력을 받아 구분자로 분리하고 숫자들의 합을 계산하는 기능을 테스트하였다.
이 테스트 스위트는 입력 유효성 검사, 다양한 구분자 처리, 예외 상황 처리 등 문자열 계산기의 주요 기능과 Edgy case를 포괄적으로 다루었다.

TDD?

TDD는 소프트웨어 개발 방법론으로, 실제 코드를 작성하기 전에 테스트 코드를 먼저 작성하는 방식이다. 이 방법은 코드의 품질을 향상시키고, 버그를 줄이며, 개발 프로세스를 더 효율적으로 만드는 것을 목표로 한다.

2. 폴더와 파일 기능별로 명략하게

이번 과제에서 사용된 폴더구조이다.

📦src
 ┣ 📂constants // 애플리케이션에서 사용되는 상수들을 모아놓은 폴더
 ┃ ┣ 📜error.js // 에러 메시지 관련 상수 정의
 ┃ ┗ 📜message.js // 사용자 인터페이스 메시지 관련 상수 정의
 ┣ 📜App.js // 애플리케이션의 메인 로직을 관리하는 클래스
 ┣ 📜Calculator.js // 문자열 계산 로직을 담당하는 클래스
 ┣ 📜index.js // 애플리케이션의 진입점 (entry point)
 ┗ 📜Input.js // 사용자 입력을 처리하는 클래스

이에 대해서 MVC 패턴이라는 것이 있다.

코드가 보통 많아지면 어떤 코드인지 파악하기 힘들고 유지보수가 힘들다.
그래서 프로그래머들이 패턴들과 규칙성들을 정리한 것이 MVC 패턴이다.

즉, MVC패턴은 유지보수를 어떻게 하면 편하게 할 수 있을까를 고민하다가 만들어진 패턴 중 하나이다.