1-3. View 환경설정

이번 강의에서는 웹 앱의 기본 페이지인 Welcome Page를 만드는 두 가지 방법을 배웠다.

정적 파일 index.html를 단순히 브라우저에 넘겨주는 방식과

템플릿 엔진을 사용하여 좀 더 수준 높은 페이지 구성을 하는 방식이 있었다.

스프링에 대한 공식 웹 문서도 간단하게 살펴봤다.

 

index.html의 정적인 사용

src>main>resources>static 안에 index.html 파일을 새로 만들어준 뒤, 화면과 같이 강사님의 코드를 따라 적는다. 강의자료에 있는 것을 복붙해도 된다. 어차피 프론트엔드가 아니라 백엔드 강의이므로 html은 가급적 복붙해서 넣으시겠다고 한다.

 

스프링 부트는 이렇게 static file들을 관리하는 폴더 내에 index.html이라는 이름의 파일이 있다면 자동으로 그 내용을 Welcome Page로 지정해준다. 웹 앱의 기본 URL 을 치고 접속하였을 때 가장 먼저 표시되는 화면으로 지정해준다는 뜻이다.

 

main을 실행해서 서버를 돌려주고 접속해보면,

 

저번에 오류 페이지가 떴던 것과는 다르게 이번엔 index.html의 내용대로 페이지가 잘 표시된다.

 

하이퍼링크 hello를 눌러보면 /hello 의 경로로 잘 이동되기는 하나 우리가 아직 /hello의 내용물을 만들지 않았기 때문에 오류 페이지가 뜬다.

 

 

 

 

공식문서 읽기

여기서, 스프링의 각종 기능에 대해 정리된 문서를 읽는 법을 강사님이 알려주셨다.

 

아래처럼 spring.io로 들어가서 Project>Spring Boot로 들어가면 스프링 부트와 관련된 문서를 읽을 수 있다.

개발자들이 많이 쓰는 사이트들은 다크모드를 만들어놓는 게 국룰인가? 아주 좋군

Documentation에서 제일 위의 current 버전인 2.7.2의 Reference Doc.을 열어서 살펴본다.

 

이제 여기서 이곳저곳 들어가보며 내가 알고 싶은 정보를 찾으면 된다.

index.html 파일을 자동으로 찾아 Welcome Page로 지정해주는 기능에 대한 내용을 찾아보자.

 

Web이라는 페이지에 들어가보니 관련된 내용이 있다. 이 기능의 동작 방식이 설명되어있다.

 

 

 

Thymeleaf 템플릿 엔진 써보기

방금처럼 Welcome Page를 만드는 것은 그냥 정적인 html 파일을 브라우저에게 던져주고 그걸 그대로 화면에 렌더하는 방식이었다.

그런데 템플릿 엔진을 쓰면 이런 단순한 방식이 아닌 좀 더 프로그래밍적인 방법으로 화면을 구성할 수 있다고 한다.

 

웹 애플리케이션의 세 가지 구성요소인 MVC(Model, View, Controller. 장고에서는 MTV였음) 중에서 첫 번째 진입점인 컨트롤러부터 만든다.

 

먼저 hello.hellospring 하위에 controller라는 패키지를 만들고

그 하위에다가 HelloController라는 자바 클래스를 만든다.

HelloController.java의 내용을 위와 같이 채운다. 강의자료에서 복붙해도 된다.

 

@GetMapping에서 Get은 GET/POST 할 때의 그 Get이다. 즉, GetMapping은 "/hello"의 경로로 Get 요청이 들어왔을 때의 동작을 지정하는 역할을 한다.

 

근데 IntelliJ가 참 좋긴 좋은 것 같다. 함수의 인자값이 각각 무슨 역할인지를 값의 좌측에 희미하게 표시해줘서 편하다.

 

아무튼 이제 이 함수에서 리턴했을 때 찾아갈 hello.html도 만들어준다. templates 폴더 하위에 만들어주고 그 내용을 아래와 같이 채운다. 강의자료에서 복붙했다.

이제 Run 창을 열어 프로그램을 종료했다 다시 run하고 localhost:8080에 접속해보자!

 

여기서 hello를 눌러 /hello의 경로로 들어가면 (혹은 주소창의 URL 뒷부분에 직접 "/hello"를 덧붙여도 된다)

 

여기 이놈이 반응을 해서 hello 함수가 실행되고,

 

그 hello 함수의 리턴값으로 인해 이 hello.html이 실행된다. 이 때 ${data}의 값은 HelloController에서 "hello!!!!!!"라고 지정해줬기 때문에 화면에는

안녕하세요. hello!!!!!!

라고 뜰 것이다.

 

잘 뜬다.

 

data 값을 "와우"라고 바꾼 다음에 프로그램을 껐다 켜고 새로고침하면

 

와우라고 잘 바뀐다.

 

아래는 이와 관련된 Thymeleaf 웹 문서이다.

th:text라는 어트리뷰트는 자신을 포함하고 있는 태그의 내용물을 다른 것으로 대체한다.