Contributing - lekakid/ArcaRefresher Wiki

기여를 처음 시작하시는 분은 개발 환경 문서를 참고바랍니다.

프로젝트 폴더 구조

image

  • component: feature, menu 이하 여러곳에서 공통으로 사용되는 컴포넌트 모음
  • core: 리프레셔 구현에 필요한 핵심 파일 모음
  • feature: 리프레셔 각종 기능 모듈 모음
  • func: 다양한 곳에서 활용되는 함수 모음
  • menu: 기능 모듈이 제공하는 설정이나 메뉴 등을 구현
  • util: 기능 모듈에서 공통적으로 사용하는 훅 등의 구현에 사용되는 모듈 모음

index.jsx를 기준으로 번들링을 시작합니다.
App.jsx 부터 본격적인 리액트 컴포넌트 구조로 들어갑니다.

컴포넌트 렌더링 구조

image

유틸 컴포넌트 > 기능 컴포넌트 > 각종 메뉴 컴포넌트 순으로 렌더링합니다.
기능 컴포넌트는 feature/index 에서 구조를 확인하실 수 있습니다.
메뉴 컴포넌트는 menu/index 에서 구조를 확인하실 수 있습니다.

새로운 기능 추가

기존 기능을 개선하거나 수정하는 작업이 아닌 완전히 새로운 기능을 추가한다면 다음의 절차를 따릅니다.

기능 구현

  1. feature/_Template 폴더를 복사하여 원하는 기능의 이름으로 변경합니다.
    image

  2. Feature.jsx 에서 원하는 기능을 구현합니다.
    파일의 이름은 변경하지 않아도 상관없지만 함수의 이름은 반드시 변경합니다.

설정 추가

  1. slice.jsx 에서 defaultConfigState에 원하는 설정 기본값을 추가합니다.
const defaultConfigState = {
  myNewConfig: 'hello!',
};
  1. 하단의 createSlice({ reducers })에 이 설정값을 조작하고 저장하는 리듀서를 추가합니다.
export const slice = createSlice({
  name: Info.ID,
  initialState,
  reducers: {
    // 아래와 같이 추가합니다.
    setNewConfig(state, action) {
      state.config.myNewConfig = action.payload;
      setValue(Info.ID, state.config);
    },
  },
});
  1. slice.actions를 내보내는 코드에 추가한 리듀서와 동일한 이름을 작성합니다.
    이 때, 실제로 내보내는 것은 액션 오브젝트를 반환하는 함수이며 자세한 사항은 Redux 문서를 참고바랍니다.
export const { setNewConfig } = slice.actions;
  1. ConfigMenu/View 에서 내보낸 액션을 사용한 적절한 조작 메뉴 컴포넌트를 작성합니다.
import { setNewConfig } from '../slice';

const View = React.forwardRef((_props, ref) => {
  const {
    config: { myNewConfig },
  } = useSelector((state) => state[Info.ID]);
  const dispatch = useDispatch();

  const handleClick = useCallback(
    () => {
      dispatch(myNewConfig('bye!'));
    },
    [dispatch],
  );

  return (
    <Box ref={ref}>
      <Typography variant="subtitle1">{Info.name}</Typography>
      <Paper>
        <List>
          <ListItem button onClick={handleClick}>
            <ListItemText primary="이것을 클릭하면 state.myNewConfig 값이 bye!가 됩니다" />
          </ListItem>
        </List>
      </Paper>
    </Box>
  );
});

오른쪽 클릭 메뉴 구현

작성 중...

⚠️ **GitHub.com Fallback** ⚠️