Code Convention

CSS
Code style
Naming
Image import
Secret key

CSS

• CSS 파일은 동일 폴더내에 컴포넌트명.css.ts 로 관리합니다.
  

// app.css.ts
import { style } from "@vanilla-extract/css";

export const container = style({
  backgroundColor: "lightblue",
});

// App.tsx
import { container } from "./App.css.ts";
function App() {
  return (
    <div>
      <h1 className={container}>Hello, KNU Festival!</h1>
    </div>
  );
}
export default App;

Code style

• prettier에서 자동으로 교정
• 코드 작성후 commit 및 PR 시에 npm run check 명령어 실행하여 확인
• 만약 prettier에서 오류가 뜬다면 npm run prettier로 코드 스타일 변경

Naming

함수명

• jsx를 반환하는 함수 PascalCase
• 그렇지 않다면 camelCase

// PascalCase
function Home() {
  return <div>Hello</div>;
}

// camelCase
function sum() {
  return 1+2;
}

변수명

• camelCase로 작성
• 변하지 않는 값은 대문자로 작성

// camelCase
const person: Person = { name: "Kim", age: 20 };

const PIE = 3.14;

타입, 클래스

• PascalCase로 작성

type Person = { name: string; age: number };

확장자명

• 코드에서 jsx를 포함하고 있으면 파일명 PascalCase.tsx
• 그렇지 않다면 camelCase.ts

// Home.tsx
function Home() {
  return <div>Hello</div>;
}

// sum.ts
function sum() {
  return 1+2;
}

Image import

• 이미지 경로 작성시 절대로 string 및 require 사용 금지
• import 이용

import image1 from "../assets/image.png";

const App = () => {
  // 좋은 예
  return <img src={image1} />

  // 나쁜 예 1: <img src="../assets/image.png" />
  // 나쁜 예 2: <img src=require("../assets/image.png")>
}

Secret key

• .env 에서 key 관리
• 절대로 git에 올리지 말것