Front-end/깊게 파고들기

클린 코드란 무엇일까

아지송아지 2022. 3. 2. 20:04

타입크스립트를 공부하면서 "지금 작성하고 있는 코드가  깨끗한가? 올바른 길로 가고있나?" 생각이 들었습니다.

 

그렇게 클린코드에 관해 찾아보았고,

토스에서 진행한 [실무에서 바로 쓰는 Frontend Clean Code]와 삼성 SDS의[ 클린코드란 무엇인가?]의 내용을 토대로 정리하려합니다.

 

https://toss.im/slash-21/sessions/3-3

 

실무에서 바로 쓰는 Frontend Clean Code

실무에서 클린 코드의 의의는 유지보수 시간의 단축입니다. 동료 혹은 과거의 스스로 짠 코드를 빠르게 이해할 수 있다면 유지보수할 때 드는 개발 시간이 짧아집니다. 실제 예시와 함께 1. 응집

toss.im

 

https://www.samsungsds.com/kr/story/cleancode-0823.html

 

클린코드란 무엇인가?

개발자라면 누구나 한 번쯤은 고민해 봤을 만한 클린코드! 클린코드란 무엇이고, 클린코드를 작성하기 위한 원칙들은 어떤 것들이 있는지 알아보겠습니다.

www.samsungsds.com

 

 

Clean Code?


 

클린 코드는 짧은 코드가 아닙니다.

흔히들 생각하는 클린 코드는 짧은 코드입니다.

하지만 무작정 짧다고 좋은 것은 아닙니다.

클린 코드란 원하는 로직을 빠르게 찾을 수 있는 코드, 모든 팀원이 이해하기 쉽도록 작성된 코드라고 정의할 수 있습니다.

 

 

많은 개발자들이 클린코드를 위해 명확학 이름, 중복 줄이기, 가독성 높이기 등을  실천하고 있습니다.

그렇다면 왜 클린코드를 해야하는걸까요?

 

 

유지보수 시간의 단축

깔끔한 코드는 코드 리뷰, 코드 파악과 디버깅 시간을 단축시킵니다.

"시간=자원=돈" -> 시간을 줄이게되면 그만큼의 비즈니스 밸류를 창출합니다.

 

만약 클린 코드를 실천하지 않고 복사&붙여넣기와 같은 방법을 택한다면 * Technical dept가 생길것입니다.

 

*Technical dept이란 기술 부채를 의미합니다.

현 시점에서 더 나은 접근방식보다 더 쉬운 솔루션을 채택함으로써 발생되는 추가적인 재작업의 비용입니다.

 

출처 : Clean Code sheet
출처: Clean Code sheet

 

 

 

 

 

클린 코드의 주요 원칙

1. Follow Standard Conventions

코딩 표준, 아키텍쳐 표준 및 설계 가이드를 준수해야 한다.

 

2. Keep it simple, Stupid

단순한 것이 효율적이며, 복잡함을 최소화해야 한다.

 

3. Boy Scout Rule

참조되거나 수정되는 코드는 원래보다 클린해야 한다.

자신이 담당한 코드는 담당하기 이전의 코드보다 더 클린하게 만들어야한다.

 

4. Root Cause Analysis

항상 근본적인 원인을 찾아야한다. 그렇지 않으면 반복될 것이다.

 

5. Do Not Multiple Languages in One Source File

하나의 파일은 하나의 언어로 작성한다.

 

클린 코드의 주요 원칙은 다음과 같이 있습니다.

 

 

 

 

Clean Code!


지금까지 클린 코드에 관하여 알아보았습니다.

실무에서 쉽게 적용 할 수 있는 방법은 어떤것들이 있을까요?

 

1. 응집도 - 같은 목적의 코드는 뭉쳐두어야한다.

 

2. 단일책임 - 하나의 일만 하는 뚜렷한 이름의 함수를 제작한다.

 

3. 추상화 - 핵심 개념을 뽑아야한다.

 

코드와 함께 하나씩 살펴보겠습니다.

 

 

응집도

같은 목적의 코드는 뭉쳐두어야 합니다.

무작정 흩어져 있는 코드를 한 군데로 모으는것은 좋지 않습니다.

그렇다고 코드를 깔끔하게 만들기 위하여 커스텀훅(react)이나 클래스로 빼서 숨기라는 말은 아닙니다.

 

당장 몰라도 되는 디테일은 뭉치고,

코드 파악에 필수적인 핵심정보는 뭉치면 답답해집니다.

 

 

출처 : https://www.youtube.com/watch?v=edWbHp_k_9Y

위와 같이 팝업을 뜨게하는 코드가 있습니다.

1차적으로 핵심 데이터와 세부 구현을 나누어야합니다.

핵심데이터는 팝업의 제목과 내용, 버튼 클릭시 일어나는 함수입니다.

세부 구현은 팝업 토글을 위한 useState, 컴포넌트 마크업입니다.

이제 해야할 일은 핵심 데이터는 보여주고 세부 구현은 숨겨야합니다.

 

ㅊ출처 : https://www.youtube.com/watch?v=edWbHp_k_9Y

 

커스텀훅스를 제작 후 핵심 데이터만 넘기면 팝업이 뜨도록 합니다.

 

이처럼 핵심 데이터만 전달받고 세부 구현을 숨겨두는 개발 스타일을 선언적 프로그래밍이라고 합니다.

특징으로는 다음과 같은 것들이 있습니다.

* "무엇"을 하는 함수인지 빠르게 이해가 가능하다.

* "무엇"만 바꾸면 쉽게 재사용 가능하다.

* 세부 구현은 신경 쓸 필요가 없다.

 

반대되는 용어로 명령형 프로그래밍이 있습니다.

세부 구현이 모두 노출되어 있어 가독성이 떨어지지만 상황에 따라 필요한 경우가 있으니 적절하게 사용하시면 됩니다.

 

 

단일책임

하나의 일만 하는 뚜렷한 이름의 함수를 제작해야 합니다.

만약 하나의 함수에서 여러 개의 기능을 수행하고 있다면 가독성이 떨어지고 추후 유지 보수를 진행할 때 어려움을 겪습니다.

 

As-is    출처 : https://www.youtube.com/watch?v=edWbHp_k_9Y
To-be    출처 : https://www.youtube.com/watch?v=edWbHp_k_9Y

 

 

추상화

핵심 개념만 뽑아야합니다.

출처 : https://www.youtube.com/watch?v=edWbHp_k_9Y

 

react로 예를 들자면 모든 마크업을 작성하는게 아닌 컴포넌트로 제작하여 원하는 데이터만 넘겨줍니다.

상황에 따라 필요한 만큼만 추상화하시면 됩니다.

출처 : https://www.youtube.com/watch?v=edWbHp_k_9Y

또한 추상화 수준은 비슷하게 하는 것이 좋습니다.

어지럽게 섞여있으면 가독성이 떨어지고 코드 파악이 어려워집니다.

꼭 높은 추상화로 모든 것을 정리할 필요 없이 상황에 따라 낮은 코드로도 정리가 가능합니다.

 

 

 

마지막으로 클린 코드를 적용하는 방법을 알아보겠습니다.

1. 담대하게 기존 코드 수정하기

두려워하지 말고 자신감 있게 코드를 건드리는 것이 중요합니다.

 

2. 큰 그림을 보자

이전에는 맞지만 지금은 틀립니다.

기능 추가 자체는 클린해도, 전체적으로 보면 어지러울 수 있습니다.

 

3. 팀과 함께 공감대 형성하기

코드에 정답은 없으니 팀원들과 소통하며 발전합니다.

 

4. 문서로 적어 보기

작성하고 있는 코드가 왜 위험한지, 어떤식으로 개선할 수 있는지를 적어보며 정리합니다.

 

 

 


 

 

 

 

지금까지 클린 코드에 대해 알아보았습니다.

이 글을 작성하며 제가 지금까지 작성하였던 코드를 돌아보았고 반성하였습니다.

아직 배워야 할 것도 많고, 배우고 싶은 것도 많습니다.

끝까지 차근차근 공부하겠습니다.