개발하면서... 느끼는 부분 정리 👩🏻‍💻

개발을 하면서 내가 느끼는 것 / 타인으로부터 느끼는 것이 있다.

처음에는 무조건 정해진 일정에 기능만 잘 동작하면 된다고 믿었고, 그 시절에는 그것밖에 보이지 않았다.

그것만 하기에도 벅찼으니까.

 

그런데 한 프로젝트를 5년 이상 자리를 지키다보니 내가 작성한 코드인데도 여기저기 사용하기도 하고, 기능이 뭔지 많은 시간들 들여 파악하기도 하고 하면서 어떻게 하면 이런 시간들을 좀 더 줄여볼까 고민을 하게 되었다.

 

지향할 것들 🤙🏻

• 중복되는 부분은 반드시 파일로 분리 (getter / setter)
  1. 2번 이상 다른 파일에서 사용한다면 utils 등의 폴더 및 파일로 분리하기
  2. 예) userInfo에서 chidlname, name 부분같은 사소한 부분이어도 분리하기

const getChildName = (childInfo: Child) => {
  return childInfo.name
}

• 함수명은 아무리 길어도 헷갈리지 않게 작성
  
  1. 함수의 기능을 파악하기 전에 함수 이름을 보면 90%이상은 파악이 되어야 한다고 생각한다. 때문에 함수명은 최대한 자세히 사용하도록 한다.
• 페이지 내 변수 이름은 대충 느낌이 오니까 길게 작성하는 것을 지양
  1. 페이지의 라우터가 /[service=service]/enrollment/${productId}/stock-account라고 한다면 상품을 가입하기 위해 계좌개설을 하는 페이지를 나타낸다. 이때, stock-account 페이지에서 굳이 계좌개설을 의미하는 단어를 추가로 변수에 붙일 필요가 없는 것이다. 충분히 계좌개설 중임을 나타내는 페이지의 라우터가 있기 때문이다.
• "미래에 편하겠지"라는 생각으로 미리 작업해 놓는 것은 지양
  1. API 스펙 (response schema)에는 포함되어 있더라도 FE에서 사용하지 않는 필드라면 FE쪽 schema 내 필드에서는 무시한다. 사용하는 필드에 대한 변경이나 오류(타입 등)가 있을 때 빠르게 캐치하려고 필드를 사용하는 건데 굳이 필요하지 않은데 기입해 놓은 건 별 효용이 없다.

프로젝트는 페이지로 구성되어 있지만, 페이지 내에는 동일/비슷한 UI도 많고, 작게는 타이틀부터 하단 버튼까지 동일한 구조가 많다.

내가 생각하기에는 컴포넌트로 분리하지 않아도 될 것 같은데 남이 보았을 때에는 분리를 해야할 것 같고 보는 관점이 다른 것 같다.

 

컴포넌트로 분리하는 기준 2가지

• 관심사의 분리 (가독성 향상)
  1. 약간씩 요소가 다른 컴포넌트라면 slot으로 작업하기 (if문을 사용할 수도 있지만 너무 복잡하기도 하고, slot이 좀 더 보기 편하고 수정도 용이한 느낌이다.)
• 중복 요소 제거

 

개발은 시간이 지날수록 쉬워지지 않고 고민이 더 많아지기만 한다. 어려워 진다.

좋게 생각하면 아는 것도 많고, 효율성을 따지기 때문에 생각이 많아진 거라고 하지만,

아직 나는 FE 개발 조차도 마스터하기엔 아직 시간이 많이 필요한 것 같다.

 

 

이상 스텔라였습니다. ✍️