[Spring Boot + Vue.js 시리즈 1편] JSP vs Vue.js 차이점 분석

프론트엔드 프레임워크들이 계속 발전하면서 Vue.js에 대한 관심이 높아지고 있다.

현재 회사 프로젝트에서는 JSP를 사용하고 있지만, 향후 기술 스택 전환이나 새 프로젝트를 위해

Vue.js를 미리 학습해보려고 한다.

 

1. 데이터 바인딩 비교

JSP에서는 이렇게 데이터를 표시했다:

<div>
    <h2>${board.title}</h2>
    <p>작성자: ${board.writer}</p>
    <p>내용: ${board.content}</p>
    <p>조회수: ${board.viewCount}</p>
</div>

<script>
function updateViewCount() {
    $.ajax({
        url: '/board/updateView',
        type: 'POST',
        data: { boardNo: ${board.no} },
        success: function(result) {
            $('#viewCount').text(result);
        }
    });
}
</script>

 

Vue.js에서는 다음과 같이 작성한다:

<template>
  <div>
    <h2>{{ board.title }}</h2>
    <p>작성자: {{ board.writer }}</p>
    <p>내용: {{ board.content }}</p>
    <p>조회수: {{ board.viewCount }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      board: {
        title: '',
        writer: '',
        content: '',
        viewCount: 0
      }
    }
  },
  methods: {
    async updateViewCount() {
      const response = await axios.post(`/api/board/${this.board.no}/view`)
      this.board.viewCount = response.data
    }
  }
}
</script>

 

 

 

2. 반복문 처리 방식

JSP:

<table>
    <c:forEach items="${boardList}" var="board" varStatus="status">
        <tr>
            <td>${status.count}</td>
            <td>
                <a href="/board/detail?no=${board.no}">
                    ${board.title}
                    <c:if test="${board.commentCount > 0}">
                        <span class="badge">${board.commentCount}</span>
                    </c:if>
                </a>
            </td>
            <td>${board.writer}</td>
        </tr>
    </c:forEach>
</table>

 

Vue.js:

<template>
  <table>
    <tr v-for="(board, index) in boardList" :key="board.no">
      <td>{{ index + 1 }}</td>
      <td>
        <router-link :to="`/board/${board.no}`">
          {{ board.title }}
          <span v-if="board.commentCount > 0" class="badge">
            {{ board.commentCount }}
          </span>
        </router-link>
      </td>
      <td>{{ board.writer }}</td>
    </tr>
  </table>
</template>

 

 

 

3. 조건부 렌더링

JSP:

<c:choose>
    <c:when test="${user.role == 'ADMIN'}">
        <div class="admin-panel">
            <button onclick="deleteBoard(${board.no})">삭제</button>
            <button onclick="location.href='/board/edit?no=${board.no}'">수정</button>
        </div>
    </c:when>
    <c:when test="${user.no == board.userNo}">
        <button onclick="location.href='/board/edit?no=${board.no}'">수정</button>
    </c:when>
</c:choose>

 

Vue.js:

<template>
  <div>
    <div v-if="user.role === 'ADMIN'" class="admin-panel">
      <button @click="deleteBoard">삭제</button>
      <button @click="goToEdit">수정</button>
    </div>
    <button v-else-if="user.no === board.userNo" 
            @click="goToEdit">수정</button>
  </div>
</template>

<script>
export default {
  methods: {
    async deleteBoard() {
      if(confirm('정말 삭제하시겠습니까?')) {
        await axios.delete(`/api/board/${this.board.no}`)
        this.$router.push('/board/list')
      }
    },
    goToEdit() {
      this.$router.push(`/board/edit/${this.board.no}`)
    }
  }
}
</script>

 

 

 

4. JSP와 Vue.js의 주요 차이점 정리

1. 렌더링 방식
   • JSP: 서버에서 HTML을 생성해 전달 (서버 사이드 렌더링)
   • Vue: 브라우저에서 데이터를 받아 화면을 구성 (클라이언트 사이드 렌더링)
2. 데이터 처리
   • JSP: 페이지 새로고침을 통한 전체 갱신
   • Vue: 필요한 부분만 비동기로 업데이트
3. 코드 구조
   • JSP: HTML 안에 자바 코드와 JavaScript가 혼재
   • Vue: 컴포넌트 단위로 구조화 (template, script, style 영역 분리)
4. 상태 관리
   • JSP: 세션과 request 스코프를 통한 상태 관리
   • Vue: 컴포넌트 데이터와 Vuex를 통한 중앙 집중식 상태 관리

 

 

5. 정리

JSP와 Vue.js를 비교하면서 가장 눈에 띄는 차이점은 '컴포넌트 기반 개발 방식'이다.

Vue.js는 재사용 가능한 컴포넌트들로 UI를 구성하기 때문에, 코드 재사용성과 유지보수성이 높아진다는 장점이 있다.

다음 글에서는 Spring Boot(STS4)와 Vue.js를 실제로 어떻게 연동하는지 알아보도록 하겠다.