Spring-Boot,JPA로 질문/답변 게시판 구현(33)

Spring-Boot, JPA로 질문/잡변 게시판 구현 및 배포

자바지기님 유튜브 강의 정리

6-0 여섯 번째 반복주기 학습 목표 및 과정 설명

• 여섯번 주기만으로 웹 어플리케이션의 모든것을 알 수 없지만 기본적인 흐름, 배포, 내가 알아야할 부분이 무엇인지 파악할 수 있는 수준까지는 올라올 수 있다.

• 그 다음단계로 좀 더 깊이 있는 공부를 하면 된다.

• 이번 반복주기에서는 JSON이라는 API를 개발할 것이다.

• 그리고 AJAX도 배워볼것이다.

• 최근에는 single page application등 AJAX를 활용해서 개발하는 경향이있다.

• 그리고 smart phone이 등장하면서 모바일 서비스를 지원하려면 백엔드에서 html등이 아니라 데이터만 전달한다. css, 자바스크립트 등 화면을 구성하는 데이터는 모바일 앱에서 자신만의 기술을 가지고 html과 다른 기술로 구현한다.

• 그래서 백엔드입장에서는 html을 만들어서 제공하는 부분과, 모바일에 대응하기위한 부분에 상당히 많은 중복이 있었다. 그래서 JSON api형태로 데이터만 전달하고 모든 클라이언트의 ui나 이벤트 처리는 클라이언트에게 위임하고있다.

• 최근 백엔드의 역할은 동적인 html을 만드는 부분을 클라이언트 사이드로 넘기고있다. 데이터를 넘기는것에 대해 옛날에는 xml이라는 것이 있었다. json과 xml 표준을 잠시 보면

  [
      {"no": "나", "name" : "정형돈" "job" : "개그맨"},
      {"no": "다", "name" : "유재석" "job" : "개그맨"}
  ]
  

  <xml version='1.0'>
      <info><no>나</no><name>정형돈</name><job>개그맨</job></info>
      <info><no>다</no><name>유재석</name><job>개그맨</job></info>    
  </xml>
  

  • json가 xml보다 사이즈가 확실히 더 작다.

• AJAX는 화면을 구성할 때 예를들어 댓글을 달면, 화면이 바뀌는 부분이 어느 부분인지 보면 원래 있는 화면(header, navi, post 등)은 달라지지 않고 댓글이 추가된 부분만 바뀐것이다.

  • 기존방식이라면 댓글 데이터를 추가하면 서버의 Controller에 날라가서 데이터베이스에 추가되고, 데이터베이스에서 질문 데이터와 답변 데이터의 목록 데이터를 모두 조회한 후 그것을 mustache templete engine에 넣어서 html전체를 다시 동적으로 만든 뒤 클라이언트에게 전해준다.
  • 클라이언트는 서버로부터 받은 html전체를 받은 뒤 화면을 처음부터 끝까지 전부 다시 구성하는것이다.

• 사실 네트워크상 데이터를 주고받는것도 비용부담도 크고, 서버의 데이터베이스에서 데이터를 조회하는것도 비용이 들고, mustache template engine을 이용하여 html을 만드든것도 비용이 든다.

• 우리가 인식하기에 빨리 되는편인데? 라고 생각할 수도 있지만, 사용자가 늘어나고 서버 한대에 수십 수백만의 이용자가 있을경우, 이런 차이가 큰 차이를 야기한다.
• AJAX는 답변을 입력후 답변하기 클릭을하면, 기존 화면은 그대로있고, AJAX라는 기술을 통해서 데이터를 서버로 전달하고 서버는 추가된 데이터를 json형태의 응답으로 준다. 클라이언트는 json을 html으로 변환하여 바뀐부분만 추가를 해주는것이다. 성능상으로 상당히 유리하다.