64일차(1)/Spring Boot(13) : static 폴더 활용하기
- webapp-resources 폴더 대신 static 폴더를 사용하는 구조로 전환하기
STS Boot07_Final에 추가하기
- feature/upload_download 브랜치로 이동
- src-main-webapp 이 있는 구조. 직접 webapp 폴더를 만들어주고 그 안에 jsp를 위치시켜주었다.
- 정적인 자원은 resources 폴더를 만들어주었다. Spring Boot가 jsp 친화적이지 않아서!
- 하지만 Spring Boot 프로젝트에서는 jsp(webapp폴더 포함)를 아예 만들지 않을 때도 있다.
- 지금 EL, c:choose 등 jstl을 다양하게 사용하고 있는데, jsp 없이 어떻게 작성할 수 있을까?
→ thymeleaf 로 html 파일을 만들어서 동적인 페이지를 서버사이드 렌더링하는 방법이 있다.
(내가 듣는 과정에서는 thymeleaf는 배우지 않는다)
- thymeleaf 는 이 src/main/resource 안에 있는 template 폴더 안에 만든다.
- html을 활용해서 서버 사이드 렌더링을 한다.
- 그러면 정적인 자원들은? 같은 위치의 static 폴더 안에 넣는다. css, js 등을 넣어 사용할 수 있다.
- thymeleaf 를 사용하면 jsp 없이도 가능하다.
- 이런 구조는 파이썬의 장고 프레임워크와 비슷하다.
- jsp없이 html 템플릿을 사용해서 페이지를 구현한다.
- thymeleaf 만의 if문, 반복문 등 별도의 문법이 있어서 그것을 익혀서 사용하면 된다.
- 그러면 SmartEditor는 어떻게 사용하면 될까?
- SmartEditor 폴더 안에는 스마트에디터가 동작하기 위한 jsp페이지가 있다.
- 이것은 webapp을 만들지않으면 쓸 수가 없다.
→ Spring boot 용으로 사용할 수 있는 SmartEditor 로 바꿔서 사용하면 된다.
(SmartEditor 안에 있는 jsp 페이지의 기능을 다른 파일로 옮긴다)
- 바꿔놓은 파일을 보면 안에 이렇게 있는데, 이 안에는 더이상 jsp 페이지가 없다.
- jsp가 없다.
- jsp에서 하던 작업은 이 controller에서 전부 해준다!
- SmartEditor 는 이미지도 같이 저장해서 글에 같이 쓸 수 있다는 장점이 있는데,
그것을 controller 안에 통합시킨 것이다.
- 이전에는 이미지를 webapp/resources/ 안에 넣고 썼는데 resources 폴더를 아예 제거해보려고 하는 것!
- 현재 사용하는 방식은 이렇게 되어 있다.
- html에서 보면 업로드된 이미지 경로가 저장된다. 그래서 에디터 안에 이미지를 넣을 수 있는 것
- 이것을 c:/data에 업로드 되도록 바꿀 것이다.
- custom.properties 를 보면 업로드폴더를 data로 지정한상태. 여기에 다 넣을 예정!
- smart editor 폴더는 이제 정적인 자원이므로 static 안에 넣어주면 된다.
- 저 폴더 안에 있는 내용은 컨트롤러를 거치지 않고 출력해준다. 단 jsp는 static에서 사용 불가능하다.
- controller는 boot07 패키지 안에!
- 업로드된 서버 경로를 읽어와서 업로드, 이미지 출력시 이 경로를 활용한다.
- 이미지 저장시 fileLocation 을 사용한다.
- 이 경로로 알아서 받아서 사용한다.
- 컨트롤러에서는 이 경로로 받아서 응답할 준비도 해야 한다.
- 이미지의 이름은 그때그때 다르므로, 동적으로 처리해야 한다.
- 이 경로 변수를 사용하기! 이제는 /editor/ 라는 폴더안에 들어가게 할 것이다.
- 동적인 어떤 이름으로 들어오는 data/editor/ 하위의 이미지
- FileLocation에서 해당 이미지를 찾아서 응답하도록 하는 내용이다.
- SmartEditor 안에 들어오는 사진을 컨트롤러에서 처리하는 것으로 바꾸고, jsp 페이지를 삭제해버린 것이다.
- 기존 insertform.jsp에 /views/cafe/ 에 있는 insertform 파일을 덮어쓰기 해주기
- context 경로가 static 폴더라고 생각하면 된다.
- 이것의 루트 위치는 /resources/static/ 이다. 이 안에 js를 넣어 사용하는 것!
- 스킨 역할을 하는 html 페이지도 들어있어서 여기서 불러다가 사용하는 것이다.
- 수정한 후에는 기존의 smarteditor, upload 폴더는 삭제해주기
- 이렇게 하면 사진 경로가 editor로 잡힌다.
- 파일은 c:/data 로 들어간 것이고, controller가 이것을 읽어서 출력해주는 것이다.
- 이 기본 context 경로가 static이라는 것을 인식하기!!!
cafe/updateform.jsp
- updateform (카페 글 수정 폼) 도 똑같이 경로를 수정해야 한다.
- resources 폴더에 들어있는 나머지 자원(javascript)도 static으로 옮겨주기
(정적인 자원이므로)
- webapp에 jsp 페이지를 만들지 않아도 사용할 수 있도록 대비하는 것..
- webapp의 resources 폴더에 대한 의존성을 없애기 위한 것이다.
- 이 javascript는 gallery/ajaxform에서 사용한다. 수정해주기
- 여기가 static 폴더이다!
- resource 경로를 사용했던 부분을 수정해주기
cafe/detail 수정
- 똑같이 수정.
users/updateform에서 수정
- resources 폴더를 boot에서는 static으로 사용한다고 생각하면 된다.
마지막으로 빈 resources 폴더를 삭제해주기
WebConfig 수정
- resources 폴더에 자원을 넣어놓기 위해 했던 설정이므로, 이 부분도 삭제해도 된다.
- Spring Boot 수업은 여기까지!!
- 추가로 Spring Boot를 공부하고 싶다면,
webapp폴더를 완전히 없애버리고도 thymeleaf를 사용해서 동작하도록 만들어보기
그러면 완벽히 spring boot로 변환하는 것이다!
- 아직 실무에서는 jsp가 있는 쪽을 더 많이 사용한다.
- thymeleaf를 사용하면 이 설정이 필요없다. webapp폴더를 사용하지 않으므로!
- thymeleaf 가 가지고 있는 문법을 익혀서 사용하면 된다.
* Thymeleaf 문법 참고: 링크
'국비교육(22-23)' 카테고리의 다른 글
| 65일차(1)/Android App(2) : 주요 파일 구성 및 Layout 익히기 (0) | 2023.01.09 |
|---|---|
| 64일차(2)/Android App(1) : Android Studio 설치, 초기 세팅, 기초 (0) | 2023.01.06 |
| 63일차(2)/Spring Boot(13) : Boot에서 war파일 생성(3) (0) | 2023.01.05 |
| 63일차(1)/GitHub : Pull Request (0) | 2023.01.05 |
| 62일차(1)/Spring Boot(12) : 로그인 폼 css추가, 로그인정보 저장 기능 구현 (1) | 2023.01.05 |