[프로젝트] Spring / Ajax 사용법

이번 달에 친구들과 함께 새로운 프로젝트를 하게됐다.

 

공개 SW 개발자 대회에 참가하면서 시작한 프로젝트인데,

간단히 설명하자면 책이나 강의자료 pdf를 text로 변환하고 이를 text rank 알고리즘을 통해 중요문장과 keyword를 추출해낸다. 추출된 문장과 키워드로 빈칸문제를 출제하여 방대한 양의 암기과목을 공부하는 대학생들에게 도움이 될만한 자동 문제 출제 서비스를 구현하려고 한다.

 

프론트엔드에서는 Ajax를 통해 비동기적으로 웹 제작을 하려고 한다. 특정 페이지의 데이터 변화가 존재할 때 페이지를 refresh 해야하는데, 데이터의 변화가 잦다면 새로고침을 계속 수행해주어야하고 불필요한 트래픽이 증가하여 비효율적인 로딩이 많아지게 된다. 이러한 문제를 Ajax를 통해 해결할 수 있다. 데이터가 변하는 부분만 동적으로 변화시켜주는 것이다. 

 

 

* 로그인

 

- 백엔드(Spring)에서 프론트엔드로 데이터 보내기

@ResponseBody
    @PostMapping("/services/login/{id}/{pw}")
    public boolean validLogin(@PathVariable("id") int id, @PathVariable("pw") String pw) throws SQLException {
        System.out.println("@ REQUEST : [id]" + id + "try to login by [pw] " + pw);
        String condition = "uuid=" + id + " and pwd=FUNC_MD5_ENCRYPTION('" + pw + "')";
        JSONArray result = UserDao.getInstance().findByCondition(condition);
        if (result.size() == 1) {
            return true;
        }
        return false;
    }

 

- 프론트엔드에서 백엔드로 데이터 보내기

$("#signIn").click((event) => {
    $.ajax(
        {
            url: "http://"+ipadr+":8080/services/login/" + $("#userID").val() + "/" + $("#userPW").val(),
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            data: {}
        }
    ).done((data) => {
        console.log(data);
        if (data == false) {
            alert("잘못된 로그인 정보입니다.");
            location.reload();
        } else {
            location.href='main_page?userid=' + $("#userID").val();
        }

    });
});

 

두 가지를 보면 url의 형식이 일치하는 것을 알 수 있다.

이런식으로 필요한 api들을 백엔드에서 구현해두고, 프론트엔드에서는 ajax를 통해 api에 접근하여 데이터를 얻어서 페이지를 동적으로 변경해주면 된다 ~