6/9 개발 협업을 위한 약속

• auth

/public
- favicon
- data.json
/src
- assets
	- images
- components
	- atoms
		- /Button
			- Button.jsx
			- styles.jsx
	- molecules
	- organisms
	- templates
- pages
	- Home
		- Home.jsx
		- style.jsx
	- Event
		- Event.jsx
		- style.jsx
	- Search
		- Search.jsx
		- style.jsx
- stores
- hooks
- providers
- router
- utils

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

• 스타일 임포트

• 임포트 순서
1. react 관련 import
2. 라이브러리 관련 import
3. 모듈 or 커스텀 Hook 관련 import
4. 스타일 import
 

// react 관련
import React, { useEffect, useState, useContext, useCallback } from 'react';
// 라이브러리
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import dayjs from 'dayjs';
// 모듈
import { FloatingButton, AgendaBox } from 'components';
import { IconPlus } from 'assets';
import { RootStackParamList, IScheduleProps } from 'types';
import {
  connectDB,
  createScheduleTable,
  deleteScheduleItem,
  getDateAndDayOfWeek,
  getScheduleItems,
} from 'db';
import { useNotification } from 'hooks';
import { ONE_DAY, parseToSlash } from 'utils';
import { PopContext } from 'context';
// 스타일
import * as S from './style';

• 임포트시 절대 경로

• 익스포트

components
	- index.js
	- Button
		- Button.jsx

// components/index.js
export {Component} from '/...'

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


export unction Component() {
  const onClick = (e) => console.log(e);
	return(
		<S.Button onClick={onClick}>button</S.Button>
	)
}

// style.jsx
import {styled} from 'emotion'

export const Button = styled.button`
	
`

Effective Atomic Design

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

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

📦src
 ┣ 📂assets
 ┣ 📂components
 ┃ ┣ 📂Event
 ┃ ┃ ┣ 📜Event.jsx
 ┃ ┃ ┗ 📜style.jsx
 ┃ ┣ 📂Home
 ┃ ┃ ┣ 📜Home.jsx
 ┃ ┃ ┗ 📜style.jsx
 ┃ ┗ 📜index.js
 ┣ 📂providers
 ┃ ┗ 📜AppProvider.jsx
 ┣ 📂router
 ┃ ┗ 📜Router.jsx
 ┣ 📂styles
 ┃ ┣ 📜GlobalStyle.jsx
 ┃ ┣ 📜index.js
 ┃ ┗ 📜theme.js
 ┣ 📜App.jsx
 ┣ 📜index.css
 ┗ 📜index.jsx

• 한국어 문장

• 이모티콘 ㄴㄴ

feat : 새로운 기능에 대한 커밋
fix : 버그 수정에 대한 커밋
build : 빌드 관련 파일 수정에 대한 커밋
chore : 그 외 자잘한 수정에 대한 커밋(+라이브러리, .gitignore 수정)
ci : CI관련 설정 수정에 대한 커밋(배포 관련)
docs : 문서 수정에 대한 커밋
style : 코드 스타일 혹은 포맷 등에 관한 커밋(주석제거, 코드에 변화가 없을 때)
refactor : 코드 리팩토링에 대한 커밋
test : 테스트 코드 수정에 대한 커밋

• main
• develop
• feature