3장 - 긴 코드 조각내기
📌 메서드 추출을 통해 긴 메서드를 분해하고 변수명을 변경해서 가독성 향상하기
3.1 첫 번째 규칙: 왜 다섯 줄인가?
📌 메서드는 {와 }를 제외하고 5줄을 초과해서는 안 됨
문장: if, for, while 또는 세미클론으로 끝나는 모든 것. 할당, 메서드 호출, return 등..
❓ 줄 세는 규칙이 조금 헷갈려서 같이 얘기해보면 좋을 것 같음
3.2 함수 분해를 위한 리팩터링 패턴 소개
- 긴 함수의 그룹 식별해보기
- 그룹이라고 생각되는 곳에 빈줄 or 주석 추가 (일시적인 주석)
- 새로운 빈 메서드 만들기
- 1번에 만들어놓은 곳에 2번의 메서드 호출하기
- 메서드 속 채우기
📌 이 방법은 코드 줄만 이동하기 때문에 오류가 발생할 위험이 최소화됨. 오류 나봤자 매개변수 전달 안한 정도이고, 어차피 컴파일러 통해 확인 가능함.
3.3 추상화 수준을 맞추기 위한 함수 분해
📌 규칙: 호출 또는 전달 한 가지만 할 것
- 객체에 있는 메서드를 호출 or 객체를 인자로 전달 ➡️ 둘 중 하나만 하기
- 메서드 추출을 수행할 때마다 메서드 이름을 지어 코드를 더 읽기 쉽게 만들 수 있음
// (예제 3.13) 배열의 평균을 구하는 함수
// 변경 전
function average(arr: number[]) {
return sum(arr) / arr.length;
}
// 변경 후
function average(arr: number[]) {
return sum(arr) / size(arr)
}
// 예제 적용
// 변경 전
function draw() {
let canvas = document.getElementById("GameCanvas") as HTMLCanvasElement;
let g = canvas.getContext("2d");
g.clearRect(0, 0, canvas.width, canvas.height); // 메서드 호출
drawMap(g); // 인자로 전달
drawPlayer(g); // 인자로 전달
}
function createGraphics() {
let canvas = document.getElementById("GameCanvas") as HTMLCanvasElement;
let g = canvas.getContext("2d");
g.clearRect(0, 0, canvas.width, canvas.height);
return g;
}
// 변경 후
function draw() {
const g = createGraphics();
drawMap(g);
drawPlayer(g);
}
function createGraphics() {
let canvas = document.getElementById("GameCanvas") as HTMLCanvasElement;
let g = canvas.getContext("2d");
g.clearRect(0, 0, canvas.width, canvas.height);
return g;
}
❓ 높은 수준의 추상화? 낮은 수준의 추상화? ➡️ 레퍼런스에 추가
3.4 좋은 함수 이름의 속성
📌 좋은 이름이 가져야 하는 속성
- 함수의 의도를 잘 설명해야 함
- 함수가 하는 모든 것을 담아야 함
- 도메인에서 일하는 사람이 이해할 수 있어야 함
3.5 너무 많은 일을 하는 함수 분리하기
📌 if 문이 있는 경우 해당 if문은 함수의 첫 번째 항목이어야 함
// (예제 3.21) 2에서 n까지 모든 소수를 출력하는 함수
// 변경 전
function reportPrimes(n: number) {
for (let i=2; i<n; i++) {
if (isPrime(i))
console.log('${i} is prime.')
}
}
// 변경 후
function reportPrimes(n: number) {
for (let i=2; i<n; i++) {
reportifPrime(i)
}
}
function reportifPrime(n: number) {
if (isPrime(n))
console.log('${i} is prime.')
}
- if문과 else if문은 분리할 수 없는 원자 단위로 봄
- 메서드 추출을 함으로써 새로운 이름을 매개변수에 지정해 가독성을 높일 수 있음
⭐️ 느낀 점
각각 5줄의 코드가 있는 4개의 메서드가 20줄인 하나의 메서드보다 훨씬 빠르고 이해하기 쉽다
이건 공감하긴 하는데… 실제 프로젝트에 적용하려면..? 🧐
- 과연 함수가 몇 개나 나올까
- 저렇게 쪼개놓으면 재사용 할 수 있는 함수들도 생길 거 같은데 그럼 그 함수들은 어디에 모아둘 것인지?
- 새로운걸 개발하려고 할 때 ‘어 이거 이미 만들어져 있지 않을까’하면서 함수 찾는 것도 좀 한세월 걸릴거 같기도 하고…
- 이름을 아무리 잘 짓는다고 하더라도 코드 내부까지 살펴봐야할 것 같은데(리턴값이 무엇인지 등등 알기 위해서…) 언제 다 찾아보나…
- 네이밍 규칙을 확실하게 정해놔야할 듯?