[TIL #57] 최종프로젝트 #6 JS 파일 임포트

오늘은 js를 작업해보았습니다. 저희 프로젝트는 프론트와 백엔드를 따로 배포하기 때문에 서로 작업환경도 달라 js에서 백엔드로 데이터를 요청할 때 fetch를 이용해 가져오고 있습니다.

// fetch 사용예시
async function getRoutes() {
    const response = await fetch(`http://127.0.0.1:8000//routes/`, {
        method: "GET",
    });

이 방식의 문제는 다른 함수들에도 fetch를 이용해 정보를 가져오는데 일일이 http://127.0.0.1:8000//routes/ 이런 url을 입력해주기 번거롭다는 것이였습니다.

이에 다음으로 고안된 것이 변수하나를 만들어 불러오는 방식입니다.

const proxy = `http://127.0.0.1:8000//routes/`

// Article 리스트 GET 요청
async function getRoutes() {
    const response = await fetch(`${proxy}/routes/`, {
        method: "GET",
    });

이 방식은 저번 프로젝트까지 사용했던 방식으로 개발을 하던 당시로서는 큰 문제가 없던 방식이였습니다.

하지만 배포단계에 들어가며 이 방식도 상당히 불편한 방식으라는 것을 깨달았는데 배포테스트를 위해 백엔드 배포 주소와 로컬 주소를 왔다갔다해가며 테스트를 해야하는 환경에서 모든 파일에 들어가 저걸 수정하고 있는 것에 불편함을 느꼈습니다.

그리고 이번에 새로 가져온 3번째 방법입니다.

// proxy.js
const proxy = "http://127.0.0.1:8000/"

export { proxy }

import { proxy } from "../proxy";

// Article 리스트 GET 요청
async function getRoutes() {
    const response = await fetch(`${proxy}/routes/`, {
        method: "GET",
    });

proxy.js라는 파일을 만들어 주소를 사용해야하는 모든 파일의 상단에 proxy.js파일을 임포트해 사용하는 방식입니다. python을 주력으로 사용했던 저에게는 임포트방식이 꽤나 낯설었지만, 상세히 임포트하는 만큼 원하는 것만 가져오고 실수할 위험도 줄어드는 것 같아 좋았습니다.

앞으로 배포단계에서 테스트를 하더라도 proxy.js파일 하나만 수정하면 모든 파일에 적용될테니 이제 걱정하지 않아도 될 것 같습니다.