팀 규칙

기술 스택

• 컴포넌트 - React(CRA)

• 스타일링 - Styled Compenent

• 상태관리 - Redux tookit

• 코드 컨벤션: EsLint, Prettier

• 커뮤니케이션: Notion, Slack

• 디자인: Figma

폴더 구조

public
	- index.html
	- favicon
src
	- assets
		- images
	- components
		- atoms
			- Button
				- Button.jsx
				- styles.jsx
		- molecules
		- organisms
		- templates
	- pages
		- Home
			- Home.jsx
			- style.jsx
	- stores
	- hooks
	- providers
	- router
	- utils
	- App.jsx
	- index.jsx

GitHub - alan2207/bulletproof-react: 🛡️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications.

A simple, scalable, and powerful architecture for building production ready React applications. React is a great tool for building frontend applications. It has a very diverse ecosystem with hundreds of great libraries for literally anything you might need. However, it can be overwhelming to be forced to make so many choices.

https://github.com/alan2207/bulletproof-react

컴포넌트 구조

Effective Atomic Design

소프트웨어 개발 중 설계에서 가장 중요한 것은 모듈화와 추상화 두 가지라고 할 수 있다. 웹 프론트엔드 업계는 이미 React, Vue.js, Angular와 같은 오픈소스 프레임워크를 통해 끝을 달리는 추상화와 모듈화를 보여주고 있다. 특히 모듈화 측면에서 세 프레임워크는 컴포넌트 인터페이스를 매우 쉽게 제공하기 때문에 프레임워크 사용자는 효율적인 재사용이 가능하고 캡슐화된 컴포넌트를 아주 간단하게 만들 수 있다.

https://kciter.so/posts/effective-atomic-design

코드 스타일

컴포넌트

• 컴포넌트 → 함수 선언문
함수 → 함수 표현식

function Btn() {
	const onClick = () => {
		// ...	
	}

	return (
		// ...
	)
}

• 컴포넌트 폴더 & 파일 이름

/Btn
  - Btn.jsx
	- style.jsx

• 스타일링

import * as S from './style.jsx'

function Btn() {
	return (
		<S.Button>click me!</S.Button>
	)
}

import styled from 'styled-components'

export const Button = styled.button``

• 익스포트 & 임포트

/src
	/components
		index.js
		/atoms
			/Btn
				Btn.jsx
				style.jsx

1) 컴포넌트 export

// components/atoms/Btn/Btn.jsx

export function Btn() {
	// ...
}

2) index.js에서 모아서 export

// components/index.js

// atoms
export { Btn } from 'components/atoms/Btn/Btn'
// ...

// molecules
// ...

// organisms
// ...

3) index.js에서 절대경로 import

import { Btn } from 'components'

export function Menu() {
	return(
		<Btn>click me!</Btn>
	)
}

• 임포트 순서
1. 리액트
2. 라이브러리
3. 모듈
4. 스타일

// 리액트
import { useState, useEffect, ... } from 'react'
import Proptypes from 'prop-types'

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

// 모듈
// components, hooks, stores, utils, assets, ...
import { Btn } from 'components'

// 스타일
import * as S from './style';

기타

• 코드 스타일과 포맷은 eslint(airbnb)와 prettier로 관리

깃과 깃허브

커밋 메시지

[커밋 타입]

feat: 새로운 기능 추가
fix: 버그 수정
style: 코드 스타일 혹은 포맷 수정
refactor: 코드 리팩토링
docs: 문서 작성 및 수정
test: 테스트 관련
build: 빌드 관련
deploy: 배포 관련
chore: 그 외

• 커밋 메시지는 한국어로 작성합니다.

• 커밋 메시지에 이모티콘을 사용하지 않습니다.

브랜치 전략

• main: 프로덕트 배포

• develop: 개발 통합

• feature: 단위 기능 개발
• feature/이름(이니셜)/기능 e.g. featrue/GY/post

• hotfix: 긴급 사항
• hotfix/이름(이니셜)/이슈 e.g. hotfix/GY/eslint

코드 리뷰

• 팀원은 PR이후 24시간 안에 리뷰합니다.

• 24시간이 지난 후 PR한 사람이 직접 머지합니다.