[Assignment 6 회고록] 솔라커넥트 - Sorting Machine

🔗 배포링크

🔗 Github

---

과제를 끝내고 회고 내용

🔰 1. 자바스크립트 날짜 옵션 주기

Date()를 사용할 때 옵션을 추가하면, 원하는 날짜 스트링 형식을 훨씬 간결하고 빠르게 구현할 수 있다.

🔰 2. 테스트 코드 작성

이번 과제를 하면서 간단하지만, 테스트 코드를 작성해보았다.
(자주 쓰지 않으면 금방 까먹게 된다. 테스트 코드도 계속 공부해야겠다💪)

• 정규표현식 테스트 실행 > 테스트 코드
• 오름차순/내림차순 테스트 실행 > 테스트 코드
• 입력데이터 배열로 변환 테스트 실행 > 테스트 코드

🔰 3. 정렬 알고리즘

입력데이터의 형식은 “숫자,숫자,숫자…” (예> 1,2,3,4) 이렇게만 보고 정렬은 간단하군!
복잡하게 생각하지 말고 구현이 쉬운 버블 정렬을 선택했는데...
회고록을 쓰면서 성능이 더 좋은 정렬 알고리즘을 구현했어야 했나...? 싶은 마음이 든다.😥
> 정렬 알고리즘 시간복잡도

---

과제 내용

1. 타이머

• 재사용 가능한 Timer 컴포넌트 만들기
• 한국 표준 시 기준으로 타이머 생성
  “ko-KR” 지역시간 표기법 (예> 2021년 7월 20일 화요일),
  “en-US” 지역시간 표기법 (예> Tuesday July 20, 2021)

2. 입력

• 입력 데이터의 형식은 “숫자,숫자,숫자…” (예> 1,2,3,4)
• 잘못된 형식의 입력 데이터는 예외처리 필요

3. 시작 버튼 및 결과

• 사용자가 시작 버튼을 누르면 소팅이 시작.
• 오름차순 결과가 바로 보여지고, 3초 후 내림차순 결과 보여주기
• 결과 데이터의 형식은 “숫자, 숫자, 숫자…” (예> 1, 2, 3, 4)
• 알고리즘은 소팅알고리즘(sort)을 사용하지 않고, 본인이 구현할 수 있는 정렬 방법으로 직접 구현

---

구현 내용정리

🔰 1. 타이머 >> 구현코드

• setInterval() 함수를 통해 new Date()를 1초마다 다시 받아온다.
• dateLocalFunc() 함수를 생성하여 보여줘야 할 지역시간 표기법으로 변경한다.
• toLocaleString() : 사용자의 문화권에 맞는 시간표기법으로 년,월,일 시간을 리턴한다.

⭐ toLocaleString 함수 사용할 때, 아래처럼 다양한 옵션이 있는지 몰랐다.
옵션만 잘 사용해도 나중에 날짜 관련 코드 짜는 데 많은 도움이 될 것 같다!!
참고 - MDN - Intl.DateTimeFormat() constructor

`weekday`
- "long" (e.g., Thursday) /  "short" (e.g., Thu) / "narrow" (e.g., T).

`year`
- "numeric" (e.g., 2012) / "2-digit" (e.g., 12)

`month`
- "numeric" (e.g., 2) / "2-digit" (e.g., 02) / "long" (e.g., March) / "short" (e.g., Mar) / "narrow" (e.g., M)

`day`
- "numeric" (e.g., 1) / "2-digit" (e.g., 01)

`timeZone`
- The time zone to use. 
- The only value implementations must recognize is "UTC"; the default is the runtime's default time zone. 
- Implementations may also recognize the time zone names of the IANA time zone database, such as "Asia/Shanghai", "Asia/Kolkata", "America/New_York".

---

🔰 2. 입력 >> 구현코드

• 정규식으로 “숫자,숫자,숫자…”만 허용되고, 그 외는 에러로 간주하여 시작버튼을 누를 수 없도록 하였다.

• 그런데 결과값에는 공백이 포함되어 있고, “숫자,숫자,숫자…”만 입력하기엔 사용자가 공백을 입력하는 경우도 있을 것 같아 정규식에 콤마 "," 앞 뒤로 공백을 허용하도록 변경하였다.

• 정규식이 맞게 되는지 확인을 위해 테스트 코드를 작성하여 확인했다.

// 정규 표현식
const inputRegEx = /^(([0-9])+[\s]?,[\s]?)*([0-9]+)$/;

---

🔰 3. 시작 버튼 및 결과 >> 구현코드

• 시작 버튼을 누르면 stringToArray() 함수로 입력된 값을 콤마"," 기준으로 나누고, 모든 요소를 숫자로 변환한 배열 값을 반환시킨다.
• bubbleSort(값, 정렬방식) 에 따라 정렬되도록 함수를 실행시킨다.
• 오름차순이 되고 3초 후 내림차순이 보이는 로직을 구현하기 위해 Promise를 사용하였다.

new Promise((resolve, _reject) => {
    // 오름차순 로직 구현
    setTimeout(() => {
      resolve();
    }, 3000);
}).then(() => {
  // 내림차순 로직 구현
});

• 정렬하는 중에 input값 수정 및 button 클릭 이벤트가 발생하지 않도록 disabled 시켰다.
• 또, 내림차순은 3초 뒤 결과값이 나타나므로 기다리는 동안 Loading... 텍스트를 보여준다.
• 초기화 버튼을 추가하여 input값 및 소팅 결과를 초기화시킬 수 있도록 구현했다.

---

👀 아쉬웠던 점과 해결방안

1. 정렬 알고리즘이라 당연히 양의 정수의 숫자로 생각했는데, 음수나 소수점에 대한 정렬도 되어야 한다. ➡ 리팩토링 하면서 테스트코드까지 함께 작성해봐야겠다.