Today 요약

1. 스토리북
2. 코딩 테스트

---

1. What I Learned?

스토리북

스토리북에 대해서는 주변 지인들한테 이야기만 들어봤다. 디자인시스템 관련해서 멘토링을 받던 지인은 주로 스토리북을 이용해서 아주 작은 단위의 버튼 컴포넌트를 만들고 그걸 저장한 뒤 나에게 보여주었던 기억이 있다.

스토리북에 대해서는 그 정도만 기억하고 있다. 그러다가 올해 3월부터 새로운 멘토에게 멘토링을 받을 것 같은데, 멘토가 미리 스토리북이나 recoil에 대해서는 어느 정도 공부하고 왔으면 좋겠다는 이야기가 있었기 때문에, 오늘 간단하게 알아봤다.

스토리북은 컴포넌트 주도 개발을 위해서 필요한 라이브러리고 리액트, 리액트 네이티브, 스벨트, 뷰, 앵귤러 등 여러 다른 자바스크립트 라이브러리나 프레임워크와 같이 사용이 가능하다.

컴포넌트 주도 개발이라는 이름 자체에서 추측해볼 수 있는 건 재사용 가능한 컴포넌트를 스토리북에 저장해놓고언제든지 다른 프로젝트를 개발할 때 마다 가져와서 사용할 수 있도록 하는 게 아닐까라는 생각을 해봤다.

하지만 스토리북 공식문서를 보면 각 프로젝트마다 스토리북을 설치해서 실행하는 것 같다.

그렇다면 그냥 일반적으로 컴포넌트를 최대한 관심사를 분리해서 개발하는 것과 스토리북을 이용해서 개발하는 것의 차이는 무엇일까?

컴포넌트를 좀 더 시각화해서 관리할 수 있다는 것.. 그럼으로써 디자이너와 개발자간의 협업이 좀 더 개선될 수 있다는 부분일까? 지금은 스토리북을 한 번도 사용해보지 않았으니까 이 질문에 대답하기가 힘들 것 같다.

어느 정도 사용해보고 스스로에게 한 번 더 같은 질문을 던져보면 좋을 것 같다.

2. What I did?

코딩테스트 문제 풀이

OX 퀴즈

문제 설명

덧셈, 뺄셈 수식들이 'X [연산자] Y = Z' 형태로 들어있는 문자열 배열 quiz가 매개변수로 주어집니다. 수식이 옳다면 "O"를 틀리다면 "X"를 순서대로 담은 배열을 return하도록 solution 함수를 완성해주세요.

입출력 예

quiz	result
["3 - 4 = -3", "5 + 6 = 11"]	["X", "O"]
["19 - 6 = 13", "5 + 66 = 71", "5 - 15 = 63", "3 - 1 = 2"]	["O", "O", "X", "O"]

시간 복잡도가 O(n^2)이 걸리는 풀이과정을 사용했다. 이중 for문을 이용해서 배열의 요소하나하나마다 반복하면서 각 요소를 split로 나눠서 하나의 배열을 만들고 그 배열의 요소를 수식 계산이 가능하도록 해서 “O”, “X”를 판별했다.

function solution(quiz) {
  let answer = []
  let display = ''

  for (let i = 0; i < quiz.length; i++) {
    let splitArr = quiz[i].split(' ')
    for (let j = 0; j < splitArr.length; j++) {
      if (splitArr[j] === '-' || splitArr[j] === '+' || splitArr[j] === '=') {
        splitArr[j] = String(splitArr[j])
      } else {
        splitArr[j] = Number(splitArr[j])
      }
    }

    if (splitArr[1] === '-') {
      if (splitArr[0] - splitArr[2] === splitArr[4]) {
        display = 'O'
      } else display = 'X'
    } else {
      if (splitArr[0] + splitArr[2] === splitArr[4]) {
        display = 'O'
      } else display = 'X'
    }
    answer.push(display)
  }

  return answer
}

const quiz = ['3 - 4 = -3', '5 + 6 = 11']

console.log(solution(quiz))

quiz 배열 각 요소를 split로 공백을 기준으로 나눠서 splitArr에 담고

let splitArr = quiz[i].split(' ')

splitArr을 다시 for문으로 돌면서 기호가 아니라면 숫자를 Number 타입으로 바꾸고 기호에 따라서 각 배열에 있는 요소들의 수식을 계산한다.

for (let j = 0; j < splitArr.length; j++) {
  if (splitArr[j] === '-' || splitArr[j] === '+' || splitArr[j] === '=') {
    splitArr[j] = String(splitArr[j])
  } else {
    splitArr[j] = Number(splitArr[j])
  }
}

if (splitArr[1] === '-') {
  if (splitArr[0] - splitArr[2] === splitArr[4]) {
    display = 'O'
  } else display = 'X'
} else {
  if (splitArr[0] + splitArr[2] === splitArr[4]) {
    display = 'O'
  } else display = 'X'
}

그리고 계산 후 상황에 맞춰 판별된 “O”, “X”를 answer 배열에 담아서 마무리한다.

answer.push(display)