실무에서 바로 쓰는 FE 클린코드 by Toss & 진유림님

이 시리즈는 저만의 FE 컨벤션, 코드 스타일 등을 만들고자 Toss의 SLASH 영상과 기술 블로그 등을 참고하여 만들었습니다.

👋🏼 참고자료 소개

SLASH 21에서 진유림님께서 발표하신 "실무에서 바로 쓰는 Frontend Clean Code" 영상을 분석하였습니다.

짧은 후기

와 실무에서 쓰이는 팁과 액션아이템까지... 하나의 영상을 통해서 정말 많은 것을 알려주셨네요🥹 정말 감사합니다 Toss & 유림님ㅜㅜ 내용들이 실전에 바로 적용할 수 있는 것들이어서 진짜 재밌어요ㅎㅎ

---

📌 내용 정리

[1] 응집도 : 같은 목적의 코드는 뭉쳐 두자

• 무엇을 뭉쳐야 할까?
  • 뭉치면 쾌적 : 당장 몰라도 되는 '세부 구현'
  • 뭉치면 답답 : 코드 파악에 필수적인 '핵심 정보'

• 핵심 데이터와 세부 구현 나눌 줄 알아야 된다.
  • 핵심 데이터는 밖에서 전달, 나머지는 뭉치기!

• 이러한 개발 스타일을 '선언적 프로그래밍' 이라고 부른다.
  • '무엇'을 하는 함수인지 빠르게 이해가 가능하다는 것
  • '세부 구현'은 훅 안에 뭉쳐두었기에 신경 쓸 필요가 없다는 것
  • '무엇'만 바꿔서 쉽게 재사용할 수 있다는 점

+) 뭉치지 않는 '명령형 프로그래밍'이 있다.

• '어떻게' 해야 할지 하나하나 명령하기
• '세부 구현'이 모두 노출되어 있어서 이를 커스텀 하기 쉽지만, 읽는 데 오래 걸리고 재사용하기 어렵다는 단점이 있다.

Q. 최신 트렌드인 '선언적 프로그래밍'이 '명령형 프로그래밍'보다 더 나은 건가?

• 유동적으로 사용하면 된다.
• React의 JSX 문법을 사용해서 HTML에서도 선언형 프로그래밍을 할 수 있다는 장점이 있지만, props으로 세부적으로 넘겨야 하는 경우에는 명령형 설계도 필요하다.

[2] 단일 원칙 : 하나의 일을 하는 뚜렷한 이름의 함수를 만들자

[리팩토링 Tip 1]
: 한가지 일만 하는, 명확한 이름의 함수

async function handle연결전문가질문제출() {
 await 연결전문가_질문전송(questionValue);
 alert(`${연결전문가.name}에게 질문이 등록되었어요.`);
}
async function handle새전문가질문제출() {
 await 질문전송(questionValue);
 alert("질문이 등록되었어요.");
}
async function handle약관동의팝업() {
 const 약관동의 = await 약관동의_받아오기();
 if(!약관동의) {
   await 약관동의_팝업열기();
 }
}

[리팩토링 Tip 2]
: 한가지 일만 하는, 기능성 컴포넌트

[리팩토링 Tip 3]
: 조건이 많아지면 한글 이름도 유용해요

[3] 추상화 : 핵심 개념을 뽑아내자

• 프론트엔드 코드의 추상화는 '컴포넌트'이다.
• 추상화 단계를 비슷하게 정리해야 한다.

+) "추상화를 하면 어떠나요?" 혹은 "추상화를 깬 이유는요" 와 같이 실무에서 얘기를 나눌 수 있다.

---

🚀 실전에 써먹을 것

• 클린코드 != 짧은 코드
  • 원하는 로직을 빠르게 찾을 수 있는 코드가 클린코드이다.
  • 주기적으로(커밋당? PR당?) 코드를 매끄럽게 읽을 수 있는지 점검하자.

• 큰 그림 보는 연습을 의식적으로 하기
  • 그때는 맞고 지금은 틀리다.
  • 기능 추가 자체는 클린해도, 전체적으로 보면 어지러울 수 있다는 것 명심!
  • 전체 그림으로 보면 엉망이지만, PR에서 변경사항만 보면 어지러운 코드라는 걸 파악하기 어렵다.

• 기존 코드 수정하는 것을 두려워하지 말 것
  • 처음부터 코드 짤 때, 여러 생각(큰 그림 어떠지?, 기능이 추가될 수 있을까?, 어느 정도의 추상화 수준을 잡아야 하지? 등)을 먼저 하자.
  • 기존 코드를 씹고 뜯고 맛보고 즐기자.

• 팀과 함께 공감대 형성하기
  • 코드에 정답은 없다.
  • 명시적으로 이야기를 하는 시간이 필요하다.

• 문서로 적어보기
  • 향후 어떤 점에서 위험할 수 있는지, 어떻게 개선할 수 있는지 등을 글로 적어야 명확해진다.

---

⭐️ 다음 시리즈 추천

퍼널: 쏟아지는 페이지 한 방에 관리하기 by Toss & 진유림님

FE에 대한 클린한 코드를 배우셨다면, 이번에는 클린한 설계를 공부해 보시면 어떠실까요?

Effective Component 지속 가능한 성장과 컴포넌트 by Toss & 한재엽님

주니어 FE 개발자로서 회사에서 프로젝트할 때, 가장 어려웠던 부분은 바로 "컴포넌트 적절히 나누기" 였습니다. 재엽님의 영상을 통해서 컴포넌트를 "적절히" 나누는 기준을 배웠고 다음 프로젝트 때, 잘 써먹어 보려고 합니다.

---

⏰ 트렌딩 기록

아고... 알고리즘의 간택(?)을 받았는지, 트렌딩 1위가 되었네요😲 글 하나하나 더 신중하게 유익한 내용으로 써야겠다는 다짐을 하게 되네요💪🏼

23.09.04(월)

23.09.02(토)

23.09.01(금)

23.08.31(목)

23.08.30(수)