[우테코 8기 프리코스] 1주차 과제 후기

우아한 테크코스 프리코스 1주 차 후기

돌고 돌아 우아한 테크코스의 계절이 왔습니다.

우아한 테크코스는 5주간 프리코스에서 과제를 수행하고, 이후에 테스트를 봐서 본과정에 입과 할 교육생을 뽑습니다.

작년에는 싸피에서 프로젝트를 하느라 지원을 못했지만 이번에는 잘 준비해서 입과를 노리고 있습니다.

 

과제 소개

첫주차는 문자열 덧셈 계산기를 구현하는 것이 과제로 나왔습니다.

웹페이지를 구현하는 것은 아니고 Node.js 환경에서 콘솔 입출력을 사용해 계산기를 구현하는 것입니다.

문자열이 주어지면 //문자와 \n문자 사이에 있는 문자를 파싱 하여 이를 구분자로 사용하는 이어지는 숫자들의 합을 구하는 것이 과제입니다.

예를 들어 다음과 같이 입력이 주어지면

//&\n1&2&3

구분자는 //문자와 \n문자 사이에 있는 &문자가 됩니다.

따라서 &문자를 기준으로 뒤의 문자열인 1&2&3을 split하고 숫자들을 다 더하면 됩니다.

입력에 구분자가 없을 수도 있습니다.

4,10,3

입력에 구분자가 존재하던 존재하지 않던 ,와 :은 기본 구분자로서 작동돼야 합니다.

따라서 위의 경우 결과는 17이 출력됩니다.

 

요구사항

요구사항은 기능 요구 사항, 입출력 요구 사항, 프로그래밍 요구 사항으로 나눠져 있어 개발에 들어가기 전에 정독했습니다.

기본적으로 코드 컨벤션은 airbnb 스타일을 지키고 커밋 컨벤션은 angular.js의 컨벤션을 지키라고 명시되어 있습니다.

 

개발

개발에 들어가기 앞서 기능 목록과 실행 흐름을 README.md에 작성했습니다.

# javascript-calculator-precourse
## 기능 목록

> 쉼표(,) 또는 콜론(:)을 구분자로 가지는 문자열을 전달하는 경우 구분자를 기준으로 분리한 각 숫자의 합을 반환한다.

- [ ] 1. 입력값으로 주어진 문자열을 구분자를 기준으로 분리하여 반환한다.   
(`string => Array<string>`) 
- [ ] 2. 입력값으로 주어진 숫자의 합을 반환한다.   
(`Array<number> => number`)


> 앞의 기본 구분자(쉼표, 콜론) 외에 커스텀 구분자를 지정할 수 있다. 커스텀 구분자는 문자열 앞부분의 "//"와 "\n" 사이에 위치하는 문자를 커스텀 구분자로 사용한다.

- [ ] 1. 입력값으로 커스텀 구분자를 받아서, 커스텀 구분자를 기준으로 split하는 함수를 반환한다.   
(`string => Function`)

> 사용자가 잘못된 값을 입력할 경우 "[ERROR]"로 시작하는 메시지와 함께 Error를 발생시킨 후 애플리케이션은 종료되어야 한다.

- [ ] 1. 잘못된 입력값이 들어올 경우 Error를 Throw 한다.

## 실행 흐름
- [ ] 1. 사용자의 입력값을 받습니다.   
(형식: "" => 0, "1,2" => 3, "1,2,3" => 6, "1,2:3" => 6, ?//;\n1;2;3" => 6)
- [ ] 2. 입력값을 구분자와 나머지 문자열로 파싱합니다. 입력값이 잘못됐을 경우 Error를 Throw 합니다.
- [ ] 3. 주어진 구분자에 따라 split 함수를 생성합니다.
- [ ] 4. 나머지 문자열을 split 함수에 넘겨 숫자의 배열을 리턴받습니다.
- [ ] 5. 숫자를 다 더합니다.
- [ ] 6. 결과를 출력합니다.

요구사항을 보면 기능 구현 전에 README.md에 구현 목록을 정리하고 개발을 하라고 권장합니다.

따라서 프로그램 실행흐름을 상상하며 최대한 예상되는 기능을 작성하려고 노력했습니다.

하지만 개발에 들어가자 제가 생각보다 모든 경우를 고려하지 않았다는 것을 깨달았고 필요한 기능이 있으면 README.md에 추가하며 개발했습니다.

기능 목록 단위로 개발하는 것을 원칙으로 우선 구현하는 것을 목표로 두었습니다.

이후 magic number와 magic literal을 상수 파일로 분리하고 airbnb 컨벤션 적용 등 코드 구조적으로 개선을 했습니다.

 

결과

아직 제출은 하지 않았지만 정상실행과 테스트는 다음과 같이 통과했습니다.

실행 결과

테스트 실행 결과

 

 

README.md는 개발중에 계속 추가 및 변경해서 최종적으로 다음과 같이 변했습니다.

# javascript-calculator-precourse

## 실행 흐름
- [x] 1. 사용자의 입력값을 받습니다.    
(형식: "" => 0, "1,2" => 3, "1,2,3" => 6, "1,2:3" => 6, "//;\n1;2;3" => 6)

- [x] 2. 입력값을 구분자와 나머지 문자열로 파싱합니다.   
      2-1. 시작 splitter(`//`)와 마지막 splitter(`\n`)가 둘다 존재하지 않으면(`SPLITTER_NOT_EXISTS`) 커스텀 구분자가 없는것으로 판단하고 입력으로 들어온 문자열을 내보냅니다.   
      2-2. 시작 splitter(`//`)와 마지막 splitter(`\n`)가 둘다 존재하고 정상 위치에 있으면(`START_SPLITTER_POSITION` ,`END_SPLITTER_POSITION`) `delimiter`와 `numberString`을 파싱하고 리턴합니다.   
      ERROR. 이외의 입력값은 오류로 판단하여 Error를 Throw 합니다.

- [x] 3. 주어진 구분자에 따라 split 함수를 생성합니다.

- [x] 4. 문자열을 split 함수에 전달하여 배열로 변환합니다.

- [x] 5. 배열을 `convertArrToNumArr` 메서드에 전달하여 숫자 배열로 변환합니다.
      5-1. 변환중에 `NaN`이 있으면 Error를 Throw 합니다.
      ERROR. 숫자가 양수가 아니면 Error를 Throw 합니다.

- [x] 6. 숫자를 다 더합니다.

- [x] 7. 결과를 출력합니다.

<br/>
   
## 기능 목록

> 문자열을 커스텀 구분자와 숫자 문자열로 파싱하여 튜플형태로 반환한다.

- [x] 1. 시작 splitter(`//`)와 마지막 splitter(`\n`)의 시작 위치를 `startIndexOfSplitter`와 `endIndexOfSplitter`에 저장한다.

- [x] 2. 시작 splitter(`//`)와 마지막 splitter(`\n`)가 둘다 존재하지 않으면(`SPLITTER_NOT_EXISTS`) 입력으로 들어온 문자열을 튜플 형태로 내보낸다.   
      (`string => [null, string]`)

- [x] 3. 시작 splitter(`//`)와 마지막 splitter(`\n`)가 둘다 존재하고 정상 위치에 있으면 `delimiter`와 `numberString`을 파싱하고 리턴한다.   
      (`string => [delimiter, numberString]`)

- [x] 4. 이외의 경우 입력이 잘못된 것으로 판단하여 Error를 Throw 한다.
      
<br/>

> 쉼표(,) 또는 콜론(:)을 구분자로 가지는 문자열을 전달하는 경우 구분자를 기준으로 분리한 각 숫자의 합을 반환한다.

- [x] 1. 입력값으로 주어진 문자열을 구분자를 기준으로 배열로 변환하여 반환한다.   
(`string => Array<string>`) 

- [x] 2. 배열을 숫자의 배열로 변환한다.   
      ERROR. 숫자가 아닌 값(`NaN`)이 있으면 Error를 throw 한다.

- [x] 3. 입력값으로 주어진 숫자의 합을 반환한다.   
(`Array<number> => number`)
    
<br/>    

> 앞의 기본 구분자(쉼표, 콜론) 외에 커스텀 구분자를 지정할 수 있다. 커스텀 구분자는 문자열 앞부분의 "//"와 "\n" 사이에 위치하는 문자를 커스텀 구분자로 사용한다.

- [x] 1. 입력값으로 커스텀 구분자를 받아서, 커스텀 구분자를 기준으로 split하는 함수를 반환한다.   
(`string => Function`)
    
<br/>

> 사용자가 잘못된 값을 입력할 경우 "[ERROR]"로 시작하는 메시지와 함께 Error를 발생시킨 후 애플리케이션은 종료되어야 한다.

- [x] ERROR. 잘못된 입력값이 들어올 경우 Error를 Throw 한다.

## 메서드

### Class App

#### `run() => void`
> 메인 실행 메서드
<br/>

#### `getUserInput() => string`
> 사용자의 입력을 받아 문자열을 반환하는 메서드
<br/>

#### `parseStringToDelimiterAndNumberString(string) => [customDelimiter, numberString]`
> 문자열을 받아 `//`와 `\n`를 기준으로 커스텀 구분자와 숫자문자열로 파싱하는 메서드
<br/>

#### `generateCustomSplitFunction(delimiter) => Function`
> 커스텀 구분자를 받아서 해당 구분자로 문자열을 분리하는 함수를 반환하는 메서드
<br/>

#### `convertArrToNumArr(arr) => Array<number>`
> 문자열 배열을 받아 숫자 배열로 변환하여 반환하는 메서드

 

후기

과제를 진행하며 우테코에서 지향하는 바를 조금이나마 이해할 수 있었습니다.

첫 주차 과제여서 쉬운 것도 있지만 구현보다 구현 목록을 어떻게 정리할지, README.md를 어떻게 작성할지 고민하고 계획하는 시간이 길었습니다.

실무레벨에서의 복잡한 개발은 개발하는 것보다 요구사항을 분석하고, 단위 기능을 쪼개는 것이 중요해서 우테코에서 과제를 이렇게 내지 않았나 싶습니다.

구현 목록을 정리할 때 메서드 단위로 쪼갰어야 했는데 흐름대로 쪼개서 구현할 때 괴리가 생겼던 게 아쉬움으로 남았습니다.

2주 차에는 이를 개선하겠습니다.