블로그 컨텐츠 작성 화면 뷰 파일 생성

블로그 컨텐츠 작성 화면 뷰 파일 생성 개요

블로그 컨텐츠 작성 화면 뷰 파일을 만들어 보겠습니다.

MVC 에서 뷰(view)란 사용자가 보는 화면을 말합니다.
우리는 웹 어플리케이션을 만들고 있기 때문에 화면은 HTML(Hyper Text Markup Language)로 작성합니다.

뷰 경로 확인하기

/src/main/java/v2/mvc/spring/blog/controller/BlogController.java

public String create() {
    return "blog/create";
}

1. 블로그 컨트롤러 파일을 엽니다.
2. 블로그 컨텐츠 작성 뷰 메서드가 반환한 경로가 /blog/create 인 것을 확인합니다.

링크 위드 에디터 기능 활성화

1. 패키지 탐색기 오른쪽에 보면 노란색 양쪽 화살표(<-->) 를 클릭합니다.
2. 반전되어 있는지 확인합니다.

home.jsp 열기

1. ctrl + shift + r 키로 리소스 열기 창을 엽니다.
2. home.jsp 를 검색합니다.

home.jsp 폴더 확인하기

1. home.jsp 파일 경로가 src/main/webapp/WEB-INF/views 폴더 아래 있는 것을 확인합니다.

새 JSP 파일 생성 메뉴 진입

1. 패키지 탐색기에서 src/main/webapp/WEB-INF/views 폴더를 우클릭합니다.
2. new를 선택합니다.
3. Other 를 선택합니다.

jsp 선택

1. 신규 파일을 생성하는 new wizard 화면이 보입니다.
2. jsp를 검색합니다.
3. JSP File을 선택하고 Next 버튼을 클릭합니다.

jsp 파일 생성

1. jsp 파일을 생성할 폴더를 확인합니다. 기존 경로인 src/main/webapp/WEB-INF/views 폴더가 선택되어 있습니다.
2. File name 란에 blog/create 를 입력합니다.
3. Finish 버튼을 클릭합니다.

jsp 파일 생성 확인

1. jsp 파일이 src/main/webapp/WEB-INF/views/blog/create.jsp 경로에 생성되었는지 확인합니다.

create.jsp 파일의 기본 틀은 STS가 자동으로 만들어주었습니다.

브라우저에서 확인하기

브라우저에서 확인해 보겠습니다.

1. 브라우저에서 http://localhost:8080/create 를 입력합니다.
2. 제목이 Insert title here 인 것을 확인합니다.

화면이 보여지는 과정 이해해 보기

1. 브라우저에서 /create 주소를 입력합니다.
2. 톰캣은 브라우저의 요청을 받아서 스프링으로 전달합니다.
3. 스프링은 /create 웹주소에 해당하는 BlogController의 create 메서드를 찾아서 실행시킵니다.
4. create 메서드는 반환값인 /blog/create 값을 보고 뷰 주소를 찾습니다.
5. 스프링은 뷰의 결과를 톰캣에 응답합니다.
6. 톰캣은 스프링에서 보내준 값을 브라우저로 다시 보내줍니다.
7. 브라우저는 스프링이 보내준 뷰의 결과 HTML을 그려줍니다.