최종 팀 프로젝트[front] API function 분리하기

https://github.com/sdoram/b4_exhibitions_frontend

GitHub - sdoram/b4_exhibitions_frontend: B4조 지금은 전시상황 프론트엔드

 

1. 기존 방식대로 하나의 기능을 function으로 사용 

장점 : 작성자 기준으로 가독성 증가 

단점 : 작성자 이외의 가독성 저하 

결론 : 혼자 만드는 프로젝트나 단기간에 만드는 프로젝트에서 고려할 방법 같다. 

 

2. 백엔드와 통신하는 부분을 API.js라는 파일로 관리하기 

장점 : 완성된 코드의 가독성이 증가하며 front와 back으로 나누어 유지 보수가 용이함

단점 : 익숙하지 않은 js의 function을 또 다시 다른 방법으로 사용해야함 

결론 : 아직 js의 진행이 많이 되어있지 않아 변경이 필요한 부분이 적고, front와 관련된 function만 분리할 수 있다면 가독성에 상당한 도움이 될것으로 예상 되므로 분리 진행  

 

1. 백엔드 통신부분 API로 분리하기 

 문제점

하나의 기능을 담당하는 function에서 기능은 하나지만, 백엔드에 데이터를 받아오는 부분과 그 데이터를 프론트에서 처리하는 과정으로 나뉘고 본인이 작성한 function이 아니면 코드를 이해하는데 시간이 상당히 소요됨 

 시도해 본 것들

async function handleSignUp() {
    console.log('회원가입 버튼')
    const email = document.getElementById("email").value;
    const nickname = document.getElementById("nickname").value;
    const password = document.getElementById("password").value;
    const gender = document.getElementById("gender").value;
    console.log(email, nickname, gender, password)

    const response = await fetch(`${backendBaseUrl}/users/signup/`, {
        headers: {
            'content-type': 'application/json',
        },
        method: 'POST',
        body: JSON.stringify({
            "email": email,
            "nickname": nickname,
            "password": password,
            "gender": gender
        })
    });
    console.log(response)
    if (response.status == 201) {
        alert("회원가입 성공")
        window.location.replace(`${frontendBaseUrl}/templates/signin.html`)
    } else {
        alert(response.status)
    }
}

 

백엔드와 통신하는 부분 API로 분리 

// 회원가입 API
export async function signUpAPI(data) {
    const response = await fetch(`${backendBaseURL}/users/signup/`, {
        headers: {
            'content-type': 'application/json',
        },
        method: 'POST',
        body: JSON.stringify(data)
    });
    console.log(response, 'signUpAPI');
    const responseJson = await response.json();
    return { response, responseJson };
}

 

API에서 데이터를 받아서 프론트 처리를 하는 부분 

import { signUpAPI, frontendBaseURL, payload } from "./api.js";

function handleSignUp() {
    console.log('회원가입 버튼')
    const email = document.getElementById("email").value;
    const nickname = document.getElementById("nickname").value;
    const password = document.getElementById("password").value;
    const passwordCheck = document.getElementById("passwordCheck").value;
    const gender = document.getElementById("gender").value;
    // API 전달용 data
    const data = {
        "email": email,
        "nickname": nickname,
        "password": password,
        "password_check": passwordCheck,
        "gender": gender
    }
    // 백엔드 통신 함수 
    signUpAPI(data).then(({ response, responseJson }) => {
        if (response.status == 201) {
            alert(responseJson.message);
            window.location.replace(`${frontendBaseURL}/templates/signin.html`);
        } else {
            alert(responseJson.message);
            console.log(response.status);
        }
    });
}
// 회원가입 function 실행
document.getElementById("signUpButton").addEventListener("click", handleSignUp);

 export를 통해서 import할 수 있는 부분을 정의하기

 

onclick으로 함수를 작동시키는 기존의 html 

<br><button type="button" onclick="handleSignUp()">회원가입</button>

 

 

addEventListener를 위한 id로 대체한 html

<br><button type="button" id="signUpButton" >회원가입</button>

addEventListener를 사용하면 여러 함수를 중첩시켜 순차적으로 작동시킬 수 있고 click과 hover등 다른 경우의 처리도 좀더 간편하게 가능하다. 

단점으로는 구버전 브라우저에서 addEventListener를 지원하지 않는 경우가 있는 것 같지만, 그것을 이번 프로젝트에서 고려할 필요는 없을 것 같다. 

https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener

 알게 된 점

export : import를 할 수 있도록 선언하는 과정 

addEventListener : onclick에 비해 유연하게 사용가능하므로 docs에서도 사용이 권장됨