2023-07-19 TIL (ajax를 사용하는 이유)

프로젝트에서 서버에 대한 구현이 거의 완료되어서 더 완성도 높은 프로젝트 결과물을 위해 프론트앤드도 구현하기로 했다. 프론트앤드는 정말 경험이 하나도 없기 때문에 하나하나씩 새로 공부를 해야했다.

 

HTML과 CSS는 어찌어찌 부트스트랩과 구글링을 통해서 해결했다..

 

이제 문제는 회원가입부분에서 입력한 내용을 서버와 통신하는 것인데

이 역할은 js가 해준다. 여기서 활용할 수 있는 것이 ajax인데 입력받은 내용을 server와 통신을 해주는 역할을 한다.

 

ajax를 사용하는 이유는 크게 두 가지 이다.

• 요청에 대한 응답을 HTML이 아닌 Data(Json)을 받기 위해
• 비동기 통신을 하기 위해

 

유튜브에서 강의도 찾아보고, 구글링도 열심히 해서 작성한 코드는 다음과 같다.

<script>
  let index = {
    init: function (){
      $("#btn-save").on("click", () => {
        this.save();
      });
    },

    save: function () {
      // alert("user의 save함수 호출됨");
      let data = {
        username : $('#inputUsername').val(),
        password : $('#inputPassword').val(),
        email : $('#inputEmail').val(),
        introduction :$('#inputIntroduction').val(),
        adminToken : $('#inputAdminToken').val()
      };
      // console.log(data);

      /**
       * 회원가입시 Ajax를 사용하는 2가지 이유
       * 1. 요청에 대한 응답을 HTML이 아닌 Data(Json)을 받기 위해! (웹, 앱 서비스 통일할 수 있음)
       * 2. 비동기(순서에 상관없이) 통신을 하기 위해!
       * ajax호출 시 default가 비동기 호출
       */

      $.ajax({
        // 회원가입 수행 요청
        type: "POST",
        url:"/api/user/signup",
        data: JSON.stringify(data), // http body data
        contentType:"application/json; charset=urf-8",
      }).done(function(res){
        alert("회원가입이 완료되었습니다.")
        location.href = "/api/user/login"
      }).fail(function (error){
        alert("회원가입에 실패했습니다.");
      }); //ajax 통신을 이용해서 파라미터를 json으로 변경하여 insert 요청


    }
  }

  index.init();
</script>

 

---

프론트는 하나도 모르니까 정말 어려운 것 같다.

그래도 서버와 통신하는 방법을 조금이나마 알게되고 실습도 해본 것 같아서 좋은 경험이었다고 생각한다.

 

내일부터는 로그인, 메인페이지 만들자..!