후기에서 API파일을 분리해야겠다고 말했었는데 어떻게 분리했는지 정리해두는게 좋을 것 같다.

API 파일 분리

'이렇게 저렇게해서 요렇게 분리하면 되겠네'
하고 한번에 방법을 찾으면 좋으련만... 역시나 머리를 싸매야했다.

막연하게 클래스 파일로 만들어서 처리하면 될거같다는 생각은 떠올랐는데 그래서 클래스로 어떻게??? 라는 부분이 떠오르질 않았다.

그래서 일단 노트에 현재 파일의 상태와 문제점이 뭐고, 어떤 부분이 공통적으로 필요하고 어떤부분이 나누어져야 하는지 정리부터 해보았다.

기존 상태

• firebase.jsx > auth, realtime database API 사용 모음

• upload.jsx > storage API 사용 모음

문제

• 두 파일에 firebaseConfig가 중복됨

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getDatabase(app);
const dbRef = ref(db);
const provider = new GoogleAuthProvider();

각각의 파일에 동일한 설정 코드가 중복된다.

• 각 서비스가 분리되지 않음

firebase.jsx 파일의 경우 login, movie, pick, community 로직이 다 모아져있다. 파일이 너무 커졌고 가독성도 많이 떨어진다.

그러니까 정리해보자면,
각 파일을 서비스별로 구분하되 공통 설정은 한번만 설정하고 다른파일들은 그 설정을 이용하게 해야한다.

해결

• Firebae클래스 > firebase 설정
• AttachmentService클래스 > storage 파일 업로드
• AuthService클래스 > auth 인증 관련
• CommunityService클래스 > community페이지에서 필요한 api
• movieService클래스 > 영화 데이터를 다루는 api

클래스 상속을 활용했다.

Firebase클래스에서 firebase 설정을 하면 다른 클래스는 Firease클래스를 상속(extends)받아 각자 필요한 로직을 정의한다.

고민

• FirebaseConfig 설정을 생성자로 해야하는가

처음에는 생성자로 만들었었다.
그런데 생각해보니 Firebase클래스로 인스턴스를 만들 경우는 없고, 설사 있다고 하더라도 딱히 생성자 주입할 부분은 없기 때문에 굳이 생성자를 정의할 필요가 없겠다는 생각이 들었다.

• 어떻게하면 좀 더 간편하게 사용할까
  api가 필요한 파일마다

const community = new Community();
community.add()
community.get()

이런식으로 객체를 생성하고 사용하기엔 너무 불편할 것 같았다.

그래서 인스턴스를 생성하고 인스턴스의 멤버를 반환하는 Hooks을 만들어 사용하려고 했는데 Context로 관리되는 auth서비스를 제외하곤 모두 redux로 관리되기 때문에 hooks을 사용할 수가 없었다. (hooks은 컴포넌트에서만 사용할 수 있음)

아쉬운대로 auth는 hooks으로 만들어주고 나머지는 api가 필요한 파일에서 비구조화 할당을 이용했다.

const movie = new MovieService();
const { add, search, get } = movie;

이렇게 하는게 올바른 건지는 모르겠지만 내가 할 수 있는 선에서 최대한 긍정적인 방향으로 개선될 수 있도록 노력했다.

확실한건 파일을 분리하니 중복 코드도 줄고 전보다 가독성은 좋아진거같다.

참고자료

✅ 클래스 공부
https://ko.javascript.info/class-inheritance