view가 작동 되는 방법


안녕하세요.
고코더 입니다.


이번엔 프론트에 보이게 되는 jsp 페이지인 뷰가 스프링에서 어떻게 작동하는지
간단하게 소스를 기준으로 알아보려고 합니다.


 1. servlet-context.xml 을 열어봅니다.


 2. 그럼 InternalResourceViewResolver 클래스가 빈에 참조 되어 있습니다.
그리고 prefix 와 suffix 라는 프로퍼티가 사용되고 있습니다. 


 3. prefix는 뷰 파일의 위치를 지정합니다. 기본 디폴트 값은 "/WEB-INF/views/" 입니다.
해당 폴더 위치는 src->main->webapp 아래에 있는 WEB-INF-> views폴더 입니다. 
뷰 파일을 추가한다면 해당 폴더에서 생성합니다. 


 4. suffix는 해당 뷰 파일에 확장자를 설정할 수 있습니다. 기본설정은 jsp 파일입니다.
원하는 확장자로 인식할 수 있도록 변경이 가능합니다.


5. 기본 예제 안에 HomeController.java 파일을 열어보면
리턴 값에 home을 반환합니다. 이는 view 파일 이름입니다. 



 6스프링은 이렇게 프레임워크 규칙에 따라 조합하여 뷰 파일을 찾아갑니다.



하나씩 살펴보면 간단한 구조이지만 반복하여 테스트해보고
왜 이렇게 규칙이 생겼는지 고민해보세요.


마무리


복잡하지만 복잡하지 않아요.











댓글을 달아 주세요


views 개발 기초 


안녕하세요.
고코더 입니다.


이전 시간에 라우터를 생성 하였습니다.
이제 라우터와 맵핑하여 프론트에게 보여줄
뷰단을 생성 해보겠습니다.



 1. ejs 파일 만들기


 1-1. views 폴더에서 new 그리고 file을 누릅니다. 


 1-2. 그리고 form.ejs 로 입력하고 확인을 누릅니다. 


 1-3. ejs 안에 내용을 아래처럼 채우겠습니다. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
    <title>기본 예제 테스트</title>
</head>
<body>
    <h1>이름</h1>
      <p<%name %></p>
    <h1>블로그</h1>
        <p<%blog %></p>
    <h1>홈페이지</h1>
     <p<%homepage %></p>
</body>
</html>
cs





 2. 라우터 파일 form.js 수정 하기 


 2-1. 그리고 전 시간에 개발하였던 form.js 를 수정 해보겠습니다.
1
2
3
4
5
6
7
8
9
10
11
var express = require('express');
var router = express.Router();
router.get('/'function (req, res, next) {
    res.render('form', {
        name'Lee Jin Hyun',
        blog: 'gocoder.tistory.com',
        homepage: 'gocoder.net'
    });
});
 
module.exports = router;
cs


 2-2. 해당 라우터에 해당 URI로 접근 경로를 적는 곳입니다.
get, post로 받을 수 있습니다.  
router.get('/',

 2-3. 변수에 데이터를 담아  views에 render 해주는 역할을 합니다. ejs 안에 <%%> 태그안에 담길 변수입니다.
name: 'Lee Jin Hyun',
blog: 'gocoder.tistory.com',
homepage: 'gocoder.net'



 3. 결과 화면 


으로 브라우저로 접속해보세요.
라우터에 변수명에 담긴 내용들이 제대로 출력 되었습니다. 




마무리


더 쉬운 구조에 MVC 패턴 입니다.



아메리카노 한잔으로 배우는 Node.js Express 기본편



해당 내용은 제가 집필한 책에 일부를 발취한 내용입니다.
도움이 되셨으면 후원에 마음으로 제 책을 전국 온라인 서점에서 구매해보세요.




댓글을 달아 주세요

  • 송바 2019.09.27 14:50  댓글주소  수정/삭제  댓글쓰기

    예제를 다 따라하고 http://localhost:3000/form 에 접속하기 위해 웹스톰에서 서버를 실행시켰는데 실행시키자 마자
    Process finished with exit code 0 라는 출력과 함께 서버가 바로 꺼지네요.. 해당 문제를 해결 할 수 있는 방법이 있을까요?