[프로젝트-DediCats] Devlog-10

김대연·2020년 2월 16일
0

Project DediCats

목록 보기
11/16

몇일 전, 포스트에서 mobx store 리팩토링 작업에 관한 포스트를 작성했었다. 2개의 스토어에서 총 6개의 스토어로 확장하였고 기능에 맞게 각 스토어로 이동시켰다.

이 중 스토어 분할을 통해 리팩토링을 할 수 있었던 몇 가지 helper function 에 대해 적어보려 한다.


updateInputonChange 와 같이 input text 창에서 입력되는 값을 받아 state 를 업데이트 해주는 helper function 이다. 기존에는 CatStore 에 존재하는 infoaddCat 객체를 field 명으로 받아 해당 객체의 키의 값을 업데이트 했었다.

// cat(info) -> selectedCat, inputContent, inputComment, newTag
// cat(addCat) -> catNickname, catSpecies, catDescription
  updateInput = (field, text) => {	  
    this[field] = text;	
  }

이 부분을 모든 input text 창에서 이용할 수 있도록 아래와 같이 리팩토링을 시켰다. 먼저 어디에 존재하는지 구별하기 위해 store 명을, 업데이트 하려는 변수명 variable, 그리고 변형하려는 값 text 까지 세 개의 인자를 받아서 어느 스토어에 존재하던 값을 업데이트할 수 있도록 하였다.

// auth -> email, nickname, confirmPW, reConfirmPW, PW, emailVerification 도 적용
  updateInput = (store, variable, text) => {
    this.root[store][variable] = text;
  };

또 반대로 input 들이 사용되고 나면 비워주기 위한 clearInput 에도 적용할 수 있었다. 기존에는 각 두 개의 스토어에 함수가 따로 존재해서 각 스토어 변수들에게만 사용할 수 있었다.

clearInput = (...types) => {	  
  types.forEach(type => {	  
    runInAction(() => {
      this[type] = '';	
    }
  }
};

이번 리팩토링 또한 store 명과 variable 명을 받아서 어느 store 에 있어도 적용할 수 있는 helper function 으로 만들었다. 또한 rest parameter 를 이용하여 2번째 인자부터 빈 값으로 만들려는 변수명을 나열해주면 array function 을 이용해서 모두 적용시켜주게 하였다.

  // auth: 'email', 'nickname', 'confirmPW', 'reConfirmPW', 'emailVerification', 'PW',
  // cat: newTag, inputComment -> selectedCatNewTag, selectedCatInputComment
  clearInput = (store, ...variable) => {
    variable.forEach(el => {
      runInAction(() => {
        this.root[store][el] = '';
      });
    });
  };

ImagePicker 모듈을 이용해 앨범의 사진을 가져오는 함수에서도
this.root[store][`${type}Uri`] 이런 식으로 뒤에 Uri 부분을 통일시켜줌으로서 어느 스토어에 있던 변수명에 맞게 값을 넣으면 사용할 수 있도록 작성했다.

pickImage = async (store, type) => {
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.All,
    allowsEditing: true,
    aspect: [4, 4],
    quality: 0.2,
    base64: true,
  });
  if (!result.cancelled) {
    const imageTarget `data:image/jpeg;base64,${result.base64}`;
    this.root[store][`${type}Uri`] = result.uri;
    this.root[store][`${type}PhotoPath`] imageTarget;
  }
};

리팩토링 작업을 개발의 반 이상이 지나고 나서야 시작했더니 파생된 작업은 어마어마했다. 많은 시간을 필요로 하는 작업이었는데 위처럼 조금 더 효율적으로 리팩토링한 함수들을 보면 기분이 좋다. 하지만 역시 초반에 기획 단계에서 정하고 갔다면 많은 시간을 줄일 수 있었을 것이다. 다시 한번 계획의 중요성을 느낀다.

0개의 댓글