실무에서 바로 쓰는 clean code

 

 

실무에서의 클린 코드란?

 

=> 유지 보수 시간의 단축

=> 짧은 코드 x , 원하는 로직을 빨리 찾을 수 있는 코드

 

흐름 파악이 어렵고, 도메인 맥락이 표현이 안 되어, 동료에게 물어봐야 알 수 있는 코드는 개발할 때 병목이 되고 유지 보수할 때 시간이 오래 걸리며 시간이 지나면 기능을 추가하기 어렵다. 유저입장에서도 쾌적하지 못하다

 

시간 = 자원 = 돈 

 

남이 짠 코드에 기능을 붙이는 일을 개발자의 90%가 함

하나의 목적인 코드가 흩뿌려져 있으면 나중에 기능을 추가할 때 스크롤을 위아래로 움직이면서 찾아야 함

하나의 함수가 여러가지 일을 하는 것도 좋지 않음 (코드를 세부적으로 읽어야하고 코드 추가 및 삭제 시간도 걸림)

 

-> 하나의 기능, 하나의 함수! (이때 변수명을 바꾸어 더욱 직관적으로 알기 쉽게!)

 

원하는 로직을 빠르게 찾으려면 하나의 목적을 가진 코드를 응집도를 높여서 뭉쳐두어야하고 함수가 여러가지 일을 하고 있을 때 쪼개주어야하고 함수의 세부구현 단계가 제각각이라면 추상화 단계를 조정해서 핵심기능을 필요한 만큼만 노출해야함

 

 

키워드

 

응집도

 

예를 들어 팝업을 띄우는 기능이 떨어져있으면 뭉쳐놓음, 이때 커스텀 훅을 사용해서 많이 뭉치는데 무조건 커스텀 훅을 사용해서 뭉친다해서 좋은 건 아님. 무슨 일을 하는 코드인지 알려지지 않기 때문

당장 몰라도 되는 디테일이 들어간 코드를 뭉치는 게 좋음

반대로, 코드 파악에 필수적인 핵심 정보를 뭉치게 된다면 여러 모듈을 넘나들며 흐름을 따라가야하는 참사가 일어남 😂

 

어떻게하면 읽기 좋게 응집할 수 있을까?

 

1. 남겨야 할 핵심 데이터와 숨겨도 될 세부 구현을 나누기

ex) 팝업 클릭시

-> 남겨야 할 핵심 데이터 : 팝업 버튼 클릭 시 액션, 팝업 제목, 내용

-> 숨겨도 될 세부 구현 :  팝업을 열고 닫을 때 사용하는 상태, 컴포넌트 세부 마크업, 팝업 버튼 클릭시 특정 함수를 호출해야한다는 바인딩

 

=> 세부 구현을 읽지 않고도 어떤 팝업인지 파악할 수 있음

=> 선언적 프로그래밍 : 무엇을 하는 코드인지 빠르게 이해가능하다는 것, 세부 구현을 안쪽에 뭉쳐놓아서 신경쓸 필요가 없다는 것

 

 

 

단일 책임

 

하나의 일을 하는 뚜렷한 함수의 이름을 만들자!

중요 포인트가 담겨진 함수명을 만들어야 함

 

TIP : 한글 변수명도, 상수를 직관적으로 보고 싶을 때 한글 변수명도 괜찮음

 

 

 

추상화

 

 : 핵심 개념을 뽑아내는 것

 

 

 

 

onConfirm 으로 추상화

 

원하는 컴포넌트를 보여줄 수 있도록 추상화

 

전부 추상화

 

=> 정답은 없음, 회사에 따라 추상화하면 됨

=> 성급하게 추상화하다보면 추후 유연성을 생각했을 때 유지보수에 어려움을 겪을 수 있음

=> 추상화 수준이 섞여 있으면 코드 파악이 힘듦, 추상화 단계를 비슷하게 정리하는 것이 좋음

 

 

 

 

 

 

액션 아이템 🙌

 

담대하게 기존 코드 수정하기 (구조 뜯기를 두려워하지 말자!)

큰 그림 보는 연습하기 (코드에 기능을 추가할 때 큰 그림을 보기)

팀과 함께 공감대 형성하기 (고치고 싶은 코드를 말해보고 문제라고 생각하는 지식을 공유해 집단지성을 모을 것!)

문서로 적어보기 (어떤 점에서 위험할 수 있는지 / 어떻게 개선할 수 있는지)

 

 

 

 

 

출처 :

https://youtu.be/edWbHp_k_9Y

 

 

 

 

 

느낀점

 

 

클린 코드란 짧은 코드가 아니라 빠르게 원하는 로직을 찾을 수 있는 코드라는 말씀에 깜짝 놀랐다. 이제껏 알고 있던 클린 코드 개념이 완전히 뒤바뀌었다. 단순 기능 구현에 그치는 것이 아니라 '남에게 설명하기 위한 로직'을 구현한다 생각하고 임해야겠다 느꼈다. 개발을 배운지 이제 슬슬 2달이 넘어간다. 늘 기능 구현하기 급급해서 클린 코드라는 개념을 나중으로 치워뒀는데 영상을 접하고 보니 기능 구현하면서 얼마든지 클린 코드를 신경 쓸 수 있었단 생각이 든다. 변수명이나 추상화 레벨을 비슷하게 맞추는 정도는 늘 염두에 두고 있어야겠다.

화이팅! 💪