DOCSEARCHbyAlgolia
Submit Docs

Frontend Rules Documentation

website·Indexed 31 days ago

https://frontend-rules.thebbodek.com

A set of frontend development guidelines and coding conventions covering Semantic Markup, TypeScript type separation, React JSX props, CSS units, Storybook file naming, and general JavaScript syntax and variable declarations.

Tokens
7.1K
Snippets
52
Records
59
Agent score
50%

What's inside Frontend Rules

  1. Name Storybook files using the project convention

    Storybook files must follow the {name}.stories.tsx naming format. The naming should align with the target of the story (e.g., components, utilities, or effects).
    // For a component
Component.stories.tsx

// For a utility
util.stories.tsx

// For an effect/hook
useNameEffect.stories.tsx

  2. Naming custom useEffect hooks

    Custom hooks that wrap useEffect should follow the pattern use + {name} + Effect.
    const useFooEffect = () => {
  useEffect(() => {
    // ...
  }, []);
};

  3. Naming API functions and React Query hooks

    API functions should be prefixed based on the HTTP method. React Query hooks should use suffixes based on the hook type.
    // API Function Prefixes
const getTargets = async () => {};    // GET
const createTarget = async () => {};   // POST
const updateTarget = async () => {};    // PATCH/PUT
const deleteTarget = async () => {};   // DELETE

// React Query Hook Suffixes
const useTargetsQuery = () => {};       // useQuery
const useUpdateTargetMutation = () => {}; // useMutation

  4. Naming conventions for Types, Interfaces, Classes, and Components

    Types, Interfaces, Classes, and React Components must use Pascal Case.
    // Type
type FooType = { ... };

// Interface
interface FooInterface { ... }

// Class
class Foo { ... }

// Component
const Foo = () => { ... };

  6. Using Korean naming for complex terms

    When a term is difficult to translate into English or when forced English translation leads to poor readability, use Korean naming to ensure the purpose of the variable is immediately clear.

  7. Handle media autoplay for accessibility

    Avoid autoplaying video or audio, as it can overlap with screen reader audio and make page content difficult to perceive. If autoplay is unavoidable, implement one of the following:

    • Stop the media within 3 seconds.
    • Stop the media when the ESC key is pressed.
    • Place the stop control at the top of the source/DOM so it is the first reachable element.

  8. Prevent Props Drilling in React

    Limit prop passing to a maximum of 2 levels between components to avoid tight coupling and maintainability issues. If data needs to reach deeper components, use one of the following strategies:

    1. Component Composition: Pass the child component as a prop or via children so the data can be provided directly at the top level.
    2. Context API: Use for global or deep state, but be cautious as it can cause unnecessary re-rendering of all consumers when the value changes.
    // Composition Pattern Example
const Foo = () => {
  const [userName, setUserName] = useState('bar');
  return (
    <ParentComponent>
      <ChildComponent2 />
      <ChildComponent3 userName={userName} />
    </ParentComponent>
  );
};

const ParentComponent = ({ children }) => (
  <div>
    ParentComponent
    {children}
  </div>
);

  9. Follow HTML markup syntax standards

    To prevent parsing errors and ensure accessibility, adhere to the following HTML syntax rules:

    • Ensure all tags have clear opening and closing tags (except for self-closing tags).
    • Maintain correct nesting of tags (do not overlap tags).
    • Do not use duplicate attributes on a single element.
    • Ensure id values are unique across the page.
    <!-- Good: Correct nesting and closing -->
<a href='...'><span
  이동
</span></a>

<!-- Bad: Overlapping tags -->
<a href='...'><span
  이동
</a></span>

<!-- Good: Unique IDs -->
<div id='id-1'>...</div>
<div id='id-2'>...</div>

  10. Avoid using the any type

    Do not use the any type explicitly. If a type is unknown and cannot be specifically defined, use unknown instead. This aligns with the @typescript-eslint/no-explicit-any rule.

  11. Use specific suffixes for constant mappings

    Use the following suffixes for constants based on their purpose:

    • MAPPER: For API response key mappings.
    • COLUMNS: For table column mappings.
    • COLUMNS_LABELS: For table header label mappings.
    • STYLES: For style-related mappings.
    // API Response Key Mapping
export const KINDERGARTEN_MAPPER = {
  NAME: 'name',
  AGE: 'age',
};

// Table Column Mapping
export const KINDERGARTEN_TABLE_DATE_COLUMNS = [
  KINDERGARTEN_MAPPER.CREATED_AT,
];

// Table Header Label Mapping
export const KINDERGARTEN_COLUMNS_LABELS = {
  [KINDERGARTEN_MAPPER.NAME]: '기관명',
};

// Style Mapping
export const KINDERGARTEN_COLUMNS_STYLES = 'bg-gray-03 py-3';

  12. Define functions using arrow functions

    Use arrow functions instead of function declarations or function expressions.
    // Bad
function foo() {
  return; 
}

// Bad
const foo = function () {
  return; 
};

// Good
const foo = () => {
  return; 
};