Tip. 코딩 잘하는 팁 3가지

2021-12-26

출처 : 드림코딩 by 엘리 https://youtu.be/jafa3cqoAVM

DRY : Don’t Repeat Yourself 반복하지 마라.

시스템내에서 특정한 지식과 로직은 단 한 곳에서 작성하자.

재사용성을 높이고 유지보수에도 좋다.

KISS : Keep It Simple, Stupid 심플하고 멍청하게 유지하자.

시스템을 설계할때 심플하게! 불필요한 복잡함은 피하자.

• Code : 누구나 이해할 수 있도록 심플하고 간결하게 작성하자.

• Function : 별도의 주석을 작성하지 않아도 함수의 이름, 매개변수, 코드를 읽었을 때 한번에 이해할 수 있도록 한가지 기능을 수행하는 함수를 심플하게 작성하도록 하자.

• Class : 한가지의 책임만 담당하는 클래스를 심플하게 만든다.

• View : UI 컴포넌트는 비즈니스 로직을 포함하지 않고 UI에 관련된 로직만 담당

• Service : 하나의 기능만 담당하는 개별적인 심플한 서비스를 만들도록 하자.

• System : 이를 통해서 전체적인 시스템을 KISS하게, 심플하게 만들 수 있다.

똥 코드

class LoginView {
 display() { // UI를 보여주는 함수
  ...
 }
  
 onLoginButtonClick() { // 로그인 클릭시 처리하는 비즈니스 로직 
    fetch('https://')
      .then(data => data.json())
      .then(data => {
        if(data.token) {
          ...
      .catch(error => 
          ... 

⇒ UI에 관련된 로직들만 있도록 개선

비즈니스 로직을 담당하는 별도의 클래스를 만들어주자.

개선 코드

class LoginView {
  constructor(userPresenter) {
      this.userPresenter = userPresenter;
  }
  display() {
  }
  onLoginButtonClick() {
    this.userPresenter
      .login()
      .then(result => {
        // result.displayMessage 등의 값으로 ui element update 
}

class userPresenter {
  userService; // 백엔드와 통신 로직 담당 
  login() {
    this.userService
      .login()
      .then(result => {
        if(result.success) {
          ... 
          return {
            displayMessage: result.message,
            buttonText: 'Go Home',
          }
         ...
}

⇒ userPresenter라는 별도의 클래스를 이용해서 별도의 비즈니스 로직을 처리한 다음에, 처리된 데이터를 사용자에게 보여주기만 하는 로직을 맡도록 만든다.

⇒ 이렇게 만들면 개별적인 모듈을 유닛테스팅 하기에도 좋다!

YAGNI : You Aren’t Gonna Neet It. 너 그거 필요 없어.

필요하지 않는 기능, 사용하지 않는 기능, 지나치게 미래지향적인.. 미래의 확장성을 위한 코드를 만들지 말자.

코드를 깨끗하게, 변경이 쉽게, 유지보수가 용이하도록 시스템에 불필요한 복잡성을 더하지 않는 내에서 확장성이 있는 코드를 작성해야 한다.