우리 프론트엔드팀이 함께 논의하여 정한 팀내 네이밍 규칙

읽기 좋은 코드의 작성의 중요성을 알고 코드의 통일감을 위해 팀내에서 정했었던 규칙이다. 참고하셔도 좋을듯 하여 여기 적어봅니다. 

 

네이밍 만으로도 바로 어떤용도의 함수인지 알기 쉽기 위해서 React-Query, api service 호출 hook, interface 등의 네이밍 규칙을 정하였다. 

 

누가 작성하더라도 규칙을 따른다면 누구든 파악하기 쉽고 새로운 멤버 또한 파악하기 쉬워질 것이다. 

따라서 사용하는 단어도 통일하기로 했다. 

 

내부적으로 정한 것이므로 참고하는 용도로 이런식으로도 정하는구나 하고 보면 될것 같다. 

 

---

react-query 작성 규칙

• query key 는 해당 파일 상단에 작성한다.
• interface 는 query key 정의해둔 하단부터 시작해 작성한다.
  • RequestDto 먼저 작성하고 ResponseDto를 작성한다. (request를 먼저 보내고 response를 받기 때문에 읽기에 더욱 편함)
  • ex) CharacterRequestDto (Request)
  • ex) CharacterResponseDto (Response)
• 작성 전 스튜디오 <-> 어드민 간 확인하여 같은 api에 대해서는 일치하도록 작성한다.(스튜디오와 어드민에서 사용하는 api 가 다르므로 파일이 완전히 일치하지는 않음.)
• 작성 순서 요약
  • query key
  • interface (type 정의)
  • react query hook

Naming 규칙

interface 네이밍 규칙

common.d.ts

• 공통으로 쓰이는 공통틀은 끝에 Type 으로 네이밍. ex.GetListType
• 서버에서 결과로 받은 값은 끝에 Dto 를 붙여 네이밍
• 여러 곳에서 쓰이는 Dto(해당 api 뿐만이 아닌 여러곳에서 사용되는 값) ex. FileImageType 는 /image 외에도 /titles, /chapters 에서도 사용된다

query hooks 네이밍 규칙

네이밍규칙 1: method 관련하여 이렇게 시작

• get : useGet
• post: useCreate
• put: useUpdate
  • create, update 두 가지 역할 할 때에는 ‘usePut’으로 작성
• delete: useDelete

네이밍규칙 2: id 를 param으로 받아서 한개에 대한 정보를 찾을 경우 네이밍 “useGetOneTitleCategory”