Basic

1. console.log 삭제

테스트 끝난 콘솔은 모두 지워준다. console.log는 테스트를 할 때는 필수적이지만 최종 결과물에는 포함되면 안 된다.

console.log가 최종 결과물에 남아있다면 가독성을 해칠 수 있다. 또한 기존의 console.log가 잔존한 상태로 새로운 테스트를 위해 console.log 를 추가했을 때 기존의 console.log와 혼재되어서 내가 진짜로 확인하고 싶은 값이 무엇인지 알기 어려워진다.

코드의 가독성, 다른 팀원을 위한 기본적인 배려 차원에서 console.log를 지우는 것은 가장 기본적인 컨벤션이다. 따라서 반드시 테스트를 끝낸 console.log는 지워줘야 한다.

2. id ・ class명, 변수명, 함수명

id ・ class, 변수, 함수의 이름에서 의미가 직관적으로 드러나게 작성해야 한다. 또한 camelCase 컨벤션도 지켜줘야 한다.

// bad
let value = "Tom";
let value2 = "Cruise"

// good
let firstName = "Tom"
let lastName = "Cruise"

개발자가 보내는 시간 중 코드를 짜는 시간은 10% 밖에 안 된다고 한다. 나머지 90% 시간은 모두 코드를 읽고 해석하면서 시간을 보낸다고 한다.

그렇기 때문에 내가 짠 코드를 미래의 내가, 그리고 협업하는 다른 팀원들이 읽기 쉽게 만드는 일은 가장 기본이면서 가장 중요한 일이다. 따라서, 모두 명확하고 직관적인 네이밍을 통해서 가독성이 좋은 코드를 짜야 한다.

3. 들여 쓰기

프로그래밍 언어에서 규칙성 있는 들여 쓰기는 가독성 측면에서 매우 중요하다.

const thisIsButton = document.getElementsByClassName('login-btn')[0];

thisIsButton.addEventListener('click', function() {
  const password = document.getElementById('password').value;
  const rePassword = document.getElementById('re-password').value;

  if (!password) {
    alert('비밀번호를 입력해주세요!');
    return;
  }
  
  if (!rePassword) {
    alert('비밀번호 확인을 입력해주세요!');
    return;
  }
  
  if (password !== rePassword) {
    alert('비밀번호가 맞지 않습니다!');
    return;
  }
  
  alert('회원가입 성공!!');
});

HTML

4. Semantic Tag의 사용

HTML에는 다양한 태그가 존재하며 그 중에서도 Semantic Tag를 적절하게 사용하는 것은 가독성 ・ SEO측면에서 너무나 중요하다. <div> <span> 태그를 남발하기 보다는 상황에 맞게 적절한 태그를 사용해야 한다.

HTML은 웹브라우저가 읽을 수 있는 문서를 작성하기 위해 사용한다. 문서는 명확히 어떤 정보를 나타내고 있는지 알 수 있어야 가치있는 문서라고 할 수 있다.

<article>
  <h1>셀프 리팩토링</h1>
  <p>
    리팩토링이무엇일까요? 리팩토링은 소프트웨어의 겉보기 동작은 그대로 유지한
    채, 코드를 이해하고 수정하기 쉽도록 내부 구조를 변경하는 기법입니다.
  </p>
</article>

이처럼 Semantic Tag를 이용해서 HTML을 작성하면 사람과 웹 브라우저 모두 읽기 편해진다. 따라서, SEO 최적화, 접근성 향상, 가독성 높은 코드 등의 이점을 얻을 수 있다.

5. img tag alt 속성

img 태그를 사용할 때는 아래와 같은 이유로 반드시 alt 속성 부여해줘야 한다.
1. 이미지가 로딩되지 않을 경우 alt 속성에 적힌 값이 보여짐.
2. 시각장애인의 경우 alt 속성을 통해 어떤 이미지가 보여지는지 알 수 있음.
3. SEO 검색엔진 최적화에서 어떤 img인지 인식하는 코드는 alt 속성임.

위와 같은 이유로 alt 속성은 중요하기 때문에 src 속성보다 먼저 작성하는게 좋다.

<!-- Bad  -->
<img src="/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />

<!-- Good  -->
<img alt="Google Logo" src="/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />

6. Self Closing Tag

Self Closing이 가능한 태그들은 Self Closing을 적용시켜 주는 게 좋다. HTML 태그는 일반적으로 여는 태그(<div>) 와 닫는 태그 (</div> )로 이루어져 있다. 하지만, 열고닫는 태그 없이 스스로 닫을 수 있는(Self Closing) 태그들을 쓸데없이 열고 닫으면 가독성을 해칠 수 있다.

<!-- Bad  -->
<input type="password"></input>

<!-- Good  -->
<input type="password" />

아래는 Self Closing을 적용할 수 있는 단일 tag들의 목록이다.
- <br>
- <hr>
- <img>
- <meta>
- <link>
- <input>

CSS

7. CSS 속성 순서

CSS 속성은 레이아웃에 영향을 많이 주는 순서대로, 인접 속성끼리 묶어서 작성해주는게 좋다. CSS 속성은 작성 순서는 성능향상이나 적용 순서에 유의미한 영향을 주지는 않는다. 하지만 우리가 작성한 수많은 css 속성들이 규칙없이 뒤섞여 있다면, 원하는 속성이 어디에 있는지, 이 선택자에 어떤 속성이 적용되고 있는지 한눈에 파악하기 힘들어진다.

CSS는 서로 영향을 미치는 구조로 이루어져 있고, 이 연관관계가 코드가 길어질수록 복잡해진다. 이러한 이유로, CSS 유지보수가 Javascript 유지보수보다 힘들다. 따라서, 연관관계를 조금이라도 쉽게 파악하기 위해서 반드시 컨벤션을 지켜서 작성하는 습관을 들여야 한다.

CSS 속성은 레이아웃에 영향을 많이 주는 순서대로 , 인접 속성끼리 묶어서 작성해주는게 좋습니다. 권장되는 속성 순서는 아래와 같습니다.
1. Layout Properties (position, float, clear, display)
2. Box Model Properties (width, height, margin, padding)
3. Visual Properties (color, background, border, box-shadow)
4. Typography Properties (font-size, font-family, text-align, text-transform)
5. Misc Properties (cursor, overflow, z-index)

8. 다른 CSS 선택자들 사이 한 줄 띄우기

각자 다른 CSS 선택자들 사이에는 한 줄씩 공백을 주는 게 가독성 측면에서 좋다.

.login-btn {
    height: 2.5rem;
    margin: 0.625rem 0px;
    border: 0;
    border-radius: 0.3125rem;
    background-color: var(--disabled);
    color: var(--white);
    font-weight: 700;
    font-size: 0.9375rem;
}

.find-password {
    margin: 3.75rem 0 1.25rem 0;
    color: #00376b;
    text-align: center;
    font-size: 12px;
}

.enabled-btn {
    background-color: var(--enabled);
    cursor: pointer;
}

.disabled-btn {
    background-color: var(--disabled);
    cursor: default;
}

9. 불필요한 style 속성 작성 지양

불필요한 style 속성은 작성할 필요가 없다.

1. block 요소에 불필요하게 display:block; 을 부여하는 것
2. block 요소에 불필요하게 width:100% 를 부여하는 것
   위 두가지 예시처럼 불필요한 style 속성을 부여할 필요가 없다.

<div>, <article> 등 수많은 요소는 이미 display:block을 default style로 적용이 되고 있습니다. 이러한 tag들에 display:block 을 선언해줘서 불필요한 코드를 작성할 필요는 없다. 또한, display:block 요소들은 기본적으로 부모요소의 너비를 모두 차지하고 있다. 따라서, display:block 요소들에 불필요하게 width:100% 를 선언해줄 필요도 없다.

CSS의 기본 동작 원리를 잘 이해하고, 각 HTML tag들이 어떤 default css value를 가지고 있는지 확인해서 불필요한 style 속성 작성을 지양해야 한다.

📎 참고자료 : CSS Default Values Reference

10. 레이아웃은 bottom-up 방식으로 구성

레이아웃을 구성할 때 부모요소의 높이를 미리 정해두고 자식요소의 크기를 정하는 top-down 방식이 아닌, 자식요소의 높이에 따라 부모요소의 높이가 유동적으로 결정되는 bottom-up 방식으로 구성하는 게 좋다.

레이아웃을 구성할 때 부모요소의 크기를 고정적으로 정해둔다면, 자식요소의 크기가 변함에 따라서 부모요소의 크기가 유동적으로 변하지 않는다. 이런 상황에서 만약 자식요소의 크기가 변해야 한다면, 부모요소의 CSS도 같이 수정해줘야 하는 불편함이 있다. 이런 구성이 겹겹이 쌓인다면 추후에 CSS 유지보수가 매우 힘들어진다.

// bad
.feedList {
	height:100vh;
}

.feed{
	height:300px;
}

// good
.feedList {
	padding-top:20px;
}

.feed{
	height:300px;
}