wecode +21 (9/7)

배운 것/개발한 것/정리한 것

- 오전 : 코드카타

문제

로마자에서 숫자로 바꾸기

 

1~3999 사이의 로마자 s를 인자로 주면 그에 해당하는 숫자를 반환해주세요. 로마 숫자를 숫자로 표기하면 다음과 같습니다.

 

Symbol Value I 1 V 5 X 10 L 50 C 100 D 500 M 1000

 

로마자를 숫자로 읽는 방법은 로마자를 왼쪽부터 차례대로 더하면 됩니다.

III = 3

XII = 12

XXVII = 27

입니다.

그런데 4를 표현할 때는 IIII가 아니라 IV 입니다.

뒤의 숫자에서 앞의 숫자를 빼주면 됩니다.

9는 IX입니다.

내 코드

function romanToNum(s) {
  let result = [];
  let total = 0;
  
  for (let i=0; i<s.length; i++) {
    if (s[i] === 'I') {
      if (s[i+1] === 'V') {
        result.push(4);
        i += 1;
        continue;
      } else if (s[i+1] === 'X') {
        result.push(9);
        i += 1;
        continue;
      }
      result.push(1);
    } else if (s[i] === 'V') {
      result.push(5);
    } else if (s[i] === 'X') {
      if (s[i+1] === 'L') {
        result.push(40);
        i += 1;
        continue;
      } else if (s[i+1] === 'C') {
        result.push(90);
        i += 1;
        continue;
      }
      result.push(10);
    } else if (s[i] === 'L') {
      result.push(50);
    } else if (s[i] === 'C') {
      if (s[i+1] === 'D') {
        result.push(400);
        i += 1;
        continue;
      } else if (s[i+1] === 'M') {
        result.push(900);
        i += 1;
        continue;
      }
      result.push(100);
    } else if (s[i] === 'D') {
      result.push(500);
    } else if (s[i] === 'M') {
      result.push(1000);
    }
  }
  console.log(result);
  return result.reduce((acc, val) => { return acc + val; });
}

정답 코드

function romanToNum(s) {
  let matching = {
      I: 1,
      V: 5,
      X: 10,
      L: 50,
      C: 100,
      D: 500,
      M: 1000
  }
  
  let strArr = s.split('');
  let numArr = strArr.map(el => matching[el]);
  let sum = 0;
  
  for (let i = 0; i < numArr.length; i++) {
      if (numArr[i] < numArr[i+1]) {
          sum += (numArr[i+1] - numArr[i]);
          i++;
      } else {
          sum += numArr[i];
      }
  }
  
  return sum;
}

=> 문제를 조금 잘 못 이해해서 코드가 불필요하게 길어졌다. 정답 솔루션에서는 먼저 모든 로마 문자와 숫자를 매칭해 둔 객체를 선언해놓고, 주어진 문자를 map 함수를 이용해서 숫자로 변환시켰다. 이후에 새로운 배열을  for문으로 돌면서 뒤의 숫자가 앞의 숫자보다 클 경우에는 1) 빼주고, 2) i++를 더해서 현재 i에서 i+2로 점프할 수 있게 처리했다.

 

- 오후

1. 세션 (인가/인증)

2. 코드 리팩토링

 - 반복되는 li요소에 대해서는 클래스 내의 render 함수에서 map을 사용해서 뿌려주는 방식을 계속해서 연습해야한다.

 - mock data 사용은 .js 파일에서 정의해서 import하는 방법과, json파일에서 가져오는 방법이 있다. (내일 세션 예정) js파일에서 불러오는 것을 미리 연습하여 적용해보았다.

3. 다음주 클론 프로젝트 사이트 리서치 

 - behance (디자인 사이트) : 프론트엔드는 계속되는 컴포넌트를 리액트를 사용하여 뿌려주는 연습을 할 수 있고, 백엔드는 크롤링 연습을 할 수 있다고 판단했다.

 - pinterest (수집 사이트) : 위와 동일한 이유

 - 스타일쉐어 : 위와 동일한 이유

4. TIL 블로깅 완료

내일 할 일

1. 오전 : 코드카타

2. 세션

 - 2시 : mockdata 활용

3. 오후

 - 블로깅 : 인증/인가, JS fetch, react component lifecycle, javascript reduce/map 다시!

회고

이론 공부도 좋지만 실제 코드를 작성하는 시간을 좀 더 늘려야 할 것 같다. 많이 쳐보고, 에러도 더 많이 다루어야 할 듯 하다. 내일 mockdata 세션 배우면 간단하게 데이터를 뿌려주는 리액트 페이지를 통해 연습해보는 것도 많은 도움이 될 것 같으니 꼭 실행하자.