일관성있는 코드 작성하기..

이 스타일 가이드는 프로젝트에서 일관성 있는 코드를 작성하여 작업자 간 공유를 쉽게 하고, 유지보수 및 확장 비용 최소화를 목표로 함
(내가 평소에 습관화돼 있지 않은 부분만 작성)

HTML

• 들여쓰기 공백(space) 2문자를 사용한다. (Tab❌ Space⭕)
• 속성값에는 반드시 큰따옴표("")를 사용
• Boolean 속성은 값을 따로 명시하지 않는다.
  • ex: selected=true❌ selected⭕
• 불필요한 태그 작성을 피한다.
  • HTML 문서의 크기가 작을수록 네트워크를 통해 전송되는 데이터 양은 줄어든다.
  • HTML 문서의 깊이가 얕을수록 브라우저가 렌더링할 때 사용하는 렌더 트리가 가벼워지므로, 렌더링 속도가 빨라진다.
• 엔티티 참조는 사용하지 않는다.
  • 모두 같은 인코딩 방식을 따르면 작성한 문자가 그대로 나타나기 때문에 — ”등의 엔티티 참조를 사용할 필요가 없다.
  • 다만 HTML에서 의미가 있는 <나 &등 문자는 엔티티 참조를 사용해야 함
• CSS/자바스크립트 파일을 불러오는 경우 type을 명시하지 않는다.
  • HTML5 스펙에 따르면 CSS나 자바스크트 파일을 불러오는 경우 type속성의 기본값이 각각 text/css, text/javascript로 지정되어 있으므로, 속성값을 명시하지 않는다.

CSS

• 마찬가지로 들여쓰기는 공백(space) 2문자를 사용
• 아이디명은 -를 사용하는 케밥 케이스(kebab-case)를 사용
• 단일 스타일은 한 줄에 표시한다.
• 스타일 지정 시 아이디 대신 클래스를 사용한다.
  • 스타일 지정을 위해서는 무조건 클래스를 사용한다.
  • 아이디를 사용한다면 재사용성 측면뿐 아니라 선택자 우선순위가 매우 높기 떄문에 예측하지 못한 동작을 이야기할 수 있다.
• 자바스크립트 Hook에서 스타일 지정을 위해 만들어진 클래스를 사용하지 않는다.
  • 자바스크립트를 사용해 DOM 이벤트 핸들러를 등록할 때, 스타일 지정을 위해 사용된 클래스를 사용하지 않는다.
  • CSS 스타일 지정과 자바스크립트 동작 제어는 서로 다른 책임을 갖기 때문에, 각각을 분리해서 관리하는 것이 유지보수 측면에서 유리하다.
  • 이 경우 자바스크립트에서 쓸 클래스는 js-접두어를 붙이는 것을 권장
• border가 없을 경우 none대신 0을 사용한다.
• 태그 선택자 대신 클래스 선택자를 사용
  • 렌더링 성능을 위해 가능한 한 태그 선택자보다 클래스 선택자를 사용
  • 태그 선택자와 함꼐 속성 선택자를 사용할 수 있지만 성능 이슈가 발생하므로 피해야함
• 선택자 길이를 짧게 유지하고 최대 3개 이상 넘지 않게 제한한다.
  • 부모 선택자를 표시해야 한다면 꼭 필요한 경우에만 작성
• 가능한 한 축약형을 사용한다.
  • padding, margin, font, background, border, border-radius 등 축약형 사용이 가능한 프로퍼티는 가능한 한 축약형을 사용
  • 불필요하게 축약형을 과용하는 것은 피한다.
• @import 대신 <link>를 사용한다.
  • <link>와 비교하여 훨씬 느리기 때문에 @import를 사용하지 않는다.
  • @import를 사용할 경우 @import한 자원을 받는 동안 브라우저는 CSS를 처리할 수 없어 로딩 시간이 길어진다.
  • 또한 해당 CSS의 다운로드 순서로 인해 문제가 생겼을 경우 추적이 힘듦

JavaScript

• 들여쓰기는 공백 문자 2개를 사용하며 space와 tab을 섞어서 사용하지 않는다.
  • 사용하는 개발환경에 따라 탭 또는 스페이스의 들여쓰기가 다르게 보일수 있기 때문
• 한 줄에 하나의 문장만 허용하며, 문장 종료 시에는 반드시 세미콜론(;)을 사용한다.
• 전역 변수를 사용하지 않는다.
  • 프로그램의 모든 부분에서 변경될 수 있고, 그로 인해 프로그램에 치명적이 오류를 발생시킬수 있다.
• const를 let 보다 위에 선언한다.
• const와 let은 사용 시점에 선언 및 할당을 한다.
  • const와 let으로 선언한 변수는 블록 스코프이므로 호이스팅 되지 않는다.
• 외부 모듈과 내부 모듈을 구분하여 사용한다.
  • 외부 모듈과 내부 모듈을 변수 참조할 때, 선언 사이에 공백을 두면 가독성이 좋아진다.
• 배열 복사 시 순환문을 사용하지 않는다.
  • 복잡한 객체르 복사할 때 전개 연산자를 사용하면 좀 더 명확하게 정의할수 있고 가독성이 좋아진다.
• 배열의 시작 괄호 안에 요소가 줄바꿈으로 시작되었다면 끝 괄호 이전에도 일관된 줄 바꿈 해야한다.
• 객체의 프로퍼티가 1개인 경우에만 한 줄 정의를 허용하며, 2개 이상일 경우에는 개행을 강제한다.
• 객체의 메서드 표현시 축약 메소드 표기를 사용한다.
• 메서드 문법 사용시 메서드 사이에 개행을 추가한다.
• 함수는 사용 전에 선언해야 하며, 함수 선언문은 변수 선언문 다음에 오도록 한다.
• 함수 표현식 대신 화살표 함수를 사용한다.
  • 화살표 함수는 별도의 this 바인딩 없이 상위 컨텍스트에 바인딩되기 떄문에 함수 표현식보다 혼란이 적으며 덜 장황하고 추론이 쉽다.
• 화살표 함수에서 암시적 반환을 사용할 경우 함수 본문 전에 개행을 하지 않는다.
• Promise Executor 함수에 async 함수를 사용하지 않는다.
  • 비동기 Excutor 함수가 throw한 오류를 잡을 수 없고, Promise가 reject되지 않아 디버깅이 어렵다.
• 오브젝트의 프로퍼티에 접근할 때는 Destructuring을 이용
  • 오브젝트에서 필요한 값만을 추출하여 변수에 할당하는 방법은 직관적이며 코드를 이해하기 쉬워진다.
  • 새로운 이름으로 변수에 할당 할 때는 꼭 Destructuring을 사용하지 않아도 된다.
• wildcard import는 사용하지 않는다.
  • 이름을 지정하지 않으면 모듈이 변경될 떄마다 식별자 충돌이 발생할 수 있다.
• 키워드와 조건문 사이에 빈칸을 사용한다.
  • 키워드와 조건문 사이가 빼곡하면 코드를 읽기 어렵다.
• switch-case 사용 시 첫 번째 case문을 제외하고 case문 사용 이전에 개행한다.
• switch-case 사용 시 각 구문은 break, return, throw 중 한 개로 끝나야 하며 default문이 없으면 // no default 표시를 해준다.
• 함수 내에서 반환은 한 번만 한다.
  • 특정 값을 반환해야 하는 경우, 함수 맨 마지막에서 한 번만 반환한다.
  • 단, 예외로 빠져나가는 경우는 제외
• return문 바로 위는 한 칸 비워 놓는다.
• for-in문 안에서는 hasOwnProperty 조건 검사를 수행한다.
  • 예상치 않게 상속받은 프로퍼티로 인해 문제가 생길 수 있다.
• 주석은 설명하려는 구문에 맞춰 들여쓰기 한다.
• 콤마 다음에 값이 올 경우 공백이 있어야 한다.

참고 사이트

https://ui.toast.com/fe-guide/ko