<div id="readability-page-1" class="page"><div>
                <p><a href="/m/category/BACKEND/NODEJS"><span>BACKEND/NODEJS</span></a></p><h3>더 나은 TS/JS 코드 작성을 위해 피해야할것 4가지</h3>
              </div><p><cite>나를찾는아이</cite>
                <span> 2024. 2. 14. 10:46</span>
              </p><div>
                                <h3 data-ke-size="size23">1. 타입 추론이 어려운 비어있는 오브젝트로의 초기화, null 초기화를 피해주세요</h3>
<pre id="code_1707874485033" data-ke-language="typescript" data-ke-type="codeblock"><code>// ❌ 작성자의 변수 선언 의도를 알수 없음
const wrongTypeVariable1 = {} // const wrongTypeVariable1 = null;

const wrongTypeVariable2 = {
  a: 3,
}

const wrongTypeVariable3 = {}
wrongTypeVariable3.b = 'aaa';</code></pre>

<p data-ke-size="size16">변수 선언시에 타입의 선언이 없이 빈 object를 할당하거나, null을 할당해도 동작에는 이상이 없으나,</p>

<p data-ke-size="size16">코드를 읽는 사람으로 하여금 해당 변수가 향후 어떤 값을 갖게되는지 예측할수 없어 모든 로직을 훑어야만 합니다.</p>

<p data-ke-size="size16">해당 변수가 어떠한 역할을 하며 어떠한 형태의 값을 갖게 되는지 선언을 해주세요</p>



<h3 data-ke-size="size23">2. 리팩터링 내성이 없는 암묵적 리턴타입을 피해주세요</h3>
<pre id="code_1707874505229" data-ke-language="typescript" data-ke-type="codeblock"><code>// ❌ 내부 로직이 변경되면 함수의 시그니처가 변경됨(변경에 취약)
const unknownReturnTypeFunction = () =&gt; {
  ...
  ...
  ...
  return {
    a: aVar
    b: bVar
    c: {
      d: dVar,
      e: eVar,
      f: {
        g: gVar
      }
    }
  }
}</code></pre>

<p data-ke-size="size16">javascript, typescript는 함수 선언시에 리턴타입을 명시적으로 작성하지 않아도 암묵적으로 내부로직에 의해 리턴 타입이 계산됩니다</p>

<p data-ke-size="size16">그런데 이렇게 내부 로직에 의존하는 리턴타입을 갖게되는 경우 누군가의 내부로직의 수정으로 인하여 리턴타입이 바뀌어 함수의 시그니처가 변경될수 있습니다</p>

<p data-ke-size="size16">견고하고, 안전하게 리팩토링을 하기 위해서는 명확한 리턴타입이 정의되어있어서 내부로직이 변경되었을때도 리턴타입의 변화가 없음(인터페이스의 변화가 없음)을 증명하는것이 좋습니다</p>


<h3 data-ke-size="size23">3. 전달받은 인자의 값을 변경을 피해주세요</h3>
<pre id="code_1707874521945" data-ke-language="typescript" data-ke-type="codeblock"><code>function doSomething(data: SomeData) {
  ...
  data.notPureProperty = `I'm not Pure`;
  ...

  return resultAfterProcessing;
}

// ❌ 변수가 오염되었다는 것을 그 누구도 기대하지 않음</code></pre>

<p data-ke-size="size16">함수의 인자로 참조값이 전달된 경우 참조값이 전달되었기 때문에 이것의 프로퍼티를 변경하게 되면 다른 코드에서 예상치 못한 오류가 발생할수 있습니다.&nbsp;</p>

<p data-ke-size="size16">전달받은 인자값은 변경하지 말고 그대로 놓아두세요</p>

<p data-ke-size="size16">예상치 못한 오류를 방지합니다</p>


<h3 data-ke-size="size23">4. 모순의 상태가 발생하는 상태 관리를 피해주세요</h3>
<pre id="code_1707874537391" data-ke-language="typescript" data-ke-type="codeblock"><code>class ParadoxClass {
  itemPrice;
  itemCount;
  totalPrice;

  contructor(itemPrice, itemCount) {
     if (itemPrice &gt; 0) {
       this.itemPrice = itemPrice;
     } else {
       this.itemPrice = 0;
     }
     
     if (itemCount &gt; 0) {
       this.itemCount = itemCount;
     } else {
       item.itemCount = 0;
     }
     
     if (itemPrice &gt; 0 &amp;&amp; itemCount &gt; 0) {
       this.totalPrice = itemPrice * itemCount;
     } else {
       this.totalPrice = 0;
     }
  }
}

const instance = new ParadoxClass(-1, -10);
// itemPrice: 0; ✅
// itemCount: 0; ✅
// totalPrice: 0; ✅

instance.itemPrice = 100;
// itemPrice: 100
// itemCount: 0;
// totalPrice: 0; ❌ 올바르지 않음

instance.totalCount = 4;
// itemPrice: 100
// itemCount: 4;
// totalPrice: 0; ❌ 올바르지 않음</code></pre>

<p data-ke-size="size16">javascript, typescript에서의 클래스는 멤버변수에 private이나 readonly 등의 설정을 빠뜨리는 경우 기본적으로 public하여 외부에서 접근이 가능합니다</p>

<p data-ke-size="size16">그렇기 때문에 단순히 생성자에서만 제약조건을 처리한다거나 하는 경우 의도치 않은 모순된 상황, 또는 무결성이 깨진 상황이 발생할수있는 여지가 있습니다</p>

<p data-ke-size="size16">private, readonly 또는 getter, setter를 이용하여 더욱 견고한 코드를 작성할수 있습니다</p>
            
            
                </div></div>

나를 찾는 아이

Kyoung min, Kim

1. 타입 추론이 어려운 비어있는 오브젝트로의 초기화, null 초기화를 피해주세요
// ❌ 작성자의 변수 선언 의도를 알수 없음
const wrongTypeVariable1 = {} // const wrongTypeVariable1 = null;
const wrongTypeVariable2 = {
  a: 3,
}
const wrongTypeVariable3 = {}
wrongTypeVariable3.b = 'aaa';
 
변수 선언시에 타입의 선언이 없이 빈 object를 할당하거나, null을 할당해도 동작에는 이상이 없으나,
 
코드를 읽는 사람으로 하여금 해당 변수가 향후 어떤 값을 갖게되는지 예측할수 없어 모든 로직을 훑어야만 합니다.
 
해당 변수가 어떠한 역할을 하며 어떠한 형태의 값을 갖게 되는지 선언을 해주세요
 
 
 
2. 리팩터링 내성이 없는 암묵적 리턴타입을 피해주세요
// ❌ 내부 로직이 변경되면 함수의 시그니처가 변경됨(변경에 취약)
const unknownReturnTypeFunction = () => {
  ...
  ...
  ...
  return {
    a: aVar
    b: bVar
    c: {
      d: dVar,
      e: eVar,
      f: {
        g: gVar
      }
    }
  }
}
 
javascript, typescript는 함수 선언시에 리턴타입을 명시적으로 작성하지 않아도 암묵적으로 내부로직에 의해 리턴 타입이 계산됩니다
 
그런데 이렇게 내부 로직에 의존하는 리턴타입을 갖게되는 경우 누군가의 내부로직의 수정으로 인하여 리턴타입이 바뀌어 함수의 시그니처가 변경될수 있습니다
 
견고하고, 안전하게 리팩토링을 하기 위해서는 명확한 리턴타입이 정의되어있어서 내부로직이 변경되었을때도 리턴타입의 변화가 없음(인터페이스의 변화가 없음)을 증명하는것이 좋습니다
 
 
3. 전달받은 인자의 값을 변경을 피해주세요
function doSomething(data: SomeData) {
  ...
  data.notPureProperty = `I'm not Pure`;
  ...
  return resultAfterProcessing;
}
// ❌ 변수가 오염되었다는 것을 그 누구도 기대하지 않음
 
함수의 인자로 참조값이 전달된 경우 참조값이 전달되었기 때문에 이것의 프로퍼티를 변경하게 되면 다른 코드에서 예상치 못한 오류가 발생할수 있습니다. 
 
전달받은 인자값은 변경하지 말고 그대로 놓아두세요
 
예상치 못한 오류를 방지합니다
 
 
4. 모순의 상태가 발생하는 상태 관리를 피해주세요
class ParadoxClass {
  itemPrice;
  itemCount;
  totalPrice;
  contructor(itemPrice, itemCount) {
     if (itemPrice > 0) {
       this.itemPrice = itemPrice;
     } else {
       this.itemPrice = 0;
     }
     
     if (itemCount > 0) {
       this.itemCount = itemCount;
     } else {
       item.itemCount = 0;
     }
     
     if (itemPrice > 0 && itemCount > 0) {
       this.totalPrice = itemPrice * itemCount;
     } else {
       this.totalPrice = 0;
     }
  }
}
const instance = new ParadoxClass(-1, -10);
// itemPrice: 0; ✅
// itemCount: 0; ✅
// totalPrice: 0; ✅
instance.itemPrice = 100;
// itemPrice: 100
// itemCount: 0;
// totalPrice: 0; ❌ 올바르지 않음
instance.totalCount = 4;
// itemPrice: 100
// itemCount: 4;
// totalPrice: 0; ❌ 올바르지 않음
 
javascript, typescript에서의 클래스는 멤버변수에 private이나 readonly 등의 설정을 빠뜨리는 경우 기본적으로 public하여 외부에서 접근이 가능합니다
 
그렇기 때문에 단순히 생성자에서만 제약조건을 처리한다거나 하는 경우 의도치 않은 모순된 상황, 또는 무결성이 깨진 상황이 발생할수있는 여지가 있습니다
 
private, readonly 또는 getter, setter를 이용하여 더욱 견고한 코드를 작성할수 있습니다

더 나은 TS/JS 코드 작성을 위해 피해야할것 4가지

댓글