당니의 개발자 스토리
View 환경설정 본문
View 환경설정
에러 페이지 말고 뭐라도 동작하도록 페이지를 만들어볼 거다.
제일 먼저 가장 간단한 welcome page 만들어보자.
스프링 부트는 resouces라는 폴더에 있는 static에다가 index.html을 넣어주면,
얘를 welcome 페이지로 해준다. welcome page는 그냥 도메인(웹 주소)만 누르고 들어왔을 때의 첫 화면이다.
어떻게 하냐면,
static이라고 하는 정적 페이지에
이라고 만들어주면, 이게 welcome page가 된다.
우리는 프론트가 아니니까 복붙을 하겠다.
이렇게 한 다음 서버를 껐다가 다시 켜보겠다.
hello를 눌러보면 아무것도 없으니까 에러페이지가 뜰 것이다. 페이지 소스를 봐도 그대로다.
어쨌든, 홈 화면, welcome page가 잘 된 것을 볼 수 있다.
스프링 부트는 너무 광대하기 때문에, 필요한 걸 찾아낼 수 있는 능력이 중요하다.
그래서, "어 웰컴 페이지 어떻게 하지??" 하면, 일단 spring.io 에 들어가서 Projects의 Spring Boot를 클릭하면 된다.
그리고 Learn 에 들어가면,
여러 가지가 있는데
여기에 들어가서, 컨에프해서 찾아내면 된다.
이렇듯 이 메뉴얼에서 검색할 수 있어야 한다.
방금 한 건 정적 페이지다. 내가 적어놓은 파일을 그냥 웹 서버가 그대로 웹 브라우저한테 넘겨주는 거다. 프로그래밍이 아니라, 그냥 파일을 던져준 거다.
그런데 이제 템플릿 엔진이라는 걸 쓰면, 내가 원하는 대로 루프를 넣거나 해서,
이 모양을 바꿀 수 있다. 이게 템플릿 엔진인데, 우리는 타임리프 라는 템플릿 엔진을 쓸 거다.
이제 뭔가 동작하고 프로그래밍 되는 화면을 만들어 보겠다.
Controller 라는 걸 들어봤을 거다. 웹 애플리케이션에서 첫 번째 진입점이 바로 컨트롤러다.
먼저, hello.hellospring 밑에다가 Controller 라는 packge를 만들자.
그 다음, 이 패키지에다가 HelloController 라는 클래스를 만들 거다.
그 다음에 컨트롤러라고 알려주기 위해 이 클래스 위에다가 @Controller라고 어노테이션을 적어줘야한다.
이렇게 입력하면 된다.
Java 어노테이션(Java Annotation)
어노테이션은 주석이라는 의미이다. 컴파일러에게 코드 작성 문법 에러를 체크하도록 정보를 제공하거나,
소프트웨어 개발 툴이 빌드나 배치 시 코드를 자동으로 생성할 수 있도록 정보 제공하고,
또는, 실행(런타임) 시 특정 기능을 실행하도록 정보를 제공한다.
우선은 따라쳐라.
여기까지하면, 웹 애플리케이션에서 path에 /hello 라고 들어오면,
이 메서드와 매핑이 돼서 이 메서드를 호출해준다. 스프링이 알아서 다 해준다.
파라미터의 model은 MVC(Model View Controller)의 그 model이다.
model에다가 addAttribute 해서, 여기다가 data라는 이름의 key에다가 value를 hello!! 라고 넘긴 것이다.
그 다음에 템플릿 엔진에 가볼거다. templates에 들어가서 따라 쳐라.
hello.html 파일을 만들고, 소스 코드는 복붙하겠다.
여기서 8번째 줄을 보면,
이 th가 타임리프의 th이다.
2번째 줄에 타임리프 템플릿 엔진이 선언되어 있다. 2번째 줄을 넣어주면, 이제 템플릿 엔진으로서 타임리프 문법을 쓸 수 있다.
그리고 아까
이 메서드에서 key로 data하고 value는 hello 를 넣었는데,
이 value가
여기에서 ${data} 이 부분으로 치환된다.
이런 식으로.
다시 서버를 껐다 켜보면, /hello를 들어가보면
잘 뜨는 걸 볼 수 있다. 이런 식으로 아까 index.html 처럼 정적인 페이지와는 다르게, 프로그래밍 해서 동적인 페이지를 만든 거다. 뭘로? thymeleaf 라는 템플릿 엔진으로.
페이지 소스를 열어보면, 아까 Controller에서 봤던 hello!! 이 들어있다.
그림으로 설명드리자면,
먼저, 웹 브라우저에서 localhost:8080/hello 를 딱 던지면, 이 스프링 부트는 tomcat이라는 웹 서버를 내장하고 있다고 했는데, 이 tomcat 서버가 localhost:8080/hello 를 받아서 어떻게 하냐면, "어 /hello네?" 하고, spring한테 물어보려고 Spring한테 던진다. 그럼 스프링이 helloController에 보면,
이 있었는데, 이 Get은 GET, POST 할 때 그 GET이다. 그러니까 HTTP Get, Get Method, Post Method 에서의 그 GET이다.
http url을 그냥 임의로 치고 엔터 치면 그걸 Get 방식이라고 그런다. 그래서 /hello 라고 넘어오면, 이 "hello", 이 localhost:8080/hello 라는 url에 매칭이 되는 거다.
그럼 이 helloController에 있는
이 hello 라는 메서드가 딱 실행이 되는데, 이 model 이라는 게 넘어온다.
즉, spring이 model 이라는 걸 만들어서 넣어준다. 그런데 이 메서드에서 model에다가 key는 "data"고, value는 "hello!!"를 add 해줬다. 물론, 값을 변경하고 db에 조회해와서 넣을 수도 있다.
그래서 보면, model 에다가 데이터는 hello!! 라고 이렇게 넣어놨다.
그리고 뭘 return 하냐? return의 이름이 "hello"다.
"hello"는 아까 우리가 작성했던 hello.html을 의미한다. 여기보면 return 값인 "hello"가
templates 폴더 밑에 있는 hello.html과 이름이 똑같다.
즉, return 뒤의 string과 같은 이름의 파일을 templates 폴더에서 찾고, 이 hello.html한테 가서 렌더링, 즉, 이러한 화면을 실행시키라고 하는 거다.
렌더링(Rendering)이란?
렌더링은 웹 사이트 코드를 사용자가 웹 사이트를 방문할 때 보게 되는 대화형 페이지로 바꾸는 웹 개발에 사용되는 절차다. 일반적으로 HTML, CSS, JavaScript 코드의 사용을 렌더링이라고 한다. 쉽게 말해서 실시간으로 웹 사이트가 그려지는 과정이라고 보면 된다.
스프링(viewResolver)이 hello.html을 찾아서, 템플릿 엔진이 처리해준다.
컨트롤러에서 return 값으로 문자를 반환하면 viewResolver가 화면을 찾아서 처리를 해준다.
이걸 찾을 때 기본적으로 viewResolver가 어떻게 세팅이 되어있냐면, SpringBoot 템플릿 엔진은 기본적으로 viewName Mapping 이 되는데,
이 resources 폴더에 있는 templates의 {ViewName} 이 리턴값인 hello로 바뀐다. 그래서 templates 폴더 밑에 있는 hello.html이 열리게 된다.
그래서 viewResolver가 찾은 hello.html에 들어가보면,
이 data는 아까 넘겼던 model에서의 key 값이 돼서, 그러면 얘가
이렇게 바뀌는 거다.
다음 시간에는 간단하게 빌드하고 실행을 해보겠다.
