단축키+tips
doc (tab): 기본 HTML 코드 표현
mustache 수정의 경우 서버 재시작이 아니라 망치 버튼을 눌러 새로고침할 수 있음
0. 기본 설정
🔸 JDK 17버전
🔸 IntelliJ
🔸 start.spring.io에서 프로젝트 생성
🚫 오류 발생
기존의 jdk8로는 오류 발생
IntelliJ에서 17 버전 이상이어야 spring boot 작동
https://jojoldu.tistory.com/698
1. 웹서비스 동작 원리
client<->server 간의 요청과 응답으로 이루어짐
client는 웹브라우저, server는 spring boot
🔸 tomcat이 8080 port에서 실행됨
🔸 local host: 내 컴퓨터 내의 주소
localhost:8080/hello.html과 같이 파일명을 웹브라우저에 입력할 경우, IntelliJ에서 main/resources/static 폴더에서 해당 파일명을 찾음
확인하고 싶을 때에는 웹브라우저에서 우클릭 후 view page source 클릭
2. View templates과 MVC
1. View templates
웹페이지를 만들고 그 안에 변수 적용하는 화면 담당 기술
프로젝트 생성 시 추가한 mustache가 view templates을 담당하는 도구
controller와 model 필요
1) plugin 설치
🔸 상단의 Help > Find Action의 Actions에 plugins 검색
🔸 모달창 상단의 marketplace에서 mustache 검색해 설치
2) view template 페이지 생성
🔸 src/main/resources/templates 디렉토리에 파일 작성
🔸 new file > 파일의 확장자는 mustache
(mustache는 쉽게 html을 다르게 부른다고 생각하면 됨)
3) view template 파일 작성
4) controller 생성
🔸 src/main/java/com.example.firstProject(파일명)에 new package로 controller 디렉토리 생성
🔸 만들어둔 controller 디렉토리에 java class 생성. 이때 일반적으로 (특징)Controller로 파일명 생성
5) controller 코드 작성
🔸 controller로 mustache 파일과 연결 => mustache 페이지를 응답 페이지로 설정
🔸 @Controller
해당 페이지가 controller임을 나타냄
🔸 return "페이지명";
ㄴ 응답페이지로 templates/"페이지명"을 설정하여 브라우저로 전송
🔸 @GetMapping("접속할 URL 주소")
위에 작성한 URL을 받았을 때 해당 파일로 이동
@Controller //controller라는 것을 annotation으로 선언
public class FirstController() {
@GetMapping("/hi")
public String niceToMeetYou() {
return "greetings"; //return "페이지명"을 하여 응답페이지로 templates/greetings.mustache를 찾아 브라우저로 전송시키라는 것을 의미
}
}
6) 실행
🔸 src/main/ja
va/com.example.firstProject/FirstProjectApplication에서 서버 재시작
🔸 localhost:8080/hi
[FirstController.java]
[greeting.mustache]
[결과]
7) model 사용
🔸 greetings.mustache 페이지에 mustache 문법 사용해 변수 삽입: {{변수}}
<h1>{{username}}님, 반갑습니다</h1>🔸 FirstController에 있는 함수의 파라미터에 model 삽입. 이때 Model(org.springframework.ui) 클래스 import
🔸 model 삽입한 함수 내에 addAttribute를 사용해 변수 등록: model이라는 객체가 해당 값을 해당 변수에 대입
public String niceToMeetYou(Model model) {
model.addAttribute("username", "홍팍");
return "greetings";
}8) 결과
FirstController와 greetings.mustache 수정 (FirstProjectApplication(main)은 수정X)
2. MVC 패턴
1. Controller
처리과정(logic) 담당
2. Model
데이터 담당
3. View templates
화면 담당
화면(View Templates), 처리(Controller), 데이터(Model)를 각 담당자 별로 나누는 패턴
client <-> server
server는 MVC로 역할을 나눌 수 있는데 client로부터 요청이 오면 controller로 받고, view template으로 화면을 출력하고, 화면에 출력하는 데이터를 변수로 처리할 경우 model을 통해 데이터 처리
controller에서 요청을 받을 때 GetMapping이라는 annotation으로 받음
3. view template과 layout
1. layout
화면 요소 배치하는 법
기본 레이아웃 : HeaderFooter layout
header=> 사이트 안내를 위한 navigation
footer=> 사이트 정보
[goodbye.mustache]
2. Bootstrap
🔸 HTML을 직접 만들기는 힘들기 때문에 만들어진 HTML 가져옴
🔸 기본 구조: getbootstrap.com 접속해 아래 코드 복붙
🔸 header 가져올 때에는 bootstrap > Docs에서 navbar 검색
3. layout 코드 작성
🔸 header
🔸 contents + footer
🔸 결과
4. template화
🔸 src/naub/resources/templates에 layouts 이름으로 디렉토리 생성
🔸 디렉토리 안에 header.mustache와 footer.mustache 파일 생성 후 앞에서 작성한 코드 복사 붙여넣기
🔸 사용할 때에는 {{>layouts/header}}와 {{>layouts/footer}}로 작성
[layouts/header.mustache]
[layouts/footer.mustache]
[greetings.mustache]
[goodbye.mustache]
[결과]
