개발일지 (11월 3주차 회고)

 

 

Feedback

 

디자인 시안은 정말 중요하다.

웹 개발자가, 특히 작은 규모의 프로젝트에서 일하는 웹 프론트엔드 개발자가 빠지기 쉬운 함정 중의 하나는(내가 빠져서 그런가), 디자인 시안에 맞추어 개발하지 않고, 자신의 개발 편의에 맞춰 시안을 조금씩 조금씩 자기 입맛에 맞게 수정하려는 태도인 것 같다. 디자인 시안 (이번 같은 경우는 Zeplin)에 명시된 margin, color, font 등을 엄격하게 준수하고, 애매한 점이 있으면 (시안에 나오지 않는 애니메이션 효과 등) 해당 사항에 대해서 적극적으로 디자인 팀과 소통하여 의사결정을 하는 단계가 필요하다.

 

 

유들 있는 Validation.

프론트엔드를 개발한다고 하면 거의 대부분의 프로젝트에서 빠지지 않는 것이 Form Control이다. 사용자의 정보를 수집하고, 사용자와 Interaction 하는 데에 있어서 정부 관련 공공 프로그램부터, 간단한 애플리케이션까지 Form이 빠지는 애플리케이션을 찾아볼 수 없다. 따라서 Form Control을 융통성 있게 개발하는 것이 중요한 것 같은데, 이 중에서도 특히 Form Validation에 대한 피드백을 많이 받았다. "생년월일"에 대한 Validation을 진행하라고 하면, 단순히 6자리만 Form validation을 걸 것인지, "121212"등의 상식적으로는 존재할 수 없는 선에서의 입력값을 Filtering 하는 정도까지 진행할 것인지, 필수 입력 필드인지, YYYY-MM-DD, YYMMDD 포맷인지, 아니면 이 모두를 지원할 것인지 등 고민해야 할 사항이 많다. 이 부분에 대해서 "일관성 있게" Validation을 수행하는 것이 중요하며, 이러한 사항에 대해서는 기획자와도 이야기해보는 것이 중요한 것 같다.

 

 

컴포넌트 디자인

React를 사용하면서 ref나 useEffect를 사용하지 않고 DOM노드에 직접 접근하는 것은 자연스럽지 않다. React는 자체적으로 jsx, tsx문법을 통해 지원하는 VirtualDOM을 통해 상태를 업데이트하고 DOM을 직접 수정할 타이밍을 정하며 React 내부의 모든 로직 및 렌더링은 Virtual DOM과 관련이 있으므로 조금 더 React스럽게 DOM노드에 접근하는 방법이 필요하다. 리액트 공식문서에도 Ref를 사용하여 DOM노드에 접근할 것을 권장하고 있다.

 

reactjs.org/docs/refs-and-the-dom.html

Refs and the DOM – React

Focus, Text Select등의 Style Change를 직접적으로 진행해야 할 때, media Playback, animation효과 등을 적용해야 할 때는, document.getElementById 등의 DOM API가 아닌 Ref를 사용해서 이를 수정하는 것이 바람직하다.

 

 

코드는 역할과 책임별로 나뉘어 있어야 한다.

지금까지 코드를 작성할 때, 부끄럽게도, 그냥 "나름대로" 간단하게 작성하고, "나름대로" 분리하여 작성했다고 생각했다. 하지만 비동기 로직에 대한 분리 등이 제대로 되어 있지 않다는 등 코드를 작성하는 방식에 대한 지적을 받았으며, 이에 대해 반성하게 된 점은 잘 돌아가는 코드라고 해서 좋은 코드가 아니며, 이에 대해서 많은 사람들이 공감하고 이해할 수 있는 코드 스타일링에 대한 공부가 필요하겠다 라는 것이다.

 

airbnb.io/javascript/react 

Airbnb React/JSX Style Guide

Airbnb에서 React 코드 스타일 가이드를 제공하여 주었으며, 이를 따라 코드를 작성하고, 로직은 분리하는 방법을 배워야겠다는 생각을 했다.

 

 

 

프론트엔드 개발자는 꼼꼼해야 한다. 

 

전반적으로 느꼈던 점은, 무엇보다 꼼꼼해야 할 프론트 엔드 개발자로 개발을 해 오면서, 그리 꼼꼼하지 않게 코드를 작성하고 있다는 점이었다. 디자인 시안을 명확하게 맞추지 못하는 점, 일단 돌아가면 두고 다음 코드를 작성하는 점등. 작은 디테일이 큰 차이를 만든다는 점을 명심하고 다시 꼼꼼하게 코드를 검토하고 리뷰하는 습관이 조금 더 들어야 할 것 같다.