실무에서 바로 쓰는 Frontend Clean Code

https://youtu.be/edWbHp_k_9Y?si=TeKCnZaFEhmjq0tk

4년전 영상이지만 프론트엔드에서 클린코드를 작성하는 방법에 대해서 예제와 함께 친절하고 상세하게 설명하고 있습니다.

영상의 내용 중 지속적으로 생각하고 적용해야 하는 것을 정리합니다.

1. 함수의 단일 책임

이 개념은 가장 널리 알려져 있지만, 기능 추가를 하게 되었을 때 핸들러에는 적용을 잘 안시켰던 것 같습니다.

핸들러 또한 단일 책임을 가지도록 분리하여 필요한 곳에 필요한 함수만 사용될 수 있도록 합니다.

2. 응집도를 높이는 것과 추상화 레벨

코드의 가독성과 유지보수를 높이기 위해서는 응집도를 높여햐 합니다.

응집도를 높인다는 뜻은 컴포넌트 안에 상태, 핸들러, jsx가 서로 떨어져 있는 것을

하나의 컴포넌트 또는 커스텀훅으로 묶어서 어떤 로직인지 쉽게 파악하도록 하는 것 입니다.

여기서 주의 할 점은 뭉치기만 하는 것은 클린 코드와는 다르다는 것 입니다.

영상에서도 클린 코드는 짧은 코드가 아닌 읽기 쉬운 코드라고 전달하고 있습니다.

따라서 뭉치는 작업을 할 때에 세부 구현과 중요 개념을 불리하여 세부구현만 추상화를 하고,

중요 개념은 props로 받도록 하여 로직을 파악하기 쉽도록 해야 합니다.

배운 점

응집도를 높이기 위해 커스텀 훅이나 컴포넌트를 사용할 때 명확한 기준을 잡을 수 있는 내용이었습니다.

깔끔하게만 보이는 코드가 아니라 읽기 쉽고 유지보수가 쉬운 코드를 작성하는 좀 더 명확한 기준이 생기게 되었습니다.