코드 컨벤션
module.exports = {
trailingComma: 'es5', // 객체나 배열 등 마지막 줄의 콤마 여부(ES5부터 허용)
tabWidth: 2, // 탭너비 2로 설정
semi: true, // 세미콜론 자동수정
singleQuote: true, // 큰따옴표를 작은따옴표로 자동수정
printWidth: 80, // 줄바꿈할 길이 설정
};
JavaScript
복사
setting 자동설정
문장이 종료될 때는 세미콜론을 붙여줍니다.
함수명, 변수명은 카멜케이스로 작성합니다.
가독성을 위해 한 줄에 하나의 문장만 작성합니다.
주석은 설명하려는 구문에 맞춰 들여쓰기 합니다.
// Good
function someFunction() {
...
// statement에 관한 주석
statements
}
JavaScript
복사
연산자 사이에는 공백을 추가하여 가독성을 높입니다.
a+b+c+d // bad
a + b + c + d // good
JavaScript
복사
콤마 다음에 값이 올 경우 공백을 추가하여 가독성을 높입니다.
var arr = [1,2,3,4]; //bad
var arr = [1, 2, 3, 4]; //good
JavaScript
복사
생성자 함수명의 맨 앞글자는 대문자로 합니다.
function Person(){}
JavaScript
복사
React 컴포넌트 파일 헤더 부분의 순서를 정해 가독성을 높입니다.
// 1. hook
import { useState } from 'react';
import { Link } from 'react-router-dom';
// 2. styled-component
import styled from 'styled-components';
// 한줄 공백
// 3. import로 가져오는 컴포넌트 파일
import Album from '../common/Album';
// 한줄공백
// 4. 불러오는 이미지 파일
import postImg1 from './../../assets/testImg/post1.png';
import postImg2 from './../../assets/testImg/post2.png';
JavaScript
복사
코드 컨벤션이 필요한 이유
•
팀원끼리 코드를 공유하기 때문에 일관성있는 코드를 작성하면 서로 이해하기 쉽다.
•
나중에 입사 지원 시 프로젝트를 하며 코드 컨벤션을 만들어 진행했다고 하면 협업 면에서 유리하게 작용할 수 있다.
참고
커밋 컨벤션
예시
이모지[공백]Feat:[공백]커밋메세지[공백](#이슈번호)
💡 Feat: 버튼 컴포넌트 추가 (#1)예시
이모지[공백]Feat:[공백]커밋메세지[공백](#이슈번호)
💡 Feat: 버튼 컴포넌트 추가 (#1)
JavaScript
복사
커밋 유형 | 의미 |
| Feat: | 새로운 기능 추가 |
| Fix: | 버그수정 |
| Docs: | 문서 수정 |
| Refactor: | 리팩토링 |
| Design: | CSS 등 사용자 UI 디자인 변경 |
| Style: | 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우 |
| Comment: | 필요한 주석 추가 및 변경 |
| Init: | 프로젝트 초기 생성 |
| Chore: | 이외의 변경사항 |
| Rename: | 파일 또는 폴더 명을 수정하거나 옮기는 작업만인 경우 |
| Remove: | 파일을 삭제하는 작업만 수행한 경우 |
| Release: | 배포 |
module.exports = {
trailingComma: 'es5', // 객체나 배열 등 마지막 줄의 콤마 여부(ES5부터 허용)
tabWidth: 2, // 탭너비 2로 설정
semi: true, // 세미콜론 자동수정
singleQuote: true, // 큰따옴표를 작은따옴표로 자동수정
printWidth: 80, // 줄바꿈할 길이 설정
};
JavaScript
복사
setting 자동설정
문장이 종료될 때는 세미콜론을 붙여줍니다.
함수명, 변수명은 카멜케이스로 작성합니다.
가독성을 위해 한 줄에 하나의 문장만 작성합니다.
주석은 설명하려는 구문에 맞춰 들여쓰기 합니다.
// Good
function someFunction() {
...
// statement에 관한 주석
statements
}
JavaScript
복사
연산자 사이에는 공백을 추가하여 가독성을 높입니다.
a+b+c+d // bad
a + b + c + d // good
JavaScript
복사
콤마 다음에 값이 올 경우 공백을 추가하여 가독성을 높입니다.
var arr = [1,2,3,4]; //bad
var arr = [1, 2, 3, 4]; //good
JavaScript
복사
생성자 함수명의 맨 앞글자는 대문자로 합니다.
function Person(){}
JavaScript
복사
React 컴포넌트 파일 헤더 부분의 순서를 정해 가독성을 높입니다.
// 1. hook
import { useState } from 'react';
import { Link } from 'react-router-dom';
// 2. styled-component
import styled from 'styled-components';
// 한줄 공백
// 3. import로 가져오는 컴포넌트 파일
import Album from '../common/Album';
// 한줄공백
// 4. 불러오는 이미지 파일
import postImg1 from './../../assets/testImg/post1.png';
import postImg2 from './../../assets/testImg/post2.png';
JavaScript
복사
코드 컨벤션이 필요한 이유
•
팀원끼리 코드를 공유하기 때문에 일관성있는 코드를 작성하면 서로 이해하기 쉽다.
•
나중에 입사 지원 시 프로젝트를 하며 코드 컨벤션을 만들어 진행했다고 하면 협업 면에서 유리하게 작용할 수 있다.
