코드를 작성하다보면 어떠한 코드가 좋은 코드인지 확신이 가지 않는다.
그래서 이번에 실무에서 바로 쓰는 Frontend Clean Code 라는 toss slash 21 영상을 보게 되었다.
오늘은 이와 관련된 내용을 정리하겠다.
Clean code
우리가 처음 코드를 작성할 때는 유지보수, 가독성을 고려하여서 작성하지만
계획에 없는 기능을 추가해야할 때가 있다.
그래서 좋은 코드를 계획해도 시간이 지나면,
나쁜 코드가 되는 경우가 있다.
( 코드를 추가할 상황도 고려해야한다. )
그러다보면 생기는 3가지 케이스가 있다.
하나의 함수에 여러가지 기능들이 추가되면서 함수가 하는 일에 대한 방향성이 애매해진다.
그래서 가독성이 떨어지고 유지보수에도 어려움을 겪을 수 있다.
응집도가 떨어지고 3군데로 분리되어서 이 코드를 이해하려면 스크롤을 내리며 왔다갔다하면서 읽어야한다.
그렇게 되면 가독성도 떨어지고, 시간적 소모도 크다.
함수 둘의 이름이 비슷해서 기능이 헷갈리고 파란색 함수 안에는 다양한 기능들이 있어서 가독성이 떨어진다.
각 기능 마다 함수로 묶어주고 네이밍을 명확히해 가독성이 좋아지게 합니다.
전에는 한가지 기능들이 3군데로 분리되었는데, 이를 한가지로 뭉쳐서 컴포넌트로 만들어
필요한 부분만 보여주고 세부적인 부분들은 은닉화하여 기능을 묶어주었습니다.
함수는 한가지 일만 하도록 분리하여서 가독성과 재사용성을 높입니다.
클린 코드란 짧은 코드가 아니고, 원하는 로직을 빠르게 찾을 수 있는 코드다.
(가독성이 좋아야한다.)
그것을 3가지 기준으로 분리할 수 있는데,
응집도 단일책임 추상화다.
먼저 응집도에 관해 이야기해보자면
응집도는 어떠한 것을 뭉쳐야하는지 파악하는 것이 중요하다.
먼저 코드를 분리하기 전에 어느 부분이 중요한지 구분을 짓는다.
그래서 설계를 해야한다. 어느 부분을 가리고 보여주어야할지 정한다.
정리한 내용을 토대로 필요한 부분만 노출하고 세부 구현은 내부로 넘겨주며 은닉화를 활용해준다.
핵심 데이터는 밖에서 노출하고 나머지는 안에서 뭉치면 된다.
이러한 방식을 선언적 프로그래밍이라 한다.
핵심 데이터만 전달받고 세부구현은 안에 숨겨두는 프로그래밍을 말한다.
그래서 props로 내려주는 내용들만 바꾸면 재사용성을 높일 수 있고, 가독성도 올라간다.
이것이 요즘 트렌디한 선언적 프로그래밍이다.
하지만 트렌디하다고 무조건 적으로 좋은 방법은 아니다.
선언적 프로그래밍과 대조적으로 명령형 프로그래밍도 많이 사용하는데, 명령형 프로그래밍은 어떻게 해야할지 하나하나 children으로 내려주거나 이후 행동을 정의해주는 것을 말하는 방식이다.
만약에 해야하는 것이 자주 바뀐다면 명령형 프로그래밍이 더 좋은 방법이 될 수도 있다.
상황에 맞게 선언적, 명령형을 사용하자.
네이밍과 역할 분담을 통해 가독성을 높여보자
명확한 네이밍이 중요하다.
역할분배를 하자.
한가지 함수에 여러 역할을 맡기지말고 한가지 일만 맡기자
함수뿐만 아니라 컴포넌트도 분리해줄 수 있고 이는 유지보수에 유리하다.
또한 세부 구현은 숨기고, 중요 데이터만 보여주자.
한글이름이 유용하긴 하지만, 아직 DX인식이 따라오지 못한다.
추상화에 대해 알아보자.
추상화를 잘 사용한 예시로 지하철을 들 수 있다.
지하철은 중요 개념만 남기고 다른 부분을 제거해서 보기좋게 만들었다.
코드에서 이를 적용해보자
실제 구분하는데 필요하거나 어떠한 데이터인지 빠르게 이해할 수 있는 내용들만 보여주고
숨기자.
함수 이름에 모든 내용이 들어올 수 있게끔 작성하고 노출하는 것도 방법이다.
추상화에 제일 중요한 포인트는 일관되게 추상화함으로서 개발자들이 헷갈리지 않게 해야하는 것이 중요하다.
끝으로 문서로 정리하여서 개선점과 염려되는 부분들을 정리하는 것도 좋은 방법이다.
마무리
위와 같은 영상을 정리하면서 어떠한 방향을 지향해하는지 다시 한번 고민할 수 있게 되었고,
추상화나 선언적 프로그래밍 명령형 프로그래밍같은 용어에 대해서 다시 한번 생각할 수 있었다.
이러한 것들을 반영하고자 노력하겠다.
출처:
이번 글을 보면서 제 코드에 대해 반성하게 되네요…ㅎㅎㅎ리펙토링 할 때 참고하겠습니당!!