EffectShop PostForm 버그 수정.

프로젝트 개인 Profile 페이지에서 자신의 Effect효과를 새로 만드는 PostForm 부분에서 css코드를 실시간으로 작성할때 버그가 발생했다.

CSS CODE textarea 안에다가 “ { ” 괄호를 제대로 안 닫으면 사진처럼 테스트 결과 보여주는 컴포넌트가 다른 컴포넌트와 겹치는 현상이 생겨났습니다. 이게 아마도 동적으로 css코드를 입력을하면 테스트 결과 보여주는 컴포넌트쪽에서 계속 바뀐 css코드를 업데이트해주는데 그때 정상적인 코드가 안불러와지면 이런 현상이 발생하는듯 하다.

추가적인 버그는 “[”대괄호 혹은 “(” 소괄호 를 입력하는순간 페이지의 모든 css가 제대로 작동이 되질 않는걸 볼 수 가 있습니다.

버그 정리:

1. “{” 중괄호 짝이 안맞으면 컴포넌트가 겹쳐지는 버그
2. “[” 대괄호, “(” 가 CSS Code textarea 에 포함되어있으면 해당 페이지의 css가 제대로 작동이 안된다.

예전에 백준에서 풀던 괄호유효성 검사 문제를 떠올리게 됬다. 이렇게 프로젝트에서 알고리즘 문제를 적용하게된 사례는 처음이것 같다.

알고리즘 코드:
추가적인 버그는 “[”대괄호 혹은 “(” 소괄호 를 입력하는순간 페이지의 모든 css가 제대로 작동이 되질 않는걸 볼 수 가 있습니다.

버그 정리:

1. “{” 중괄호 짝이 안맞으면 컴포넌트가 겹쳐지는 버그
2. “[” 대괄호, “(” 가 CSS Code textarea 에 포함되어있으면 해당 페이지의 css가 제대로 작동이 안된다.

예전에 백준에서 풀던 괄호유효성 검사 문제를 떠올리게 됬다. 이렇게 프로젝트에서 알고리즘 문제를 적용하게된 사례는 처음이것 같다.

알고리즘 코드:

function isValidCss(code){
  const bracket= [];
  for(let i=0;i<code.length;i++){
      if(code[i]==='{'){
          bracket.push(code[i]);
      }else if(code[i]==='}'){
          if(bracket.length>0){
              bracket.pop()
          }else return false;
      }else if(code[i]===']' || code[i]==='[' || code[i]===')' || code[i] === '('){
          return false;
      }
  }
  if(bracket.length===0) return true;
  else return false;
}

이렇게 cssCode가 들어오면 괄호들만 추출해서 LIFO 방식으로 중괄호에 유효성을 검사하였고 소괄호와대괄호가 코드에 포함이 되어있다면 과감없이 코드는 유효하지않는 false 를 반환하게 작성을 하였다.

실제코드에서 false 일때는 테스트 결과 보여주는 컴포넌트가 업데이트가 안되고 true일때만 결과가 업데이트 되는 방식으로 구현을 하였다.

버그 고친 결과:

css 코드가 유효하지 않을때는 테스트 컴포넌트는 업데이트가 안되는걸 볼수있다. 그리고 중괄호와 대괄호가 입력이 되도 페이지의 css가 깨지는 현상도 고칠 수 있었다. 유효하지 않은 코드인 경우 경고문을 발생시켰다.

느낀점:

처음으로 프로젝트에서 백준에서 풀어본 알고리즘문제로 버그를 수정한거 같아 너무 재밌다고 느꼈다. 버그느 수정했지만 더 효율적인 방법으로 버그를 고칠 수 있는지 더 고민을 해봐야겠다.