[Frontend] 코드 작성 규칙

📝JavaScript 규칙

• 의미 있는 변수, 함수, 클래스 이름 사용하기

  장점 : 가독성이 높아지고, 코드를 이해하기 쉬워짐

  단점 : 긴 이름을 사용하면 코드의 길이가 늘어나므로 일부 개발자들은 짧은 이름을 선호할 수 있음

• 일관된 들여쓰기와 포맷팅 규칙 따르기

  장점 : 코드의 일관성을 유지하여 가독성을 높임

  단점 : 코드를 작성할 때 일정한 들여쓰기를 유지해야 하므로, 일부 개발자들은 이를 귀찮거나 번거로워할 수 있음

• 문자열 리터럴에는 작은 따옴표 사용하기

  장점 : 코드의 일관성을 유지하고 가독성을 높임

  단점 : 따옴표를 바꾸는 작업이 추가될 수 있음

• 문장 끝에 세미콜론 사용하기

  장점 : 에러를 방지하고 코드의 일관성을 유지함

  단점 : 일부 개발자들은 세미콜론 사용을 필수적으로 여기지 않을 수 있음

• 전역 변수 피하기

  장점 : 전역 변수의 오용을 방지함으로써 코드의 안정성과 유지보수성을 높임

  단점 : 전역 변수를 사용하는 것이 코드 작성을 더 쉽게 만들 수 있기 때문에, 일부 개발자들은 이를 따르기 어려울 수 있음

• strict mode 사용하기

  장점 : JavaScript의 오류를 방지하고 코드의 안정성을 높임

  단점 : 일부 기능을 사용할 수 없게 될 수 있음

• 공백 주기

  C=A+B
  보다는
  C = A + B

• 중괄호는 통일성 있게 사용

  첫 번째 스타일

  main(){
  }

  두 번째 스타일

  main()
  {
  }

📝Reactjs/Nextjs Rules 규칙

• 컴포넌트의 이름을 대문자로 시작하도록 규칙 적용

  장점 : 컴포넌트 이름이 대문자로 시작하면, 다른 변수와 함수와 구분하기 쉽고 코드 가독성을 높여준다. 특히 다른 개발자들과 협업하는 경우 코드 이해도를 높일 수 있다.

  단점 : 컴포넌트 이름을 작성할 때, 기존 코드와 호환되지 않을 수 있다. 또한 대문자로 시작하는 규칙을 따르지 않는다면 코드 일관성이 떨어질 수 있다.

• Props와 state를 읽기 쉽게 작성하도록 규칙 적용

  장점 : Props와 state를 읽기 쉽게 작성하면 코드 유지보수성을 높여준다. 다른 개발자들이 해당 컴포넌트를 이해하기 쉬워지고, 필요한 수정이나 개선을 쉽게 할 수 있다.

  단점 : 작성 방식이 지나치게 디테일하거나 복잡한 경우 코드 가독성이 오히려 떨어질 수 있다. 또한 너무 자세한 규칙을 적용하면 코드 작성 속도가 느려질 수 있다.

• shouldComponentUpdate 함수를 적절히 사용하는 규칙 적용

  장점 : shouldComponentUpdate 함수를 사용하면, 불필요한 렌더링을 방지하여 성능을 향상시키는 데 도움이 된다. 컴포넌트가 변경될 때마다 리렌더링되지 않고, 필요한 경우에만 리렌더링된다.

  단점 : shouldComponentUpdate 함수를 사용하면 함수의 복잡도에 따라 성능에 영향을 미칠 수 있다. 또한, 최적화가 필요한 경우 함수를 수정하거나 최적화할 필요가 있다.

• 함수 컴포넌트에서 React Hooks를 사용하도록 규칙 적용

  장점 : 함수 컴포넌트에서 React Hooks를 사용하면, 코드의 간결성과 가독성이 높아진다. useState 함수를 사용하여 이전 state를 기반으로 새로운 state를 생성하는 경우, 코드가 더 직관적이고 이해하기 쉬워진다.

  단점 : 기존의 클래스 컴포넌트에서 사용되는 라이프 사이클 메서드를

📝CSS Rules 규칙

• CSS 클래스와 ID 이름을 명확하게 작성하고, 의미를 파악하기 쉽게

  장점 : 코드 가독성이 높아지고, 클래스나 ID를 찾아서 사용하기 쉬워진다.

  단점 : 클래스나 ID 이름을 작성할 때, 길어질 수 있어 코드가 복잡해질 수 있다.

• 일관된 CSS 스타일을 유지합니다.

  장점 : 코드 가독성이 높아지고, 스타일을 변경할 때 일관성을 유지할 수 있다.

  단점 : 스타일을 변경할 때 모든 코드를 수정해야 할 수도 있다.

• CSS 속성의 우선순위와 상속에 대해 이해하고, 이를 활용하여 스타일링합니다.

  장점 : 스타일 우선순위를 이해하여 코드를 효율적으로 작성할 수 있다.

  단점 : 속성 우선순위를 이해하지 못하면 예상치 못한 결과가 발생할 수 있다.

• CSS 전처리기(SASS, LESS 등)를 사용할 경우, 파일 구조를 일관성 있게 유지합니다.

  장점 : 전처리기를 사용하면 코드를 더 간결하고 유지보수하기 쉽게 작성할 수 있다.

  단점: 전처리기를 사용하면 추가적인 빌드 단계가 필요하고, 학습 비용이 들 수도 있다.

📝 파일 규칙

• 파일 이름과 경로를 명확하게 작성합니다.

  장점 : 파일을 찾아서 사용하기 쉽고, 코드 구조를 파악하기 쉬워진다.

  단점 : 파일 이름과 경로가 길어지면 코드가 복잡해질 수 있다.

• 파일 확장자를 일관성 있게 작성합니다.

  장점 : 코드를 작성하는 도중 파일 종류를 파악하기 쉽다.

  단점 : 파일 이름이 길어질 수 있다.

• 파일 관리를 위해 Git과 같은 버전 관리 시스템을 활용합니다.

  장점 : 이전 버전으로 돌아가거나, 작업 내용을 비교하거나, 다른 개발자와 협업할 때 유용하다.

  단점 : 시간과 노력이 필요하다.

• 파일 구조를 일관성 있게 유지합니다.

  장점: 코드 가독성이 높아지고, 유지보수성이 향상된다.

  단점: 파일 구조가 복잡해질 수 있다.

📝 Prettier

yarn add -D prettier

module.exports = {
  semi: true,
  printWidth: 120,
  endOfLine: 'auto',
  singleQuote: true,
  useTabs: false,
  tabWidth: 2,
  trailingComma: 'all',
  arrowParens: 'always'
};

• semi : true - statement 마지막에 세미콜론을 찍음
• printWidth : 120 - 선호되는 한 줄의 길이
• endOfLine : 'auto' - 파일의 마지막에는 EOL을 보장
• singleQuote : true - 쌍따옴표가 아닌 홑따옴표를 사용
• useTabs : false - 탭을 사용하지 않고 스페이스를 사용
• tabWidth : 2 - 탭을 할 경우 2 스페이스
• trailingComma : 'all' - 여러줄로 나뉘었을 때는 쉼표를 사용
• arrowParens : 'always' - 화살표 함수에서 괄호 사용 의무화

📝 ESlint

yarn add -D eslint

yarn add -D eslint-plugin-import
yarn add -D eslint-config-airbnb-base
yarn add -D eslint-config-prettier eslint-plugin-prettier

• eslint-plugin-import : ES2015+의 import/export 구문을 지원
• eslint-config-airbnb-base : airbnb사의 코딩스타일
• eslint-config-prettier, eslint-plugin-prettier : 앞선 prettier를 ESLint와 연결하기 위한 플러그인

📌 프로젝트의 .eslintrc

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['airbnb-base', 'plugin:prettier/recommended'],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  rules: {
    'no-new': 'off',
    'no-console': 'off',
    'no-alert': 'off',
    'no-plusplus': 'error',
    'no-param-reassign': 'error',
    'no-underscore-dangle': 'off',
    'no-return-assign': 'error',
    'max-depth': ['error', 2],
    'max-lines-per-function': ['error', 15],
    'import/extensions': ['off'],
    'import/prefer-default-export': 'off',
    "no-restricted-syntax": ["error", "ForInStatement", "LabeledStatement", "WithStatement"]
  },
};

• env는 프로젝트의 사용 환경이다.
• parserOptions에는 자바스크립트 버전, 모듈 사용 여부 등을 설정할 수 있다.
• extends 부분에는 확장 설정을 넣어준다. airbnb사의 코딩 스타일을 따르며 prettier을 반영하도록 설정했다.
• rules에는 extends와 plugins에 대한 세부 설정을 변경하는 코드를 넣을 수 있다. 값을 0으로 주면 에러 검출을 하지 않고, 1로 주면 경고, 2로 주면 에러를 표시한다. 상세한 룰은 문서 에 담겨져 있다.