[TIL] export a class

클론 프로젝트 내 로그인 화면을 구현할 때,
로그인 버튼 클릭과 동시에 api를 호출하면서 문제가 생겼다.

loginService() {
Object(C_Projects_practive_vue_node_modules_babel_runtime_helpers_esm_classCallCheck_jsWEBPACK_IMPORTED_MODULE_1["default"])(this, loginService);

Object(CProjects_practive…

이게 뭐지..모듈 바벨 런타임이 어떻다는 거지...?

//.js

import api from '@/http'

export class loginService {
  login = params => {
    return api.post('sign-in', params)
  }
}

export default loginService

//.vue

<script setup>

import loginService from '@/service/login'
const state = reactive({
  userInfo: {
    id: '',
    pwd: '',
  },
})

const logIn = () => {
  console.error(loginService)
  loginService.login(state.userInfo)
}

</script>

한참동안 문제의 원인을 파악하지 못하다가 문득 class를 export 하는 방법을 서칭하게 되었고, 그제서야 export문이 잘못되었다는 것을 알게 되었다.

클래스 export

자바스크립트에서 class를 export 할 때,
class를 선언한 같은 라인에서 바로 export 시킬 수 있다.

코드를 살펴보자.

//login.js

import api from '@/http'

export class loginService {
  login = params => {
    return api.post('sign-in', params)
  }
}

• 클래스가 선언된 같은 라인에서 export를 하면 class는 object로 내보내지는 것이다.
• 따라서, 해당 경로의 class를 import할 때에는 object 형태로 명시해줘야 한다.

---

같은 코드로써 class를 선언한 이후 export 시킬 수 있다.

//login.js

import api from '@/http'

class loginService {
  login = params => {
    return api.post('sign-in', params)
  }
}

export { loginService } 
or
export new loginService()

• export { 클래스명 } 과 export new 클래스()는 protoType의 유무에서 차이가 존재한다.
  1) export { 클래스명 } : 해당 클래스를 객체로 내보내는 것이며,
  2) export new 클래스() : 클래스의 인스턴스로 내보내는 것이다.
• 따라서, new 키워드를 사용하면 prototype을 상속하는 새로운 객체가 만들어지고 인스턴스는 클래스 내에서 선언된 함수, 변수 등을 포함한다.
• 이와 다르게, new 키워드를 사용하지 않을 때에는 해당 클래스를 export 할지라도 exported 된 클래스명만 존재할뿐 그 클래스는 아무런 내용을 담고 있지 않다. 즉 loginService.login 으로 접근하면 에러를 내뿜는다.

클래스 import

위와 같이 export된 class파일을 호출할 때는 아래의 규칙을 따라야 한다.

export { 클래스명 } 으로 내보낸 파일일 때,

import { 클래스명 } from '경로'

import { loginService } from '@/service/login'

• 즉, 내보낸 class명을 그대로 사용해야만 해당 class에 접근할 수가 있다,
• named export는 동일 파일 내에서 필요한 만큼 내보낼 수 있다.
  
  

export default new 클래스명() 으로 내보낸 파일일 때,

import 새로운 네이밍 from '경로'

import Api from '@/service/login'

• export한 파일에서 어떤 네이밍을 사용했든간에 새로운 네이밍으로 import할 수 있다.
• Api.login() 과 같이 사용하여 클래스의 함수에 접근이 가능하며, 이는 new 키워드를 사용하면서 생성자 함수가 있는 내장 오브젝트 타입의 인스턴스 하나가 만들어졌기 때문이다.

참고 사이트

Borislav Hadzhiev의 블로그
lts0606의 블로그
3jun의 블로그
stack overflow