2020. 9. 12. 22:15ㆍTIL
책에서 "소프트웨어에서 이름은 어디나 쓰인다" 라고 말하는 것처럼 정말 변수명, 함수명 외에도 컴포넌트의 파일 명을 정할때 URL path 명을 정할 때 타입의 이름을 정할 때 코드를 작성하다 보면 수많은 이름을 지정한다.
이 장에서는 이렇게 자주 사용되는 이름을 잘 짓는 간단한 규칙을 몇 가지 소개한다.
1. 의도를 분명히 밝혀라
- 변수의 존재 이유는?
- 수행 기능은?
- 사용 방법은 ?
위의 질문들에 대해서 내가 이전에 작성한 코드를 보고 질문에 답을 해보았다.
함수의 존재 이유는?
article 들을 filter 하여 보여주기 위해서
수행 기능은?
articleList를 for문을 돌면서 article 의 category 가 tag와 일치하는지 확인하고 일치하면 filterArr 에 담아서 출력한다.
사용 방법은?
tag를 Click시 함수에 해당 함수에 해당 tag의 이름을 넘겨주고 실행 되도록 만들어 준다.
내가 위의 함수를 오랜만에 보았을 때 정확하게 어떤 역할을 하는지 딱 떠오르지 않았다. 처음엔 단순히 article 들을 render 해주는 함수라고 생각했고 그래서 filterArticle 이라는 이름에 의문을 가졌다. 다시 코드를 살펴 보았고 해당 함수가 클릭한 tag에 따라 article 들을 필터 해서 보여주는 함수라는걸 알게 되었다.
다음에 다시 보았을 때 좀 더 확실하게 알 수 있도록 의도를 분명히 하는 이름들로 수정을 해보았다.
총 3가지를 수정을 해주었다.
함수의 이름을 좀 더 명확하게 변경 해주었다. 함수는 Click 했을 시에 실행이 되고 tag로 article을 필터 하는 기능을 가지고 있기 때문에 filterArticle 에서 handleFilterArticleWithTag 로 수정해 주었다.
그리고 filterArticleArr 를 filteredArticleArr 로
마지막으로 타입 선언을 보고도 해당 함수가 어떤 데이터를 가지는지 알 수 있기 때문에
filteredArticleArr: any 에서 filteredArticleArr: articleArr[] 로 수정해 주었다.
이름이 좀 길어 지기는 했지만 이 함수가 어떤 역할을 하고 있는지 이전 보다 더 확실하게 보이는것 같다.
의도가 명확하지 않은 이름들로 내가 짠 함수를 보았을 때 이 함수가 어떤 역할을 하고 있었지? 라고 다시 함수를 읽어보는 경우가 많았다.
이름 하나하나의 의도가 분명한 이름을 지어주면 위와 같은 경우가 확실히 줄어들 것 같다.
'TIL' 카테고리의 다른 글
[TIL] 09.24 box shadow naming (0) | 2020.09.24 |
---|---|
[TIL] 09.23 tab 읽지않음 표시 기능 (0) | 2020.09.24 |
[TIL] 09.10 text 에 <span/>,<br/> 태그 입히기 (0) | 2020.09.10 |
[TIL] 08.31 Next.js sass "attribute starts with" error (0) | 2020.08.31 |
[TIL] 08.19 Next.js getStaticProps and getServerSideProps (0) | 2020.08.19 |