구어체로 설명하는 다이어리

undefined와 null에 관하여  타입스크립트에 대한 내용을 서치하고 있는데 사람들이 undefined를 사용할지, null을 사용할지에 대한 내용으로 여러가지 포스팅이 올라와있는 것을 보게 되었습니다. 처음 봤을 때는 아니 이게 논란거리가 된다고?난 늘 이렇게 살아왔는데 라고 생각했습니다만 타입스크립트에서는 아예 null은 사용하지 말고 undefined를 사용하라는 컨벤션까지 있다고 하고 (물론 강제하는 것은 아니겠지만), [https://github.com/Microsoft/TypeScript/issues/8940] 여러 가지 글을 읽고 나니 제가 그동안의 제가 편향적으로 생각했던 것은 아닌가 싶어 블로그로 정리하게 되었습니다. 다른 블로그에 훨씬 더 잘 정리되어 있는 글이 많으므로 진정한 이..

변수 이름 바꾸기    let a = height * width; ▼ let area = height * witdh;  배경명확한 프로그래밍의 핵심은 이름짓기다. 변수는 프로그래머가 하려는 일에 관해 많은 것을 설명해준다. 단, 이름을 잘 지었을 때만 그렇다. 사실 나는 이름을 잘못 지을 때가 많다. 고민을 충분히 하지 않아서거나, 개발을 더 하다 보니 문제에 대한 이해도가 높아지거나, 혹은 사용자의 요구가 달라져서 프로그램의 목적이 변해 그럴 때도 있다. 특히 이름의 중요성은 그 사용 범위에 영향을 많이 받는다. 한 줄짜리 람다식lambda expression에서 사용하는 변수는 대체로 쉽게 파악할 수 있다. 맥락으로부터 변수의 목적을 명확히 알 수 있어서 한 글자로 된 이름을 짓기도 한다. 마찬가지로..

변수 캡슐화하기    let defaultOwner = { firstName: '마틴', lastName: '파울러' }; ▼ let defaultOwnerData = { firstName: '마틴', lastName: '파울러' };export function defaultOwner() { return defaultOwnerData;}export function setDefaultOwner(arg) { defaultOwnerData = arg;}  배경리팩터링은 결국 프로그램의 요소를 조작하는 일이다. 함수는 데이터보다 다루기가 수월하다. 함수를 사용한다는 건 대체로 호출한다는 뜻이고, 함수의 이름을 바꾸거나 다른 모듈로 옮기기는 어렵지 않다. 여차하면 기존 함수를 그대로 둔 채 전달forward ..

함수 선언 바꾸기    function circum(radius) { ...} ▼ function circumference(radius) { ...}  배경함수는 프로그램을 작은 부분으로 나누는 주된 수단이다. 함수 선언은 각 부분이 서로 맞물리는 방식을 표현하며, 실질적으로 소프트웨어 시스템의 구성 요소를 조립하는 연결부 역할을 한다. 건축과 마찬가지로 소프트웨어도 이러한 연결부에 상당히 의존한다. 연결부를 잘 정의하면 시스템에 새로운 부분을 추가하기가 쉬워지는 반면, 잘못 정의하면 지속적인 방해 요인으로 작용하여 소프트웨어 동작을 파악하기 어려워지고 요구사항이 바뀔 때 적절히 수정하기 어렵게 한다. 다행히 소프트웨어는 소프트하기 때문에 연결부를 수정할 수 있다. 단 주의해서 해야 한다. 이러한 연..

변수 인라인하기   let basePrice = anOrder.basePrice;return basePrice > 1000; ▼ return anOrder.basePrice > 1000;  배경변수는 함수 안에서 표현식을 가리키는 이름으로 쓰이며, 대체로 긍정적인 효과를 준다. 하지만 그 이름이 표현식과 다를 바 없을 때도 있다. 또 변수가 주변 코드를 리팩터링하는 데 방해가 되기도 한다. 이럴 때는 그 변수를 인라인하는 것이 좋다.  절차대입문의 우변(표현식)에서 부작용이 생기지는 않는지 확인한다.변수가 불변으로 선언되지 않았다면 불변으로 만든 후 테스트한다.이렇게 하면 변수에 값이 단 한 번만 대입되는지 확인할 수 있다.이 변수를 가장 처음 사용하는 코드를 찾아서 대입문 우변의 코드로 바꾼다.테스트한..

변수 추출하기    return order.quantity * order.itemPrice - Math.max(0, order.quantity - 500) * order.itemPrice * 0.05 + Math.min(order.quantity * order.itemPrice * 0.1, 100); ▼ const basePrice = order.quantity * order.itemPrice;const quantityDiscount = Math.math(0, order.quantity - 500) * order.itemPrice * 0.05;const shipping = Math.min(basePrice * 0.1, 100);return basePrice = quantityDiscount + shi..

함수 인라인하기   function getRating(driver) { return moreThanFiveLateDeliveries(driver) ? 2 : 1;}function moreThanFiveLateDeliveries(driver) { return driver.numberOfLateDeliveries > 5;} ▼ function getRating(driver) { return (driver.numberOfLateDeliveries > 5) ? 2 : 1;}  배경이 책은 목적이 분명히 드러나는 이름의 짤막한 함수를 이용하기를 권한다. 그래야 코드가 명료해지고 이해하기 쉬워지기 때문이다. 하지만 때로는 함수 본문이 이름만큼 명확한 경우도 있다. 또는 함수 본문 코드를 이름만큼 깔끔하게 리팩..

함수 추출하기   function printOwing(invoice) { printBanner(); let outstanding = calculateOutstanding(); // 세부사항 출력 console.log(`고객명: ${invoice.customer}`); console.log(`채무액: ${outstanding}`);} ▼ function printOwing(invoice) { printBanner(); let outstanding = calculateOutstanding(); printDetails(outstanding); function printDetails(outstanding) { console.log(`고객명: ${invoice.customer}`); ..

카탈로그의 첫머리는 가장 기본적이고 많이 사용해서 제일 먼저 배워야 하는 리팩터링들로 시작한다. 내가 가장 많이 사용하는 리팩터링은 함수 추출하기와 변수 추출하기다. 리팩터링은 본래 코드를 변경하는 작업인 만큼, 이 두 리팩터링을 반대로 진행하는 함수 인라인하기와 변수 인라인하기도 자주 사용한다. 추출은 결국 이름 짓기이며, 코드 이해도가 높아지다 보면 이름을 바꿔야 할 때가 많다. 함수 선언 바꾸기는 함수의 이름을 변경할 때 많이 쓰인다. 함수의 인수를 추가하거나 제거할 때도 이 리팩터링을 적용한다. 바꿀 대상이 변수라면 변수 이름 바꾸기를 사용하는데, 이는 변수 캡슐화하기와 관련이 깊다. 자주 함께 뭉쳐 다니는 인수들은 매개변수 객체 만들기를 적용해 객체 하나로 묶으면 편리할 때가 많다. 함수 구성과..

https://www.tistory.com/event/write-challenge-2024 작심삼주 오블완 챌린지오늘 블로그 완료! 21일 동안 매일 블로그에 글 쓰고 글력을 키워보세요.www.tistory.com  저도 매일매일 글쓰기를 목표로 하고 있어서기회 되면 참가해볼까 생각중입니다.티스토리 챌린지 많이해줘!