이 강의를 보며.. 스프링과 친해져보겠습니다.
- 환경설정 - welcome page / thymeleaf 템플릿 엔진
- 웹 기초 - 정적 컨텐츠 / MVC와 템플릿 엔진 / API
1. 환경 설정
먼저 프로젝트를 생성하면
이러한 폴더 구조를 만나게 됩니다. 낯설군요.
자동적으로 HelloSpringApplication이 만들어져 있습니다.(프로젝트명 : hello-spring)
이 곳의 main메서드에서 시작이 됩니다.
`@SpringBootApplication` 어노테이션을 통해 스프링 부트 프레임워크를 사용하고 있습니다.
Welcome page 생성
welcome page는 말 그대로 첫 화면이겠죠.
위치는 src/resources/static/index.html 입니다.
html코드는 중요하지 않기 때문에 단순하게 작성합니다.
이후 서버를 켜보면 localhost:8080에
올라옵니다. ^^
이 페이지는 누가 봐도 정적 페이지입니다.
thymeleaf 템플릿 엔진
프로젝트 처음 설정할 때 thymeleaf 템플릿 엔진을 선택하고 시작했습니다. (종류 다양)
우선 간단하게만 설명하면 '템플릿 엔진'을 사용하면 welcome page와 달리 동적인 페이지를 만들 수 있습니다.
웹 애플리케이션에서 첫 번째 진입점은 controller입니다.
따라서 controller package를 생성하고 위와 같이 코드를 작성했습니다.
컨트롤러에서는 @Controller 어노테이션을 작성해줘야 하네요.
@GetMapping을 통해 HTTP GET 요청이 "/hello" 경로로 들어온 경우 아래의 메서드를 호출합니다.
(http url을 임의로 치고 들어가는 방식을 GET 방식이라고 함)
Model 객체는 컨트롤러에서 view로 데이터를 전달하는 데 사용되는 객체입니다.
또한 아래의 model.addAttribute("data", "hello!!"); 코드를 통해 "data"라는 이름(key)으로 "hello!!"(value)라는 문자열을 모델에 추가하고 있습니다.
마지막으로 return "hello";를 통해 hello.html 이름을 가진 view로 이동하게 됩니다.
resources/templates/hello.html 경로에 위와 같이 작성했습니다.
th는 thymeleaf의 th 입니다.
이렇게 하면 data 부분에 controller에서 value 값으로 넣어준 데이터가 들어가게 됩니다.
확인해보면 이렇게 잘 나오게 됩니다.
스프링 부트는 톰켓이라는 웹 서버를 내장하고 있습니다. (귀엽네요)
경로가 /hello로 넘어왔을 때 톰켓은 helloController에 던집니다.
그러면 helloController에 있는 @GetMapping을 통해 작성한 메서드가 실행이 되고
스프링은 model 객체에 data가 hello!!인 것을 넣어줍니다.
위에서 설명했듯 컨트롤러에서 리턴 값으로 문자를 반환하면 viewResolver가 화면을 찾아 처리합니다.
build
참고로 터미널에서
.gradlew build 하면 바로 빌드됨
cd build/libs 이동 후
java -jar hello-spring-0.0.1-SNAPSHOT.jar 로 실행시키면 스프링 뜸
나중에 서버 배포할 때는 이 파일만 복사해서 서버에 넣고 실행시키면 된다...!
이렇게 생김
2. 웹 기초
정적 컨텐츠
정적 컨텐츠는 위에서 welcome page와 같이 html 파일 그대로 화면에 올라가는 방식입니다.
다시 예를 들어
위와 같이 static 폴더에 hello-static.html 을 만들어 /hello-static.html 경로로 이동하면
그대로 반환되는 것을 확인할 수 있습니다.
/hello-static.html이 경로에 들어오면 톰켓은 이를 스프링에 넘깁니다.
스프링은 먼저 컨트롤러에 hello-static과 관련된 mapping이 있는지 확인하고 없으면 html 파일을 확인한 뒤 반환합니다.
MVC와 템플릿 엔진
MVC : Model, View, Controller
이번에는 컨트롤러를
이렇게 작성했습니다.
위에서는 data를 직접 넣어준 반면 이번에는 param을 통해 외부에서 url 파라미터로 값을 가져옵니다.
즉, HTTP 요청 파라미터 중에서 "name"이라는 이름의 값을 메서드의 파라미터 name에 매핑하라는 것입니다.
예를 들어 "/hello-mvc?name=John"과 같이 요청이 들어오면 name 파라미터에는 John 값이 전달됩니다.
리턴하는 html을 위와 같이 작성한 뒤 확인해보면
잘 나오네요.
동작 과정은 위에서 설명했으므로 생략합니다.
API
api-1)
위의 코드들과 달리 api 방식에서는 @ResponseBody를 넣어줘야 합니다.
이는 해당 메서드의 반환 값이 HTTP 응답의 body 부분으로 사용됨을 나타냅니다.
즉, 이 메서드가 반환하는 문자열이 직접 클라이언트에게 전달됩니다.(view를 거치지 않고)
즉, view 같은 것들이 필요가 없단 말씀.
html을 만들지 않아도 잘 나오네요.
문자를 반환하는 예시를 들었는데 사실 api를 사용하는 이유는 데이터 처리겠죠.
api-2)
위의 코드와 달리 Hello 객체를 생성했습니다.
HelloController class 내부에 static으로 위와 같이 class를 또 지정할 수 있습니다.(자바에서 지원하는 문법임. HelloController.Hello 이런 식)
결과 먼저 보면
반환 되는 형식이 이전과 다릅니다.
이런 {key : value} 구조를 JSON 이라고 합니다.
스프링에서는 @ResponseBody를 사용하여 리턴을 객체로 해주면 json으로 반환됩니다.
역시 마찬가지로 톰켓이 스프링에 /hello-api가 왔다고 던집니다.
해당 controller에서 @ResponseBody를 만나면 http의 응답에 데이터를 그대로 넣어버립니다.(기존에는 viewResolver에 해당 템플릿 던짐)
문자인 경우에는 바로 데이터를 넣어서 반환했습니다.(api-1) - StringConverter
그런데 객체가 오면 json 방식으로 데이터를 만들어서 반환합니다.(api-2) - JsonConverter
command + shift + enter : 코드 자동 완성
comman + n : constructor, getter/setter 등 자동 완성
commad + b : 해당 파일로 이동
인텔리제이 처음 써 봤는데.. 오.. 자동 완성 슉슉 되는 게 최고다..
아직 스프링의 기본 중 기본이지만 생각보다 꽤? 재밌어서 다행이다.
가보자고.