1주차 과제 코드 리뷰

변수명 naming

• 의미를 명확하게 하기 위해 축약하지 않고 full name 쓰기

// 내 코드
<ul id="myMsg" class="message"></ul>
<input id="txt" type="text" placeholder="message">
<button id="btn">send</button>

// 수정한 코드
<ul id="myMessage" class="message"></ul>
<input id="text" type="text" placeholder="message">
<button id="button">send</button>

if 컨벤션

• if 조건문의 괄호 앞 뒤에 공백이 들어가고, else if도 if와 동일한 레벨을 맞추는 것이 일반적임

// 내 코드
if(content.includes('http://')){
      index = content.indexOf('http://');
      } else if (content.includes('https://')){
      index = content.indexOf('https://');
      }

// 수정한 코드
if (content.includes('http://')){
  index = content.indexOf('http://');
} else if (content.includes('https://')){
  index = content.indexOf('https://');
}

참고 : Airbnb JavaScript Style Guide

반복되는 문자열 상수 처리

• 반복되는 문자열은 상수로 선언하여 재사용함

// 내 코드
if (content.includes('http://')){
  index = content.indexOf('http://');
} else if (content.includes('https://')){
  index = content.indexOf('https://');
}

// 수정한 코드
const httpText = 'http://';
const httpsText = 'https://';

if (content.includes(httpText)){
  index = content.indexOf(httpText);
} else if (content.includes(httpsText)){
  index = content.indexOf(httpsText);
}

Template Literals

• 내장된 표현식을 허용하는 문자열 리터럴
• 플레이스 홀더를 이용하여 표현식을 넣을 수 있는데, $와 중괄호({})로 표기함
• 플레이스 홀더 안에서의 표현식과 그 사이의 텍스트를 함께 함수로 전달함

const a = 5;
const b = 10;
console.log(`Fifteen is ${a + b} and not ${2 * a + b}`);

const aURL = `<a href ='${URL}'>${URL}</a>`;

const classes = `header ${isLargeScreen() ? '' :
(item.isCollapsed ? 'icon-expander' : 'icon-collapser')}`;

매개변수로 쓴 변수 재할당 금지

• 매개변수로 사용한 변수를 재할당하는 것을 지양할 것

  • 매개변수의 값이 바뀌면 예상치 못한 버그가 발생할 수 있음
  • 디버깅을 어렵게 만들 수 있음

• 새로운 변수에 값을 할당하여 사용하는 것을 권장함

// 내 코드
function convertToLink(content) {
  ...
  if (index!== -1) {
   const URL = content.substring(index);
   const aURL = `<a href ='${URL}'>${URL}</a>`;
   content = content.replace(URL, aURL);
   return content;
  }
}

// 수정한 코드
function convertToLink(content) {
  ...
  if (index!== -1) {
   const URL = content.substring(index);
   const aURL = `<a href ='${URL}'>${URL}</a>`;
   replacedContent = content.replace(URL, aURL);
   return replacedContent;
  }
}

함수 리팩토링

• 옵션이 긴 경우, 옵션을 별도의 변수로 빼줄 수 있음
• 값를 재사용하지 않는 경우, 값을 변수에 할당하지 않고 바로 사용함

// 내 코드
function prettifyISOString(iso) {
  const time = new Date(iso).toLocaleTimeString('en',
                 { timeStyle: 'short', hour12: false, timeZone: 'UTC'});
  return time;
}

// 수정한 코드
function prettifyISOString(iso) {
  const timeOptions = { timeStyle: 'short', hour12: false, timeZone: 'UTC'};
  return new Date(iso).toLocaleTimeString('en', timeOptions);
}

textContent, innerText, innerHTML 차이

• textContent

  • 노드의 모든 요소를 반환함
  • HTML로 분석할 필요 없음
  • XSS의 공격에 대한 위험 없음

• innerText

  • 사람이 읽을 수 있는 요소만 반환함
  • 숨겨진 요소의 텍스트는 반환하지 않음
  • innerText값을 읽으면 최신 계산값을 반영하기 위해 리플로우가 발생함

• innerHTML

  • 요소 내에 포함된 HTML이나 XML을 반환함

참고 : textContent, innerText, innerHTML