.gif&blockId=743d12a5-f17c-4b91-a76d-8a3aa6fd4c06)
파일
컴포넌트로 분리된 파일은 PascalCase으로 작성합니다.
Header.jsx
Main.jsx
PopUpNews.jsx
JavaScript
복사
컴포넌트가 아닌 파일, 함수명, 변수명은 camelCase로 작성합니다.
// 컴포넌트가 아닌 파일
fetchApi.jsx
auth.jsx
JavaScript
복사
다른 스타일 시트 파일(Styled-components)은, 스타일 시트 적용할 파일명 .style.js를 붙여준다.
Header.jsx // 컴포넌트 파일
header.style.js // 컴포넌트에 해당하는 스타일 파일
JavaScript
복사
변수
함수명, 변수명은 camelCase로 작성합니다.
// 함수명
function handleResetClick(){}
// 변수명
const isLog = false;
const list2 = ["a", "b"];
JavaScript
복사
만약 변수에 할당되는 값이 boolean인 경우에는 is를 접두사로 붙인다.
const isLoading = false;
const isOpen = true;
JavaScript
복사
상수는 대문자로만 작성한다.
const URL = 'https://naver.com'
JavaScript
복사
기타
컴포넌트 파일 내 import 순서는 다음과 같이 한다.
모듈 → 컴포넌트 → 스타일컴포넌트
// 모듈
import { BrowserRouter, Routes, Route } from "react-router-dom";
import styled from "styled-components";
// 컴포넌트
import Home from "./components/pages/home/Home";
import LogIn from "./components/pages/users/Login";
// 스타일 컴포넌트
import {
LoginSigninSection,
InputIdPw,
LinkRegister,
} from './LoginSigninStyle'
JavaScript
복사
문자열을 처리할 때는 쌍따옴표를 사용하도록 합니다.
문장이 종료될 때는 세미콜론을 붙여줍니다.
가독성을 위해 한 줄에 하나의 문장만 작성합니다.
주석은 설명하려는 구문에 맞춰 들여쓰기 합니다.
// 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
복사
코드 컨벤션이 필요한 이유
•
팀원끼리 코드를 공유하기 때문에 일관성있는 코드를 작성하면 서로 이해하기 쉽다.
•
나중에 입사 지원 시 프로젝트를 하며 코드 컨벤션을 만들어 진행했다고 하면 협업 면에서 유리하게 작용할 수 있다.
