이 시리즈는 저만의 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에서 변경사항만 보면 어지러운 코드라는 걸 파악하기 어렵다.
- 기존 코드 수정하는 것을 두려워하지 말 것
- 처음부터 코드 짤 때, 여러 생각(큰 그림 어떠지?, 기능이 추가될 수 있을까?, 어느 정도의 추상화 수준을 잡아야 하지? 등)을 먼저 하자.
- 기존 코드를 씹고 뜯고 맛보고 즐기자.
- 팀과 함께 공감대 형성하기
- 코드에 정답은 없다.
- 명시적으로 이야기를 하는 시간이 필요하다.
- 문서로 적어보기
- 향후 어떤 점에서 위험할 수 있는지, 어떻게 개선할 수 있는지 등을 글로 적어야 명확해진다.
⭐️ 다음 시리즈 추천
FE에 대한 클린한 코드를 배우셨다면, 이번에는 클린한 설계를 공부해 보시면 어떠실까요?
주니어 FE 개발자로서 회사에서 프로젝트할 때, 가장 어려웠던 부분은 바로 "컴포넌트 적절히 나누기" 였습니다. 재엽님의 영상을 통해서 컴포넌트를 "적절히" 나누는 기준을 배웠고 다음 프로젝트 때, 잘 써먹어 보려고 합니다.
⏰ 트렌딩 기록
아고... 알고리즘의 간택(?)을 받았는지, 트렌딩 1위가 되었네요😲 글 하나하나 더 신중하게 유익한 내용으로 써야겠다는 다짐을 하게 되네요💪🏼
23.09.04(월)
23.09.02(토)
23.09.01(금)
23.08.31(목)
23.08.30(수)
안녕하세요. 글 잘 읽었습니다.
혹시 LogClick 컴포넌트를 사용하실 때 어떻게 구현을 하셨을까요?
막연히 생각했을 때, slot 을 작성할것이라 생각했거든요.
추가적으로 style 부분에서 처리를 어떻게 하셨을지 궁금합니다. relative 로 한다거나 하신건가요?