[FrontEnd] 프론트 시작전 폴더 구조 설계

대주제 : 프론트 부분을 시작하기 전에, 미리 폴더 설계를 마치고, 시작하고 싶다.

소주제 : 각각의 경우에 대한 설계를 하고 싶다.

page 에 대한 설계

src/

page 
    - Login
        - index.js
        - title.js
        - LoginMainBody
            - index.js
            - LoginMainForm.js
            - LoginMainTitle.js

    - Tool
        - ToolHeader
            - index.js
            - profile.js
            - sidebar.js
      - api
        - client.js
        - user.js

        - ToolMiddle
            - index.js
            - ToolSidebar
                - index.js
                - item.js
            - ToolMain
                - index.js
                - RunDemo
                    - index.js
                    - Dropzone.js
                    - ChoiceMode.js
                    - Output
                        - LineTitle
                        - LineCheckResult
                        - LineFixData
                        - LineItem
                    - api
                        - client.js
                        - inference.js

                - DataCollect 
                    - index.js
                    - ChoiceDataset.js
                    - Output 
                        - LineTitle.js
                        - LineImageInfo.js
                        - LineItem.js
                    - SaveDataset.js
                    - api
                        - client.js
                        - dataset.js
                        - user_fix_image.js

                - ModelVersion
                    - index.js
                    - Output
                        - LineTitleHeader
                        - LineTitle
                        - LineUsingModelVersion
                        - LineAllModelVersion
                        - LineItem
                    - api
                        - client.js
                        - model_version.js

ActionTypes 구상해보기

React 는 Redux-store 통해서 값들을 저장할 수 있는 데. 이를 어떤식으로 구조를 잡고, 어떠한, action 이 필요한지 정의하고 싶어서 이를 만들게 되었습니다.

user
```
const initialState = {
  pk: 0,
  email: "",
  profile_image: "",
  access_token: ""
}
```
- SET_USER_INFO
login 할 때와 cookie 를 통한 유저정보 들고 올 때 사용예정
Tool Choice
```
const initialState = {
  mode: "RunDemo"
}
```
- SET_TOOL_MODE
RunDemo, DataCollect, ModelVersion 중에 하나 선택하기
RunDemo
```
const initialState = {
  mode: "CheckResult",
  file_list: [],
  fix_file_list: [],
  is_mode_change: false, 
  is_file_list_change: false, 
  is_fix_file_list_change: false, 
}
```
- SET_RUN_DEMO_MODE
CheckResult, FixData 중에 하나 선택한다.

is_mode_change 를 true 로 변경한다. (나머지는 false)
- SET_RUN_DEMO_FILE_LIST
RunDemo - CheckResult, DropZone 에 올린 파일들을 저장하기 위한 형태이다.

매번 DropZone 에 새로운 파일들을 올릴때 마다, 이부분은 Reset 되고, 새로 추가된다.

is_file_list_change true 로 변경한다. (나머지는 false)
- SET_RUN_DEMO_CONVERT_FILE_IN_FILE_LIST_TO_FIX_FILE_LIST
FILE_LIST 에 있던 한개의 FILE 을 선택해서, FIX_FILE_LIST 에 추가한다.

is_fix_file_list_change true 로 변경한다. (나머지는 false)
ModelVersion 과 DatasetInfo

~~이 두 부분은 굳이 redux-store 를 통해서, 저장해야할 필요가 없을 것이라 판단되어, 작성하지 않았습니다.~~

그때에는 굳이 저장할 필요가 없을 것이라 생각하여 굳이 고려를 해주지는 않았으나, 생각해보니, 있으면 좋았습니다.

기본 베이스는 비슷하나, 하다보니, 좀 더 효율적인 방법에 대해서 고려하게 되었고, 아래에 바로 정리하였습니다.

좀 더 효율적인 방법에 대해서, 고려하면서 수정하게된 구조 및 완성본 구조

우선 위에서, 구현해놓은 것을 기반으로 생각했을 때, 큰 구조가 변하지 않아서 되게 편하다는 생각을 했습니다.

하지만, 자세한 파일이름의 경우 달라지면, 피곤하니 정리하려고 합니다.

reducer 또한, 조금 변경이 되어서, 정리하려고 합니다.

page 에 대한 설계

css 는 해당 Component 가 포함된 (index.js 에서 정의된 경우), index.css 를 정의를 하여서 구현을 해두었습니다.

src/
    - index.js 
    - App.js

    pages/
        - Login/
            - index.js
            - LoginHeader.js
            - LoginMain/
                - API/ (해당 Component 에서 사용할 api 들을 정의하는 용도)
                    - index.js 
                    - client.js 
                - index.js
                - LoginMainTitle.js
                - LoginMainForm.js

        - Tool
            - API/
                - index.js
                - client.js
            - index.js 

            - ToolHeader/
                - index.js

            - ToolModdle/
                - index.js
                - ToolSidebar/
                    - index.js 
                    - ToolSidebarItem.js
                - ToolMain/
                    - index.js 
                    - ToolMainTitle.js 
                    - RunDemo/
                        - API/
                            - index.js
                            - client.js
                        - index.js
                        - DropZone.js 
                        - ChoiceMode.js
                        - CheckResult.js
                        - FixData.js
                        - Line (Output 보다는 결과물들이 쌓이는 느낌이고, choice 를 통해서, 결과가 달라질 수 있습니다. 그렇기에 Line 으로 Naming 을 하였습니다.)
                            - LineTitle.js 
                            - LineBody.js

                    - DataCollect/
                        - API/
                            - index.js
                            - client.js
                        - index.js
                        - ChoiceDataset.js
                        - ImageInfoOutput.js
                        - SaveDataset.js 
                        - Line 
                            - LineTitle.js 
                            - LineBody.js

                    - ModelVersion/
                        - API/
                            - index.js
                            - client.js
                        - index.js
                        - ModelVersionAll.js
                        - ModelVersionUsing.js
                        - Line 
                            - LineTitle.js 
                            - LineBody.js

ActionType 및 reducer initailState 구상하기

user
```
const initialState = {
  pk: 0,
  email: "",
  profile_image: "",
  access_token: ""
}
```
- SET_USER_INFO
login 할 때와 cookie 를 통한 유저정보 들고 올 때 사용예정
sidebar
```
const initialState = {
  show_or_not: true
}
```
- SET_SIDEBAR_SHOW_OR_NOT
사이드바 show or not 기능 그대로입니다.
tool
```
const initialState = {
  mode: "RunDemo",  // RunDemo, DataCollect, ModelVersion
}
```
- SET_TOOL_MODE
RunDemo, DataCollect, ModelVersion 중에 하나를 선택해서, 선택할 수 있다.
run demo
```
const initialState = {
  mode: "CheckResult",  // CheckResult, FixData
  file_list: [],
  fix_file_list: [],
  is_mode_change: false,
  is_file_list_change: false,
  is_fix_file_list_change: false,
}
```
- SET_RUN_DEMO_MODE
CheckResult 와 FixData 중에 하나를 선택해서, 바꿀 수 있다.
- SET_RUN_DEMO_FILE_LIST
DropZone 에 올린 파일들을 file_list 에 담는 역할이다.
- SET_RUN_DEMO_CONVERT_FILE_IN_FILE_LIST_TO_FIX_FILE_LIST
수정한 파일을 fix_file_list 로 옮기는 역할을 한다.
- SET_RUN_DEMO_REMOVE_FIX_FILE
사용자(관리자)가 올바르게 수정한 이미지를 fix_file_list 에서 삭제하고, fix_file 을 dataset server 에저장한다.
data collect
```
const initialState = {
  choose_dataset_info_pk: 0,
  dataset_info_list: [],
  image_info_list: []
};
```
- SET_DATA_COLLECT_DATASET_INFO_LIST
dataset server 에서, 현재 있는 dataset info 들을 모두 불러오고, dataset_info_list 이곳에 저장한다.
- SET_DATA_COLLECT_IMAGE_INFO_LIST
사용자(관리자) 가 선택한 choose_dataset_info_pk 에 해당하는

image_info_list 들을 들고 와서, 저장하는 구조입니다.

model version

const initialState = {
  model_version_using: {
      pk: 0,
      version_name: "",
      train_acc: 0,
      test_acc: 0,
      model_file_name: "",
      is_using: true
  },
  model_version_all: []
}

SET_MODEL_VERSION_USING

현재 사용중인 모델을 정하여서, 들고온다.

SET_MODEL_VERSION_ALL

모든 버젼의 정보를 들고 온다.

heojae / FoodImageRotationAdmin

[FrontEnd] 프론트 시작전 폴더 구조 설계 #32

page 에 대한 설계

ActionTypes 구상해보기

기본 베이스는 비슷하나, 하다보니, 좀 더 효율적인 방법에 대해서 고려하게 되었고, 아래에 바로 정리하였습니다.

좀 더 효율적인 방법에 대해서, 고려하면서 수정하게된 구조 및 완성본 구조

page 에 대한 설계

ActionType 및 reducer initailState 구상하기