하위 내용은 인프런 김영한님 강의를 바탕으로 작성되었음을 밝힙니다.
강의는 인프런을 통해 구매 가능하며, 링크 걸어두겠습니다.
https://www.inflearn.com/course/스프링-입문-스프링부트
[무료] 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 - 인프런 | 강의
스프링 입문자가 예제를 만들어가면서 스프링 웹 애플리케이션 개발 전반을 빠르게 학습할 수 있습니다., 스프링 학습 첫 길잡이! 개발 공부의 길을 잃지 않도록 도와드립니다. 📣 확인해주세
www.inflearn.com
이전 포스팅과 같은 강의를 수강했으며, 코드 개발 초심자/JAVA에 능숙하지 않은 사람을 위해 내용을 간추려 재작성하게되었습니다.
기본적으로 우리는 static 방식, template engine 방식, API 방식 중 선택해서, 서버-개발 프레임워크간 통신을 하게 됩니다.
1. static 방식
말그대로 text.html의 절대경로를 가져와 시각화 하는 방식입니다.
하단 코드를 설명하면,
GetMapping은 localhost:8080/hello라는 주소와 매핑해주는 것입니다.
Model model은 MVC pattern에서 Model을 의미하는데, 이는 html방식으로 통신할 때만 넣어줍니다. (template, API에선 사용X)
model.addAttribute에서 "name"은 html 코드에서 들어갈 변수명, "hello!!"는 html 코드에서 name 위치에 들어갈 string입니다.
return "hello"를 통해, hello.html이 호출됩니다.
@GetMapping("hello")
public String hello(Model model) {
model.addAttribute("data", "hello!!");
return "hello";
}*html 코드는 편의상 body부만 기재하겠습니다.
<body>
<p th:text="'안녕하세요. ' + ${data}" >안녕하세요. 손님</p>
</body>위에서 설명한대로 {data} 대신, "hello!!"가 들어갑니다.
이때, 원리를 간단히 설명하면, {data}가 아무것도 없었다면, 안녕하세요. 손님이 나타나야합니다.
다만, data가 할당되었고, 이에 안녕하세요. hello!!로 변하게 된 것입니다.
2. template engine방식
위 static방식과 크게 바뀌지 않습니다.
다만, @RequestParam을 통해 name을 매개변수로 받아오고, 이를 hello-template.html 에 집어넣는 것입니다.
대충 예상해보면, HTML Body부에서 {name}이라는 변수를 나타내는 코드가 나열되었을 것을 예상할 수 있습니다.
@GetMapping("hello-mvc")
public String helloMvc(@RequestParam("name") String name, Model model){
model.addAttribute("name", name);
return "hello-template";
}<body>
<p th:text="'hello ' + ${name}">hello! empty</p>
</body>실제로, html코드에서 {name}이라는 변수를 받아옵니다.
localhost:8080/hello-mvc?name=abc
나중에 http get통신을 공부하며 배우겠지만, 주소값 뒤에 ?{parameter명}={넣어줄 value}를 써서 매개변수를 받아올 수 있습니다.
이렇게 작성하게되면, template engine의 장점이 static 방식과 크게 다르지 않아보이는데요.
이점이 있나요?
확실히 이전코드를 보면, 이점을 찾아보기 어렵습니다.
이에 코드를 다음과 같이 변경 가능합니다.
@GetMapping("hello-string")
@ResponseBody //html의 body부에 직접 넣어주겠다
public String helloString(@RequestParam("name") String name){
return "hello " + name;
}@ResponseBody만 추가해줬는데,
html 코드를 만들지 않고, Body부에 직접 넣어줌으로써 코드를 단순화 할 수 있습니다.
static 통신이 필요없다보니, Model model 매개변수 받아오는 부분이 빠진 것을 확인할 수 있습니다.
localhost:8080/hello-string?name=abc
3. API 통신
위에 HTML + Tag(HTML 코드) 통신 방식은 xml로 데이터를 주고받는 형태이다.
하지만, 최근에는 json 형태로 주고받는 경우가 대부분이고, 코드는 다음과 같이 수정가능하다.
@GetMapping("hello-api")
@ResponseBody
public Hello helloApi(@RequestParam("name") String name){
Hello hello = new Hello(); //command + shift + enter : 문장 자동완성
hello.setName(name);
return hello;
//output : {"name" : "jammin"}
}
static class Hello{
//getter setter 만들기 : control + enter
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}Java 문법에서 class 내 class 선언이 가능하다.
따라서, 위와같이 static class선언이 가능하고, 간단하게 contorl + enter (mac기준)을 통해 getter + setter 생성이 가능하다.
그리고나서, Hello 객체를 선언, setName을 통해 name 받아오고, return hello를 통해 hello 객체 속성을 받아온다.
그 결과는 다음과 같다.
단순히 이름만 받아오고 싶다면, return hello가 아닌
public string ~ 함수 선언 + return hello.getName(); 코드 추가가 필요하다.
자바 언어가 익숙하지 않은 경우, Annotation + class내 class 선언에 대한 이해가 어려울 수 있다.
하지만, 빠른 습득을 위해선 하나하나 찾아보기보단 정말 이해가 안되는 부분만 대략적으로 찾아보고, 진도를 끝까지 나간뒤에
다시 강의를 수강하며(2회독, 3회독) 부족한 부분을 점진적으로 채워나가는 것을 추천한다.
'스프링 로드맵 > 스프링 입문' 카테고리의 다른 글
| [인프런 스프링 입문] 회원서비스 (0) | 2023.08.28 |
|---|---|
| [인프런 스프링 입문] 회원도메인 & 레포지토리 생성 (0) | 2023.08.28 |
| [인프런 스프링 입문] 웹 개발 기초 (MVC, API) (0) | 2022.03.22 |
| [인프런 스프링 입문] 스프링 cmd 프로젝트 빌드/실행 (0) | 2022.03.22 |
| [인프런 스프링 입문] 스프링 View 환경설정 (0) | 2022.03.22 |
