프론트엔드 개발 컨벤션🔧

1️⃣ 네이밍 컨벤션

상수 표현

접기/펼치기

• 상수는 기본적으로 대문자 스네이크 케이스로 표현한다.

  • 원시 값

    const API_KEY = 'key';

  • 객체 값: key값을 대문자 스네이크 케이스로 표현한다.

    const WOOWA_COACH_NAME = {
    	BACK: 'pobi',
    	FRONT: 'poco'
    };

배열 / 객체

접기/펼치기

• 배열과 객체 모두 식별자는 복수형 -s 으로 표현한다.

  (list, arr, obj 같은 단어 사용하지 않도록 한다.) ****

  const nameArr = [도밥, 우코, 코난]; //🔴 
  
  const names = [도밥, 우코, 코난]; //🔵

Styled Components

접기/펼치기

• 분리된 파일에서 import 해서 사용할 때 S혹은 Styled를 붙이지 않는다.
• Styled Components는 Box Container Wrapper 등으로 표현한다.
  • 📌 적절한 사용은 추후 논의

컴포넌트 선언

• 함수 선언문으로 선언한다.

2️⃣ 프로그래밍 컨벤션

변수 선언 키워드

• let의 경우 최대한 지양하고, 사용한 경우 팀원에게 이유를 설명한다.

문자열

접기/펼치기

const str = '무궁화 꽃이 피었습니다.';
const varStr = `${flower}이 피었습니다.`;

const manyLineStr = `무궁화 꽃이 피었습니다.
${flower}이 피었습니다.
무궁화 꽃이 피었습니다.
무궁화 꽃이 피었습니다.
`;

파일 분리 - ex) Styled Components

• 스타일 컴포넌트는 파일로 개별 분리한다 ex) Component.styled.tsx

절대경로 (src만 @로)

[vscode에서 alias설정한 경로를 클릭으로 이동](https://fe-j.tistory.com/202)

@/components/

3️⃣ 타입스크립트

---

Type vs Interface

**객체는 Interface로 사용한다.**
**나머지는 type**

Type Import

Type을 import할 때 type을 붙인다.

import type { SomeThing } from "./some-module.js";

[Documentation - TypeScript 3.8](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html)

Props Type

props type의 이름은 {컴포넌트명}props 로 짓는다.

함수 반환 타입

추론되지 않는 타입의 경우에만 명시적으로 반환타입을 지정한다.

[아이템 19 - 추론 가능한 타입을 사용해 장황한 코드 방지하기](https://www.notion.so/19-73a9a55b3edb4e0fb2546dc62626fb43?pvs=21)

4️⃣ 리액트

커스텀 훅

• 커스텀 훅은 객체로 반환한다.

  //useInput.ts 
  const useInput = () => {
  	const [input, setInputState] = useState('');
  	
  	const setInput = (input: string) => {
  		//some...
  		return setInputState(input);
  	}
  
  	return { input, setInput };
  }
  
  //사용처
  const { setInput } = useInput();

export

• 컴포넌트는 export default 로 모듈을 내보낸다. (vs export const Component = () ⇒ { )

pritter (v2.8.8)

접기/펼치기

• 기본값으로 설정한 것들이 문제가 되는 경우 기본값도 명시해준다.

{
  "printWidth": 100,
  "singleQuote": true,
  "endOfLine": "auto"
}

• Parser 확인 필요 📌

기본값인 설정

{
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": "false",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "trailingComma": "es5",
}