홍팍 스프링부트 강의 정리1

복습용으로 기록, 모든 내용이 있지 않습니다.

https://www.inflearn.com/course/%EA%B0%9C%EB%85%90%EC%8B%A4%EC%8A%B5-%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8-%EC%9E%85%EB%AC%B8/dashboard

 

1.웹 서비스의 동작 원리

3강

웹서비스는 클라이언트와 서버의 요청과 응답으로 동작

클라이언트:브라우저 / 서버:스프링부트

 

url주소 localhost:8080 의미

localhost: 내 컴퓨터 주소(우리집) 8080:포트번호, (우리집 방번호)

localhost:8080은 우리집 방번호 요청하는 것

 

localhost:8080/hello.html

localhost 내컴퓨터 8080번호에서 수행되고 있는 서버에게 hello.html을 요청하는 것

이렇게 파일명(hello.html)을 명시할 경우 기본적으로 src>main>resources>static으로 들어가서 hello.html을 찾고 이 파일을 응답으로 보내줌

헬로월드 페이지를 우클릭-페이지 소스 보기를  누르면 hello.html 파일과 같은 소스임을 확인할 수 있다.

 

 

2.뷰 템플릿과 MVC 패턴

4강

미션:MVC 패턴을 활용한, 템플릿 페이지를 만들기

 

View Templates:화면을 담당하는 기술, 웹페이지를 하나의 틀로 만들고 변수를 삽입하게 함

틀이 되는 페이지가 변수 값에 따라서 수많은 페이지가 됨, Mustache가 뷰템플릿을 만드는 도구(뷰템플릿엔진)

Controller(logic):처리 과정을 담당

Model(data):데이터를 담당

이렇게 Model, View, Controller가 각 담당을 하는데 이를 MVC패턴이라 함

 

2-1 View Templates 제작

mustache:지금은 html 이라고 생각하기

doc+tab 키 :기본 html 서식 출력

 

{{variable}} :뷰페이지에 변수 삽입 =>뷰페이지를 템플릿화해줌

username:변수로 값에 따라 그대로 반영

username이 홍팍이면 홍팍님 hello~ 나오고 홍길동이면 홍길동님 hello~ 나옴

 

username변수를 사용하기 위해 Model을 사용해야함, 안 그러면 서버 내부에서 에러

2-2 Controller 제작

MVC 중 V 만들었으니까 C 만들 차례

@Controller :컨트롤러 선언

@GetMapping:URL 요청 연결,  ()안에 접속할 url을 넣어야함

return "페이지명"; :응답페이지 설정

아까 만든 View Templates 파일명을 return에 적기(greetings)

그러면 templates/greetings.mustache 파일을 찾아서 브라우저로 전송해준다. 

 

2-3 Model 사용하기

View Templates를 활용하기 위해서 

Contoller 작성한 곳 메서드에 모델 받아오기를 파라미터에 추가한다.

public String niceToMeetYou(Model model){

변수 등록 : addAtrribute()

model.addAttribute("username","hongpark");

변수 등록하고 홍팍 값 넣기 

model이라는 객체가 홍팍이라는 값을 username 이름에 연결시켜서 보내준다.

 

2-4 총정리

ocalhost:8080/hi 입력 -> Controller 안 모델 객체가 hongpark을 username에 연결 시키고

 

Model(표)

Key	Value
username	hongpark

View Templates {{username}}에 들어가 greetings.mustache로 응답한다. 

 

3 MVC의 역할과 실행흐름

5강

미션:뷰 템플릿 페이지가 출력되기까지, MVC의 역할과 실행 흐름을 설명하기

Controller는 Client로부터 요청을 받고 View는 최종 페이지를 만들어주고 Model은 최종 페이지에 쓰일 데이터들을 View에게 전달함

 

4 뷰 템플릿과 레이아웃

6강

뷰 템플릿 페이지에 헤더-푸터 레이아웃을 적용하시오

가장 기본이 되는 레이아웃:헤더-푸터 레이아웃

header - 사이트 안내를 위한 Navigation

content 

footer - 사이트 정보를 적는다.

상단 망치 버튼 누르면 굳이 서버를 작동 시키지 않아도 빠르게 빌드할 수 있다.

 

4-1 레이아웃 템플릿 생성

템플릿화:부트스트랩 코드들을 파일화해서 변수화 시키는 것

방금 hi 페이지에 관해 부트스트랩으로 꾸몄는데 bye도 똑같이 하려니 힘든 거

그래서 변수화하려고 하는 것이다.

 

파일을 불러올 때, 뷰페이지를 부를때는 꺽쇠를 추가