코드 컨벤션

1. emotion

• 자동 정렬
현업에서 사용중인 CSS 작성 순서와 쉽게 자동 정렬하기(VScode 확장프로그램)
안녕하세요. 마크업 개발자 윤시대입니다. 현업에서 사용 중인 CSS 작성 순서를 먼저 공유합니다. * 네이버 코딩 컨벤션에 나오는 순서를 기반으로 작업합니다. 널리 네이버 코딩 컨벤션: https://nuli.navercorp.com/tool/codingCon (그동안 몰랐는데 지금 보니 리스트의 다른 개발 도구도 굉장히 좋아보이네요 🙂) PostCSS의 기능을 알기 전엔 모니터 아래에 포스트잇으로 위 내용을 적어두고 css 작성할 때마다 순서를 신경 써서 작업했던 게 생각납니다.

https://yoonsidae.tistory.com/82?category=703406

• 모질라에서 제안한 CSS 속성 기술 순서 따르기
CSS 선언순서
모질라 파이어폭스 CSS 선언 순서 1. display 2. list-style 3. position 4. float 5. clear 6. width/height 7. padding/margin 8. border/background 9. color/font 10. text-decoration 11. taxt-align/vertic..
https://jsunnylab.tistory.com/32

• 코드 하단에 작성

• 컴포넌트 안에 같이 작성하기

• px 단위 대신 rem 단위 사용 (10px === 1rem)

• 스타일 컴포넌트라는 것을 알릴 네이밍
• Styled[컴포넌트명]

• 최상단 태그 이름은  Styled[컴포넌트명]

function Home() {
  return (
    <StyledHome>
    ...
    </StyledHome>
  );
}

• (자율) container와 wrapper 구분해서 사용하기
container는 주로 여러 개의 요소를 감싸는 div이고,
wrapper는 단일 요소의 레이아웃을 위한 div를 말한다.
HTML/CSS 네이밍 시 container와 wrapper의 차이
참고 : https://stackoverflow.com/questions/4059163/css-language-speak-container-vs-wrapper 모달 컴포넌트를 만들다가 문득 container와 wrapper의 차이가 궁금해졌다. 퍼블리싱할 때 별 생각 없이 혼용해서 사용하던 단어였는데 규칙이나 관례가 있는지 찾아봤는데 stackoverflow의 한 답변이 가장 잘 정리되어 공유한다. 둘다 레이아웃을 위한 div지만 container는 주로 여러 개의 요소를 감싸는 div 이고, wrapper는 단일 요소의 레이아웃을 위한 div 를 말한다.

https://ryusm.tistory.com/134

• (자율) 가독성과 추후 확장을 고려하여 css 속성 간 개행을 생활화

• (자율) 네이밍 참고
• div : '컴포넌트명'Box
• section : '컴포넌트명'Section
• ul : '컴포넌트명'List
• li : '컴포넌트명'Item
• p : '컴포넌트명'Paragraph
• span : '컴포넌트명'Span

2. 폴더명

• components 폴더 아래에서 소문자 폴더명 사용
• (base, template, domain) → 그 밑 컴포넌트는 대문자로 시작
• 폴더 안에 index.js가 존재하는 컴포넌트 같은 경우는 폴더 자체가 컴포넌트라고 취급하여 대문자로 시작

3. Event handler

Event Handler Naming in React

Naming's a hard problem, right? Well, coming up with the names can be hard. After that, it's just a simple matter of typing. Here are a few of my naming conventions for React or even handling in general. When defining the prop names, I usually prefix with on*, as in onClick.

https://jaketrent.com/post/naming-event-handlers-react/

• Function Names
on~~ = {handle~~}

<MyComponent onClick={this.handleClick} />

• 좀 더 복잡한 네이밍
on특징~~ = {handle특징~~}

<MyComponent
  onAlertClick={this.handleAlertClick}
  onFormSubmit={this.handleFormSubmit}
/>

• 상황에 맞게 2가지 방식 혼용

4. 변수

• Camel case 사용 (ex. camelCase)

• 변수는 var 사용 금지

• 예외 : 상수는 무조건 대문자, 언더바 조합 → EXAMPLE_NAME

• 배열과 관련된 변수명은 List / s

• boolean 타입의 변수는 가급적 is로 시작

• 변수 네이밍 아래 참고

buttonSearch
searchButton ✅
btnSearch
searchBtn

5. 함수

• Camel case 사용 (ex. camelCase)

• 함수명은 동사로 시작

• 화살표 함수 사용

const 함수명 = () => {}

 

6. 컴포넌트

• Pascal case 사용 (ex. PascalCase)

• 아래 형식대로 사용

interface 컴포넌트명Props

function 컴포넌트명(props: 컴포넌트명Props) {
	const { 변수1, 변수2, 변수3 } = props;
	return (
	)
}

export default 컴포넌트명;

// styled-components

7. 이미지

// 아이콘 예시
export { default as icSample } from './icons/ic_sample.svg';
export { ReactComponent as IcSetting } from './ic_setting.svg';

// 이미지 예시
export { default as imgSample } from './images/img_sample.svg';
export { ReactComponent as ImgNewLink } from './img_new_link.svg';

8. 주석