Front-end Guide

Commit Convention

Code Convention

Naming

Components Folder & Naming

┣ 📂components
┃ index.ts 
┣ 📂HomePage
┃ ┣ 📂Button(component)
┃ ┃ ┣ Button.tsx
┃ ┃ ┣ Button.style.ts // Style 파일은 * 대신 named로 가져올 것
┃ ┃ ┗ Button.stories.js

Components

function Button() {
	return (
		// ...
	)
}

Styling

// Button.style.ts
import styled from '@emotion/styled'
export const CustomButton = styled.button``

// Button.tsx
import { CustomButton } from './Button.style'
export function Button() {
	return (
		<CustomButton >click me!</CustomButton>
	)
}

Functions

const onClick = () => { }

Import Order

1. 리액트

2. 라이브러리

3. 모듈

4. 스타일

// 리액트
import { useState, useEffect, ... } from 'react'

// 라이브러리
import { throttle, debounce, ... } from "lodash";

// 모듈
// components, hooks, store, utils, assets, interface..
import { Button } from 'components'

// 스타일
import { ButtonStyle } from './style';

API Usage

// axiosInstance.ts
import axios, { AxiosInstance } from 'axios';

const host = process.env.REACT_APP_API_HOST ?? 'localhost';
const port = process.env.REACT_APP_API_PORT ?? 3000;

const API_ENDPOINT = `${host}:${port}`;

const axiosInstance: AxiosInstance = axios.create({
  baseURL: API_ENDPOINT, // baseURL 미리세팅
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
  },
});

axiosInstance.interceptors.response.use(
  (response) => Promise.resolve(response),
  (error) => {
    console.error(error);
    return Promise.reject(error);
  },
);

export default axiosInstance;

// api/getPost.ts
export const getPost = async (postId) => {
  try {
    const result = await axiosInstance({
      method: 'GET',
      url: `/posts/${postId}`
    })

    return result.data;
  } catch (error) {
    throw new Error('Fetch Error')
  }
};

{
  "endOfLine": "auto",
  "printWidth": 80,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all"
}

- typescript/recommended
- react

Git Branch

Git-Flow

branch 최신화