게시판 만들기 14 자바 스프링프레임워크 화면에 데이터 표시하기

게시판 목록을 만드는 것은 여러방식이 있다. 특히 웹에서는 화면의 깜빡거림을 해소하고자 비동기방식을 사용하기도 한다. 동기방식을 사용하여 화면이 깜빡거리더라도 웹브라우저 캐시메모리로 지금은 거의 차이가 없다. 하지만 간혹 깜빡임이 불편할 수 있다. 이들의 차이를 보면 여러가지가 있다.

게시판 만들기 14 자바 스프링프레임워크
화면에 데이터 표시하기

게시판 목록을 만들 때 가장 거슬리는 것이 화면 깜빡임이다.

화면이 넘어갈 때 해당부분만 변경하면 좋겠지만 거의 모든 웹사이트들은 전체적으로 화면이 깜빡인다.

이로 인한 해소는 브라우저 캐시메모리가 알아서 해결해 주고 있지만 완벽하지 않다.

그렇기에 ajax 방식인 비동기처리 방식이 등장했다.

방식의 차이

웹브라우저에서 동일한 페이지에서 작은 컨텐츠 부분 때문에 화면을 넘기면서 볼 경우가 있다.

이 때 화면이 깜빡인다.

이것을 상당히 거슬려 하는 분들이 있다.

그렇기에 ajax 비동기 방식을 사용경우도 더러 있지만 커뮤니티나 컨텐츠 위주의 게시판이라면 얘기는 다르다.

여기서 동기냐 비동기냐 따라 차이가 있다.

검색엔진이 페이지의 내용을 가져갈 때도 문제는 생길 수 있다.

먼저 동기와 비동기 차이를 보자.

동기방식
html 을 서버에서 렌더링하여 사용자 브라우저 화면에 웹페이지를 보여준다.
렌더링 속도에 따라 로딩의 차이가 있다.
화면이 깜빡이지만 모든 링크들에 대해 검색엔진이 탐색을 하는 용이점이 있다.
비동기방식
필요한 화면만 먼저 html 로 내려준 후 별도의 독립된 동작으로 컨텐츠를 보여준다.
화면 내에 있는 컨텐츠들이 독립적으로 움직이며 화면의 깜빡임이 거의 없다.
자바스크립트의 동작과 코딩의 차이로 검색엔진이 링크탐색을 못하는 경우도 있다.

ModelAndView 사용

자바 스프링프레임워크에는 ModelAndView 란 구조가 있다.

간단하게 살펴보고 넘어가자.

이것은 서버단인 컨트롤러에서 html 코드를 작성한 후 서버에서 html 을 렌더링하여 사용자 웹브라우저로 html 를 보내준다.

이 역할을 하는 것이 ModelAndView 이다.

아래의 코드에서는 model.addAttribute() 부분이 ModelAndView 의 model 설정이 된다.

@RequestMapping(value = "/template", method = RequestMethod.GET)
	public String BoardList(Locale locale, Model model) {
		logger.info("Welcome home! The client locale is {}.", locale);
		
		Date date = new Date();
		DateFormat dateFormat = DateFormat.getDateTimeInstance(DateFormat.LONG, DateFormat.LONG, locale);
		
		model.addAttribute("serverTime", formattedDate + " STS 실행 테스트");
		
		return "template/template";
	}

jstl 사용

위의 코드에서 ModelAndView 의 model 을 선택하면 html 화면에서는 그 값을 표시해 주어야 한다.

컨트롤러의 model 설정은 Model.addAttribute("키", 값) 의 형태를 가진다.

html 에서 이 값을 표시해 주려고 하면 model 에서 설정한 키를 html 에 작성해 주면 된다.

이 때 필요한 것이 jstl 이다.

아래의 html 코드를 보자.

{$serverTime} 은 컨트롤러에서 정해준 키 이름이다.

컨트롤러에서는 model.addAttribute("serverTime", formattedDate + " STS 실행 테스트"); 이렇게 되어 있다.

위의 코드와 아래의 코드를 비교하면 알 수 있다.

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!-- html5 기본템플릿 -->
<!DOCTYPE html>

    <!-- head -->
    <head>
    	
    	<!-- 한글 깨짐 방지 -->
		<meta charset="UTF-8">

        <!-- meta 반응형 웹표준 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- // -->

        <!-- 스타일 -->
        <style></style>
        <!-- // -->

    </head>
    <!-- // -->

    <!-- body -->
    <body>
        <p>
        	${serverTime}
        </p>
    </body>
    <!-- // -->

    <!-- 자바스크립트 -->
    <script type="text/javascript"></script>
    <!-- // -->

</html>

결과화면으로 보면 새삼 단순하다.

고작 이것까지 보기 위해 포스팅만 길어진 느낌이다.

'programming > MakinGProJect' 카테고리의 다른 글

알고두 객체 상호작용하기 드래그 툴 Darg Tool 마우스로 놀기 좋은 꿀잼 기능 (0)	2022.01.16
게시판 만들기 15 화면에 목록 표시하기 자바 스프링프레임워크 사용 (0)	2021.10.29
게시판 만들기 13 자바 스프링프레임워크 게시판 테이블 데이터 가져오기 (0)	2021.10.26
게시판 만들기 12 자바 스프링프레임워크 테이블 조회 쿼리 만들기 (0)	2021.10.26
게시판 만들기 11 자바 스프링프레임워크 게시판 테이블 만들기 (0)	2021.10.25

게시판 만들기 14 자바 스프링프레임워크 화면에 데이터 표시하기