Portfolio


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


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


// 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>
	)
}


const onClick = () => { }


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

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

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

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


// 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

type	description
feat	기능 추가
fix	버그 수정
refactor	리팩터링
style	css 디자인 관련 내용
docs	문서 작성 및 수정
test	테스트 관련
build	빌드 관련
deploy	배포 관련
chore	그 외 내용(패키지 추가, 파일명 변경 … )

Front-end Guide

Commit Convention

Code Convention

Naming

Components Folder & Naming

Components

Styling

Functions

Import Order

API Usage

Prettier

Lint

Git Branch

Git-Flow

branch 최신화