Spring Boot 프로젝트 생성

 

1. 정적인 페이지 templates/static 에 html 추가하기

 

templates/static 경로에 index.html 을 넣었을 때 결론적으로 로딩되는건 static 경로에 있는 index.html

 

공식 문서를 보면 static 경로에서 index.html 를 찾고, 없으면 템플릿 경로에 가서 찾는다 !

index 파일을 톰캣을 찾느다 !

 

찾을 때 정적인 파일부터 찾고, 업으면 동적인 파일 ! 없으면 페이지가 없다고 문구를 띄운다 !

https://docs.spring.io/spring-boot/reference/web/servlet.html

Servlet Web Applications :: Spring Boot

 

static 에 있는 파일을 url 경로에 /index.html 하면 보이는데 

템플릿에 있는 파일을 url 경로에 /index.html 하면 안보인다 ! 파일을 숨길 수 있다 

 

static 파일에 파일 추가 ! 단어가 두개인 경우 하이픈으로 이어주기

 

2. Spring MVC  model view controller

템플릿에 있는 파일은 확장자가 안보이는데

url 경로에 /item 하면 item.html !

 

이 작업을 하기 위해 controller 를 사용

경로는 버전 아래에 !

 

 

그럼 여기서 뭐해 ? 왜 만든거야 !

url 경로에 요청이 들어오면 컨트롤러 에서 처리해줌 

그럼 이걸 알려주기 위해서 어노테이션으로 알려줘야 함

 

그럼 다시 !

 

 

/item이라는 url요청이 서버에 들어오면 GetMapping이 똑같은 문자열을 찾아 리턴하는데 이것이 문자열이 아니라 URL로 들어온다

 

 

클래스를 객체 또는 인스턴스라 부르는데 이걸 콩이라 부르기도 함 ! 빈 !

 

 

 

The word 'haha' is not correctly spelled

The word 'haha' is not correctly spelled

 

그럼 최상위 경로 / 와 /welcome 일때는 어떻게 처리할까?

어노테이션에서 value 에서 ! 

 

 

@GetMapping 을 보면 GetMapping 도 다른 어노테이션을 쓰고 name, value, path 를 보면 대략 알 수 있다

 

 

3. HTML 파일 생성할 때 <meta charset="UTF-8"> 로 설정

 

html / css / jsp 설정 !

 

단축키도 지정해주자

 

지금 설정된 단축키가 없다 !! 

5개 단축키 설정해줌

 

 

서버 시작 : 컨트롤 + F11

서버 재시작 : 컨트롤 + 쉬프트 + F11

서버 중지 : 알트 + s

 

나머지 두개는 나중에 ~~~

 

4. VIEW

 

 

 

템플릿 엔지니어

https://www.thymeleaf.org/

Thymeleaf

 

 

thymeleaf 좋은 점이

html 태그 속성 안으로 들어와 html 구조를 유지하면서 데이터 처리가 가능함

그래서 많이 사용 !

JSP 는 보기 힘들다 !

PDF 중에 있는 내용

 

 

 

그럼 타임리프는 서버에서 처리할까 클라이언트쪽에서 해결할까

결론은 서버 !

PDF 내용

 

타임리프는 그래서 서버 사이드 렌더링 이라고 말한다 !

 

 

5. 총 정리

즉 여기까지 정리하면서 추가한 내용은

<< 스프링부트 >>
스프링부트는 스프링프레임워크에 톰캣(Tomcat) 이라는 서버를 내장하고,
여러 기능들을 추가할 수 있음

톰캣은 클라이언트의 요청을 해석하여 그에 맞는 자바 프로그램 실행한 후 그 결과를 응답해주는 웹 애플리케이션 서버

[ 단축키 지정 ]
서버 시작    : Ctrl + F11
서버 재시작 : Ctrl + Shift + F11
서버 중지    : Alt + s

[ 컨트롤러 만들어서 URL 매핑 ]
@Controller 적용시 해당 클래스는 스프링부트의 컨트롤러가 됨
@GetMapping 적용시 요청된 URL 과의 매핑을 담당
: 브라우저가 URL 요청시 스프링부트에서 요청 페이지와 매핑되는 메서드 찾아 실행
: () 소괄호 생략시 최상위 / 으로 이동 (기본값)
: 다른 URL 경로에 같은 HTML 을 사용할 시 키, 값 형태로 사용 @GetMapping({"/", "/welcome"})

[ thymeleaf ] server-side Java template engine
SSR : Server Side Rendering
장점: 첫페이지 로딩 속도 빠름, 검색엔진 최적화 가능
단점: 초기 로딩 이후 페이지 이동시 속도가 CSR에 비해 느림, 깜박임 이슈(매번 새로고침), 서버 과부하

CSR : Client Side Rendering
장점: 초기 로딩 이후 빠른 웹사이트 렌더링이 가능(웹사이트가 로딩되는 즉시 상호작용 가능, 필요한 데이터만 받아와 트래픽 감소
단점: 검색엔진 최적화에 보완필요, 초기 로딩 느림

두 방식의 차이점
1. 웹 페이지 로딩 시간
SSR -> 서버에서 그려진 화면을 먼저 띄우고 차근차근 보여줌
CSR -> 화면을 그리는데 필요한 데이터 한번에 다 받아와 화면 띄워줌

2. 서버자원 사용 정도의 차이
SSR -> 화면이 바뀔 때마다 매번 서버에 요청 -> 많은 자원 사용
CSR -> 처음에만 서버에서 데이터 받아오고 그 이후 브라우저쪽에 화면에 그림 -> 서버 자원 덜 사용

최적화 활용법
SSR -> 네트워크가 느릴 때, 페이지 상호작용이 별로 없을 때
CSR -> 네트워크 빠를 때, 페이지 상호작용이 많이 필요할 때

 

https://www.tcpschool.com/html-tag-attrs/html-xmlns