Skip to content

Code Convention

Jump to bottom
Kyeong Hoon Chu edited this page Jun 26, 2022 · 1 revision

들여쓰기

HTML / CSS / JS 모두 들여쓰기는 4**칸(프리티어)**입니다.

HTML

클래스명

[기능-용도] 

ex)
서치용 헤더 > .header-search
sns 리스트 > .list-sns
랭귀지선택 버튼 > .btn-lang

CSS

CSS 속성 순서

1. display
  1.1 justify-content
  1.2 align-items
  1.3 기타 flex, grid 관련 속성들...
2. overflow
3. float
4. position
  4.1 top / bottom / left / right
  4.2 z-index
  4.3 transform
5. width / height
6. padding / margin
7. border
8. background
9. color / font
10. animation
11. 기타

따옴표

  • 작은 따옴표 사용
.container {
  color: 'red';
}
  • url() 안에 경로는 따옴표 사용하지 않음
@import url(https://www.google.com/css/maia.css);
  • @charset "UTF-8"과 같은 경우에만 큰따옴표 사용
@charset "UTF-8"

JS

  • ES6+ 문법 사용
  • var 금지
  • 세미콜론 필수
  • 작은 따옴표 사용

변수명

  • 일반적인 변수, 함수: camelCase 
let myVar = 1;

const myArr = [1, 2, 3];

function myFunction() {

}
  • 상수: UPPER_SNAKE_CASE 
const MAX_NUM = 10;
  • 생성자 함수, 클래스: PascalCase 
function MyFunction(title) {
  
}

class MyClass {

}

React

// MainPage/index.jsx
const MainPage = () => {
	return (
    	<MainPageLayout>
      		<header className="header">
      			<h2 className="header__title">메인 페이지</h2>
      			<nav className="nav">
      				<ul claName="nav__list">
      					// 상태값을 가지는 태그는 스타일 컴포넌트로 분리
      					<NavItem active>홈</NavItem>
            			<NavItem>메뉴1</NavItem>
            			<NavItem>메뉴2</NavItem>
      				</ul>
      			</nav>
      		</header>
      		<div className="content">
      			<SlideContent className="content__list">
      				<li className="content__item">1</li>
      				<li className="content__item">2</li>
      				<li className="content__item">3</li>
      			</SlideContent>
      		</div>
      		<footer className="footer">
      			하단 내용
      		</footer>
      	</MainPageLayout>
    )
}

// MainPage/styles.js
export const NavItem = styled.li`
	color: ${({active}) => active ? 'blue' : '#fff'};
`;
export const MainPageLayout = styled.div`
	.header {
		.header__title {}

		.nav {
			.nav__list {}
		}

		.content {}

		.footer {}
	}
`;

Styled Components : Naming Convention

1) 최상위 부모

  • '컴포넌트명'Layout 이란 이름으로 생성

2) 최상위 부모의 자식 (최상위 부모의 바로 하위 요소) (flex 사용시)

  • '컴포넌트명'Row or '컴포넌트명'Col 이란 이름으로 생성 (Box, Section 금지)
  • Row는 가로, Col은 세로!
    • 둘 다 실제 태그는 div여도, css로 flex-direction등을 변경해서 가로 or 세로를 변경해주면?
    • flex-direction이 row 라면 Row, column 이라면 Col
  • 최상위 부모가 대분류의 느낌이라면, 이 요소는 소분류의 느낌

3) 나머지 요소들

  • 네이밍 예시 (예시일뿐! 특정 태그의 의미와 부합된다면 됨!)
    • div 태그: '컴포넌트명'Box (Wrapper 대신 Box 라는 이름을 사용해주세요!)
    • section 태그: '컴포넌트명'Section
    • ul 태그: '컴포넌트명'List
    • li 태그: '컴포넌트명'Item
    • p 태그: '컴포넌트명'Paragraph
    • span 태그: '컴포넌트명'Span
  • Styled~~ 이러한 형식으로 앞에 Styled가 들어가는 것은 NO!

4**)** 참고

  • 예시 html
<div> <!-- 1. Layout -->

    <div> <!-- 2. Row / Col (optional) -->
        <div> <!-- 3. Box -->
          <ul> <!-- 3. List  -->
              <li> <!-- 3. Item  -->
                  <span>Text</span> <!-- 3. Text  -->
              </li>
          </ul>
        </div>
    </div>

    <div> <!-- 2. Row / Col (optional) -->
        <div> <!-- 3. Box -->
          <ul> <!-- 3. List  -->
              <li> <!-- 3. Item  -->
                  <span>Text</span> <!-- 3. Text  -->
              </li>
          </ul>
        </div>
    </div>

</div>

  • 예시 이미지

    https://user-images.githubusercontent.com/33610315/133806476-1e36da26-a158-4645-b2dc-b365e95074bf.png

파일명

  • HTML: kebab-case
  • CSS: kebab-case
  • JS: camelCase
  • React
    • component: PascalCase
    • style: camelCase

커밋

💡 커밋은 논리적으로 구분이 되고, 일관성이 유지되는 단위로 최대한 작게 쪼개서 되어야합니다.

수정하기 전에 git pull 먼저 한 다음에 수정해주세요.

**git add . 하지말고 수정한 파일 add 해주세요!!**

풀리퀘 한 다음 코멘트 3명 달리는 거 확인하신 후, 각자 머지 진행해주세요.

  • Feat : 새로운 기능 추가
  • Fix : 버그 수정
  • Docs : 문서 수정
  • Style : 스타일 추가 및 수정
  • Edit : 주석, 공백, 세미콜론 등 코드 미세 수정
  • Refactor : 코드 리팩토링
  • Perf : 성능 개선
  • Test : 테스트 추가
  • Chore : (코드의 수정 없이) 설정을 변경, 빌드 과정 또는 보조 기능(문서 생성기능 등) 수정

참쉽조잉

🎨회의록
📌규칙
Clone this wiki locally