Skip to content

Web

Jump to bottom
PoLEE edited this page Jan 4, 2024 · 4 revisions

Easel Web

Easel에서 WEB에 관련된 내용을 담습니다.

Yellow Page

Contributor

이상민(Web)

poiu694

코딩 컨벤션

Naming Convention

  • 컴포넌트 이름 / 파일명은 PascalCase를 사용합니다.
// src/components/TestComponent.tsx

function TestComponent() {
  return ...
};
  • 함수, 변수 이름 / 파일명은 camelCase를 사용합니다.
// src/utils/helper~.ts

const helperFormat = () => {
  return ...
};
  • 상수는 SNAKE_CASE 를 대문자를 이용해 사용합니다.
// src/utils/constants.ts

export const VARIABLE = '~'
  • event Listener는 handleEvent ⇒ onEvent의 방식으로 주입합니다.
// src/components/TestComponent.tsx
// ver1. handleClick
function TestComponent() {
  return (
    <TestCompoenent
      onClickItem={handleClickItem}
    />
  );
};

// ver2. handleClick
function TestComponent() {
  return (
    <TestCompoenent
      onClickItem={(item) => handleClickItem(item)}
    />
  );
};

Component 정의 방식

  • component 를 정의할 때에는 function keyword를 이용해 선언합니다.
  • 맨 아래에 export default 형식으로 export 합니다.
// src/components/TestComponent.tsx

function TestComponent() {
  return ...
};

export default TestComponent;

절대 경로, 상대 경로

  • import시 절대경로를 주로 사용합니다.
  • 같은 디렉토리에 있는 경우 상대경로를 사용합니다.
  • 디렉토리 별 index.ts를 두어 배럴파일 형태로 export합니다.
// export ) src/utils/index.ts
export { default as getTestUtil } from "./getTestUtil";

// import ) src/.tsx
import { getTestUtil } from "@/utils";
import TestComponent from './TestComponent';

Import 할 때 타입과 함수

  • import시 타입은 default 방식으로 가져와서 문맥을 추론하기 좋게 만듭니다.
import React from 'react';

interface Props {
  onRemove: React.MouseEventHandler<HTMLButtonElement>;
}
  • import시 함수는 named 방식으로 가져와서 번들 사이즈를 줄입니다.
import { useState}  from 'react';

function Component() {
  const [count, setCount = useState(0);
}

제네릭 사용

  • type이 추론되더라도 제네릭을 사용합니다.
import { useState}  from 'react';

function Component() {
  const [count, setCount = useState<number>(0); // O
  const [count, setCount = useState(0); // X
}

디렉토리 구조

|- web
  |- src 
    |- components // 컴포넌트를 관리합니다.
      |- common // 공통으로 사용될 컴포넌트를 정의합니다. (atom)
      |- domain-name // 특정 페이지 등 도메인을 나눌 수 있으면 폴더로 구분합니다.
    |- pages // 페이지들을 관리합니다.
    |- utils // util 함수를 관리합니다.
    |- api // api 인스턴스를 관리합니다.
    |- hooks // 비즈니스 로직을 담은 hook을 관리합니다.
    |- types // 공통으로 사용되는 type을 관리합니다.
    |- constants // 사용되는 상수들을 관리합니다.
  |- public // 정적 asset을 관리합니다.

Type 관련

  • 타입에 i, I를 붙이지 않습니다. (prefix 금지)
  • 기본으로 interface 키워드를 사용하여 타입을 지정합니다.
interface TestType {
  id: number;
  ...
}
  • 타입의 조합이나 확장이 필요할 시에는 extends 를 최대한 사용합니다.
interface Props {
  id: number | undefined; // X
  id?: number; // O
}
  • 배열은 2차원 배열을 사용하지 않으면 string[]을 최대한 사용합니다.
Array<string> // X 
string[] // O

//예외
Array<string, string>

Code Linting

{
  "singleQuote": true,
  "semi": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "endOfLine": "lf",
  "bracketSpacing": true,
  "jsxSingleQuote": false
}
  • airbnb를 사용해 일관된 자바스크립트를 작성합니다.
// airbnb 기반
// https://github.com/airbnb/javascript

// 추가 규칙
rules: {
    'arrow-body-style': 'off', // component는 arrow function 형태로 정의한다.
    'import/extensions': 'off', // import시 확장자는 적지 않는다. 가독성과 간결함을 위해.
    'react/function-component-definition': [
      2,
      {
        namedComponents: 'arrow-function',
        unnamedComponents: 'arrow-function',
      },
    ], // 화살표 함수로 정의. named,unnamed 컴포넌트 모두 적용.
    'import/no-extraneous-dependencies': 'off', // 개발 의존성 및 일반 의존성 간 구분을 엄격하게 적용하지 않음. 프로젝트 요구에 유연하게 대응하기 위해.
    'react/react-in-jsx-scope': 'off', // React 17 이상에서는 JSX 사용 시 React 임포트가 필요 없음. 이를 반영하여 규칙을 비활성화.
    'import/prefer-default-export': 'off', // 1개의 named export를 할 수 있게 변경. 디렉토리로 컴포넌트를 구분하며 index.ts에는 한 개만 있을 가능성이 크기에
    'react/jsx-props-no-spreading': 'off', // spread 연산자를 사용할 수 있게 변경. props에서 주로 사용
    'react/require-default-props': 'off', // default props 대신 값이 없는 경우를 따로 처리할 수 있게 변경
    '@typescript-eslint/no-use-before-define': 'off', // 호이스팅 활용
    'react/no-unknown-property': ['error', { ignore: ['css'] }], // 공식문서에서 무시 명시 https://emotion.sh/docs/eslint-plugin-react
  },

테스트 코드 컨벤션

  • 테스트 코드에서 콜백함수는 arrow Function을 사용합니다.
  • 테스트 코드는 given, when, then 의 형태를 취합니다.
  • given: 테스트 하기 위해 기본적으로 세팅하는 값입니다.
  • when: 테스트를 하기 위한 조건을 지정합니다.
  • then: 테스트 하기 위한 행위가 우리가 예상하는대로 동작하는지 검증하는 행동/절차 입니다.
Clone this wiki locally