기술 스택

언어 typescript

컴포넌트 문서화 storybook

프로젝트 구성 Next.js

디자인 프레임워크 Mui

상태관리 Context API

기타 개발 편의성 Eslint, Prettier, Comment Anchor(vscode extension)

컨벤션

네이밍

• 컴포넌트 이름: 파스칼 케이스 (ComponentName)
• 타입 이름: 파스칼 케이스 (Props)
  • 배열 타입은 string[] 처럼 사용
• 상수 이름: 대문자와 언더바 (MAX_NUMBER)
• 변수 이름: 카멜케이스 (name, myName)
• style-component 이름: Wrapper 또는 Container
  • 첫 껍질만 Wrapper, 그 위부터는 Container
• boolean 타입으로 변환시 Boolean(state) 아니고 !!(state) 처럼 작성한다

컴포넌트 작성 예시

• 컴포넌트 작성은 retto님이 만든 vscode 확장 supergen 을 통해 만든것을 기본으로 한다

  • 추가로 컴포넌트 코드를 깔끔하게 하도록 1회성 hook 등 을 helper.ts 에 저장한다

// components/Test/index.ts
export { Test } from "./Test";

// components/Test/style.tsx
import styled from "@emotion/styled";

interface StyledTestProps {
  string: string;
}

export const StyledTest = styled.div<StyledTestProps>`
  background-color: ${({ string }) => (string ? "black" : "yellow")};
`;

// components/Test/Test.stories.tsx
import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import { Test } from ".";

export default {
  title: "components/Test",
  component: Test,
} as ComponentMeta<typeof Test>;

const Template: ComponentStory<typeof Test> = (args) => <Test {...args} />;

export const Default = Template.bind({});
Default.args = {};

// components/Test/Test.tsx
import * as S from "./style";

interface TestProps {
  string: string;
}

export const Test = ({ string }: TestProps) => {
  return <S.StyledTest string={string} />;
};

Eslint

• airbnb 룰을 기반으로 수정