이동규

개발 잘하고 싶다

1. 추상화

1) Magic Number

  • Magic Number는 코드 안에 하드코딩된 특정값을 직접적으로 사용하는 것을 의미한다.
  • 이렇게 하드코딩된 숫자들은 코드를 읽는 사람들이 이해하기 어렵게 하고, 유지보수할 경우 문제를 일으킬 수 있다.
// 예시 1 - 밀리초를 Magic Number로 사용한 경우
setTimeout(() => {
    scrollToTop();
}, 3 * 60 * 1000);

// 개선 1 - 명료하게 작성된 변수를 선언하여 대체
const COMMON_DELAY_MS = 3 * 60 * 1000;
setTimeout(() => {
    scrollToTop();
}, COMMON_DELAY_MS);

// 예시 2 - 자릿수가 높은 숫자를 Magic Number로 사용한 경우
getRandomPrice(1000000, 10000000);

// 개선 2 - Numeric Operator와 객체를 사용하여 대체
const PRICE = {
    // Numeric Operator로 3자리수 마다 끊어 표기 가능
    MIN: 1_000_000,
    MAX: 100_000_000
}

getRandomPrice(MIN, MAX);

// 예시 3
function isValidName(carName) {
    return carName.length >= 1 && carName.length <= 5;
}

// 개선 3 - 객체를 사용하여 대체
Object.freeze는 1 depth까지 보존 가능
const CAR_NAME_LEN = Object.freeze({
    MIN: 1,
    MAX: 5
})

function isValidName(carName) {
    return carName.length >= CAR_NAME_LEN.MIN && carName.length <= CAR_NAME_LEN.MAX;
}

2) 네이밍 컨벤션(Naming Convention)

  • 실무를 하다보면, 항상 프로젝트, 코드명, 함수명 등을 작명하는 일에 어려움을 느낀다
  • 일관성 있고 규칙적으로 작명이 가능하게 하는 방법을 강의를 듣고 정리해보았다.
  • 네이밍 컨벤션(Naming Convention)이란, 저장소, 폴더, 파일, 함수, 변수, 상수, 깃 브랜치, 커밋 등 프로그래밍 전반적으로 이름을 네이밍하기 위한 규칙이나 관습을 만드는 것이다. 팀이나 개인의 차원에 따라 다를 수 있으며 특히 개인적인 견해와 해석에 따라 다를 수 있지만, 기준을 설정할 때 기본적인 논리와 이유가 있어야 한다.
예시 - 접두사, 접미사
// prefix-*, *-suffix
data-id
data-name
data-value

AppContainer
BoxContainer

ListComponent
ItemComponent

ICar
TCar

AType
BType

// 동사-*
// 함수는 동사로 시작하는게 좋다.
function getName () {}
function delNumber () {}
예시 - 연속적인 규칙
for (let i = 0; i < 10; i +++) {
    for (let j = 0; j < 10; j++) {
        for (let k = 0; k < 10; k++) {
            // ... some code
        }
    }
}
예시 - 자료형 표현
const inputNumber = 10;
const someArr = [];
const numToStr = 'some code';
예시 - 이벤트 표현
function on-*
function handle-*
function *-Action
function *-Event
function take-*
function *-Query
function *-All
예시 - CRUD 표현
function generator-*
function gen-*
function make-*
function get
function set
function remove
function create
function delete
예시 - Flag
  • Flag 란, 어떠한 상태를 지칭할 때 사용하는 표현이다.
const isSubmit
const isDisabled
const isString
const isNumber

2. 에러 다루기

1) 유효성 검사

  • 사용자의 입력값이 유효한지 검증하는 것을 말한다.

  • 나같은 경우 실무에서 이미지의 너비, 높이를 검사해야하는 경우가 있었는데, 백엔드 개발자에게 “프론트에서 거르겠다.”라고 말했을 때, 알 수 없는 신뢰감을 보냈던 기억이 있다. 그때부터인지, 최대한 클라이언트에서 유효성 검사를 했던 것같다.

  • 유효성 검사 방법
    • 정규표현식: [링크-Stackoverflow] for-password-must-contain-at-least-eight-characters-at-least-one-number-a
    • JavaScript 문법
    • 웹 표준 API
    • 라이브러리: [링크-Yup]

2) try, catch

  • 단순히 catch의 에러로그를 확인하는 것 뿐아니라, 사용자나 동료 개발자에게 올바른 사용 유도를 할 수 있도록 코드를 작성하다록 해보자.

클린코드를 마무리하며…

자바스크립트 언어의 특징을 이해할 수 있었고, 실무에서 효과적으로 다루는데 도움이 되는 공부였다. 클린이라는 단어를 돌이켜보자면, 깨끗한 청결한의 의미를 갖고 있는데, 이 뜻이 시사하는 것처럼 클린코드의 시작은 정리인 것 같다. 내가 생각하는 정리란, 내가 어떠한 프로그램을 만든다고 했을 떄, 프로그램의 구성은 어떻게 되며 각 프로그램을 구성하는 코드들의 기능은 각각 어떻게 돌아가고 서로 유기적으로 맞물릴지는 결정하는 아키텍트(물론, 과하게 표현한듯 하지만.)라 생각한다.

이번 공부에서 언어의 지식뿐만 아니라, 그러한 아키텍트의 과정에서는 예를 들어 함수와 그 함수가 필요한 매개변수들이 정의가 되어질텐대, 이러한 요소들을 복잡하지 않은 기능 단위로 작성하는 방식을 심도 깊게 생각해볼 수 있었던 것 같다.

다시한번 이 강좌를 저렴한 가격에 제공해준 ‘Poco Jang’님에게 감사하다.

댓글남기기

참고