서론
이번주에 실전 프로젝트가 마무리 된다.
2회차 프로젝트였지만 부족함을 많이 느낀다.
부족함을 가장 많이 느끼는 부분은 속도적인 측면.
분명히, 코드의 질적으로나 실력적으로나 개인적으로는 많이 성장했다고 느끼지만
여러 페이지의 구현을 동시에 하는 건 아직 조금 버겁다.
계기
공통 컴포넌트를 사용하는데 이러한 Warning 메세지가 출력되는 것을 발견했다.
지금까지는 없던 메시지라서 처음에는 원인을 알 수 없어 당황했다.
원인
우리의 프로젝트에서 애니메이션 효과를 위해 framer-motion을 도입 한 이후 출현했다는 점을
중점으로 두고 구글링을 시작했다.
결론적으로는 Styled-components 에서 늘상 작성하던 커스텀 속성, 사용자 정의 속성의 네이밍 컨벤션 관련 에러다.
Styld-components를 단일로 사용했을 때는 문제되지 않았으나, DOM 요소에 직접적으로 접근하는
framer-motion을 혼용했을 때, React가 카멜케이스로 작성된 커스텀 속성을 인식하지 못하고
React 자체적으로 소문자와 대시(-)를 이용한 케밥 케이스를 사용하도록 권장하기 때문에 경고가 발생한다.
JSX 와의 혼용을 막기 위해서라고 추측된다.
생각
그러나, Warning 메시지와 별개로 속성은 적용되고 있었으며,
경고 자체가 성능과 전혀 관련이 없는 작성 규칙에 의한 메시지였으므로
무시하고 넘어가더라도 크게 문제가 되지 않을 것이라고 판단했다.
실제로 모든 커스텀 속성의 이름을 케밥 케이스, 그러니까 모두 소문자로 바꾸는 것으로
해결이 가능했지만 이는 프로젝트의 코드 컨벤션을 전부 다시 수정하는 등의 대규모 작업이 필요했으므로
현재의 개발 단계에서 다른 수정사항이 많음에도 이런 작업을 하는 것은
아무래도 리소스 대비 리턴이 적다고 판단했다.
결론
개발을 하면서 처음으로 Known issue 라는 것을 적용해봤다.
Known issue 란 이미 인지하고 있지만 현재 상황에서 수정하지 않은 오류를 의미한다.
개발팀이 해당 오류에 대해 알고 있으며, 우선순위나 자원의 문제로 인해 지금은 처리하지 않지만
추후 수정 계획이 있는 경우에 사용되는 용어라고 한다. 기술 부채랑은 조금 다른 느낌.
차후, 리팩토링시에 팀적으로 논의해서 커스텀 속성을 전부 케밥 케이스로 변경하는 등의 작업도 생각중.
