1. 매개변수 3개 이상은 X - mapper 객체로 감싸서 거기서 꺼내 올 수 있게끔 만든다.

2. 변수명, 엘리먼트명, 함수명 잘 기능될수있게 지어주기.

3. 계층화 분리, 로직분리 신경쓰기.

4. 다른 개발자들이 코드만 봐도 어떤 플로우인지 알아보기쉽게끔 작성하기.

   • 예를 들면, event target의 경우 어떤 종류의 이벤트인지 as로 별칭지어주기

   import { Input, Output, EventEmitter } from '@angular/core';
   
   export class HospitalCrmTargetTypeForm {
     @Input() formValue = {};
     @Output() onChange = new EventEmitter<{ value: string; key: string }>();
   
     handleChange(event: Event) {
       const { value, name: key } = event.target as HTMLInputElement;
       this.onChange.emit({ value, key });
     }
     constructor() {}
   }
   

   • 2. if문 조건 걸때, 어떤 조건에서 실행되는지를 명확히 해주기 위해 필요가 없더라도 플래그 만들어두고 구분하기.

   import { Component, OnInit, Input } from '@angular/core';
   
   @Component({
     selector: 'app-hospital-crm-form-section',
     templateUrl: './hospital-crm-form-section.component.html',
     styleUrls: ['./hospital-crm-form-section.component.scss']
   })
   export class HospitalCrmFormSectionComponent implements OnInit {
     @Input() tooltip = '';
     @Input() index = 1;
     @Input() title = '';
     @Input() isBlocked = false;
     @Input() blockMessage = '';
   
     sectionIndex = '';
   
     constructor() {}
   
     ngOnInit() {
       this.sectionIndex = String(this.index).padStart(2, '0');
     }
   }
   
   //HTML
   
   <section class="form-section">
     <div class="form-section-title">
       <b class="form-section-point"> {{ sectionIndex }}</b>
       <h2>{{ title }}</h2>
       <i *ngIf="tooltip" class="icon icon-question-mark adjust" [ngbTooltip]="tooltip" placement="bottom"></i>
       <span *ngIf="isBlocked" class="form-section-sub">{{ blockMessage }}</span>
     </div>
     <div class="form-section-content">
       <div *ngIf="isBlocked" class="form-section-dimmed"></div>
       <ng-content></ng-content>
     </div>
   </section>
   

   간단한 Text Wrapping의 경우 변하지 않는 값이면 상수, 변하는 값이면 객체에 key-value로 등록해놓기.

   export const AGE_DATE_SUFFIX = {
     YEAR: '세',
     MONTH: '개월'
   };
   
   //HTML
   
   <button class="ha-dropdown-toggle form-control" ngbDropdownToggle>
       {{ formValue.startAge }}{{ AGE_DATE_SUFFIX[formValue.ageDateType] }}
   </button>
   

   3. memoization, 인스턴스, 자원관리 신경쓰기.
   • 쓸데없는 인스턴스가 생기면 그걸 처리해주기.
   • 재사용할 수 있는 인스턴스는 재사용해주기.
   • UseDispatch, 혹은 스토어의 역할을 하는 기능 함수 쓰기
   • container-presenter 패턴으로 각 디렉토리마다 index파일만들고 한꺼번에 import
   4. 자바스크립트 코드 스타일 효과적인 래핑 기법 잘 활용하기
   • 삼항연산자를 함수안에 넣어서 리턴시킬 수 있게 만드는 것

5. 로직과 관계없거나 어쩔수 없이 이번만 써야하는 변수/함수앞에는 언더바 스코어를 붙여준다.

6. 변수에 값을 할당할때도 삼항연산자를 활용해 할당하는 걸 활용하면 좋다.

7. 리턴대신 값을 바로 넣어야하는 경우 & trick을 써주면 좋다

   handleChangeSymptom(id: string) {
       this.symptoms$.pipe(take(1)).subscribe(symptoms => {
         const index = symptoms.findIndex(({ _id: symptomsId }) => symptomsId === id);
         this.scheduleForm.patchValue({
           useSymptom: id && index >= 0,
           ...(id && index >= 0 && { symptom: symptoms[index].name })
         });
       });
     }
   

8. 굳이 안써도 되어도 이게 디폴트로 들어가는 값이라는 걸 명시해주기 위해 상수를 따로 만들어서 빼기

9. and trick, or trick 잘 활용해 변수에 값 할당하기

   • ageType이 SELECT인 경우에만 - 객체를 할당하는 데 이때 startAge도 Number(startAge)로 변환 후 0을 할당한다

const newObj = ageType === 'SELECT' && { ageDateType, startAge: Number(startAge) || 0, endAge: Number(endAge) || 0 }

export const FILTER_TYPE = [
  { value: 'ALL', label: '전체' },
  { value: 'SELECT', label: '선택' }
];

export const BASIC_FILTER_TYPE = FILTER_TYPE[0].value;

JS tricks

Short-Circuiting

How to Shorten JavaScript Conditionals with Short-Circuiting * Reed Barger