[JavaScript STUDY] 숫자 로마자로 변환

---

현재 값

2. 데이터 > 2-3. 데이터 구조화 및 해석에 대해 알아봅시다.

---

원하는 값

II. 데이터 > II-3. 데이터 구조화 및 해석에 대해 알아봅시다.

---

ex)데이터 라는 대단원이 있고 대단원의 넘버 다시 - + 중단원의 넘버가 붙는 형식으로 변환을 해야했다.

기존의 백엔드에서는

hordr , mordr , sordr 이라는 값을 준다 ( 현재 실제 데이터 hordr = null mordr = 2 sordr = 3 )

const corswrOrdrArr = [hordr, mordr, sordr].filter(e => e);

필터링을 해서 hordr null 값을 빼고 mordr 2와 sordr 3을 담는다.

기존의 화면에 2. 데이터 > 2-3. 데이터 구조화 및 해석에 대해 알아봅시다. result 코드

let unit = '';

const result = corswrCnArr.map((name, index) => {
	unit += index === 0 ? corswrOrdrArr[index] : `-${corswrOrdrArr[index]}`;

    return `${unit}. ${name}`;
});

corswrOrdrArr 의 배열 [2, 3]을 map함수로 돌린다. index가 0이면 corswrOrdrArr[index]를 넣고 아니라면 -${corswrOrdrArr[index]} 앞에 -의 기호를 넣은 값을 넣으라는 함수이다.

2. 데이터 > 2-3. 데이터 구조화 및 해석에 대해 알아봅시다. 의 값이 나오게 된다.

로마자 추가 구현

대단원 뒤에 붙어야 하므로 대단원이 아닌 값은 로마숫자-숫자 값이 되어야한다.

const corswrRomanOrdrArr = corswrOrdrArr.map((e) => toRoman(e || 0));

function toRoman(num: number): string {
	const roman: Record<string, number> = {M:1000, CM:900, D:500, CD:400, C:100, XC:90, L:50, XL:40, X:10, IX:9, V:5, IV:4, I:1};
    let str = '';

	for (let i of Object.keys(roman)) {
    	let q = Math.floor(num / roman[i]);
        num -= q * roman[i];
        str += i.repeat(q);
        }

return str;
}

corswrRomanOrdrArr라는 변수를 만들고 기존의 corswrOrdrArr를 필터링 한 값에 toRoman 함수를 추가했다.

---

toRoman 함수 설명

ex )

입력값	결과값
13	XIII

• 먼저 함수에 숫자 13이 입력으로 전달된다.
• 함수는 빈 문자열인 str을 생성한다.
• roman 객체를 사용하여 주어진 숫자를 로마 숫자로 변환한다.
• Object.keys(roman)을 통해 roman 객체의 키를 반복한다.

이제 이를 숫자 13에 적용해보자

const roman: Record<string, number> = {M:1000, CM:900, D:500, CD:400, C:100, XC:90, L:50, XL:40, X:10, IX:9, V:5, IV:4, I:1};

1. 처음 로마 숫자 키는 'M'이다. 13을 1000으로 나눈 몫은 0이므로 'M'은 결과 문자열에 추가되지 않는다.

2. 다음 로마 숫자 키는 'CM'이다. 13을 900으로 나눈 몫은 0이므로 'CM'은 결과 문자열에 추가되지 않는다.

3. 다음으로는 'D'이다. 13을 500으로 나눈 몫은 0이므로 'D'는 결과 문자열에 추가되지 않는다.

4. 다음으로 'CD'이다. 13을 400으로 나눈 몫은 0이므로 'CD'는 결과 문자열에 추가되지 않는다.

5. 그 다음은 'C'이다. 13을 100으로 나눈 몫은 0이므로 'C'는 결과 문자열에 추가되지 않는다.

6. 그 다음은 'XC'이다. 13을 90으로 나눈 몫은 0이므로 'XC'는 결과 문자열에 추가되지 않는다.

7. 그 다음은 'L'이다. 13을 50으로 나눈 몫은 0이므로 'L'은 결과 문자열에 추가되지 않는다.

8. 그 다음은 'XL'이다. 13을 40으로 나눈 몫은 0이므로 'XL'은 결과 문자열에 추가되지 않는다.

9. 그 다음은 'X'이다. 13을 10으로 나눈 몫은 1이므로 'X'가 결과 문자열에 추가된다.

10. 남은 숫자는 13에서 10(1 * 10)을 뺀 3이다. 다음 순서로 진행한다.

11. 다음은 'IX'이다. 3을 9로 나눈 몫은 0이므로 'IX'는 결과 문자열에 추가되지 않는다.

12. 그 다음은 'V'이다. 3을 5로 나눈 몫은 0이므로 'V'는 결과 문자열에 추가되지 않는다.

13. 그 다음은 'IV'이다. 3을 4로 나눈 몫은 0이므로 'IV'는 결과 문자열에 추가되지 않는다.

14. 마지막으로 'I'이다. 3을 1로 나눈 몫은 3이므로 'I'가 결과 문자열에 추가된다.

그 결과, 숫자 13은 'XIII'로 변환된다.

result 부분도 대단원(로마자 표기) 부분은 index가 0이면 corswrRomanOrdrArr[index]로 수정해준다.

const result = corswrCnArr.map((name, index) => {
	unit += index === 0 ? corswrRomanOrdrArr[index] : `-${corswrOrdrArr[index]}`;
					
	return `${unit}. ${name}`;
});

---

결과

II. 데이터 > II-3. 데이터 구조화 및 해석에 대해 알아봅시다.

---