Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

타임리프에 대해서 #22

Open
moonwonki opened this issue Aug 31, 2023 · 8 comments
Open

타임리프에 대해서 #22

moonwonki opened this issue Aug 31, 2023 · 8 comments

Comments

@moonwonki
Copy link
Collaborator

moonwonki commented Aug 31, 2023

프론트엔드 작업을 같이 하다보니 타임리프에 대해서 간단하게 설명할 필요가 있어서 그 부분을 이슈에 적어놓겠습니다!

Thymeleaf는 뷰 리졸버 역할을 하는 템플릿 엔진입니다.

저희가 사용자에게 보내주려는 건 html 파일과 그거와 관련된 css, js 파일입니다.
html과 css, js가 사용자의 브라우저에서 레고 맞추듯이 합쳐진 후에 사용자에게 보여지는 겁니다.

이 합쳐지는 과정은 어디까지나 사용자의 브라우저에서 일어나는 것일 뿐, 백엔드와는 아무런 관련이 없습니다.
사용자가 버튼을 누르고, 무언가를 입력하는 과정도 전부 사용자의 브라우저에서 일어나는 겁니다.
js를 통해 동적으로 html 내부의 무언가를 바꾸는 것도 백엔드와는 아무런 관련이 없습니다.
이것도 전부 브라우저 내부에서만 일어납니다.

백엔드에서는 그저 미리 작성된 파일을 보내주는 역할만 하는 겁니다.

그렇다면 백엔드에서 어떻게 이 html을 바꿀 수 있을까요?
사용자나 작업의 상태에 따라 다른 정보를 html 내부에 채워서 보여줘야 하는 것인데, 미리 작성된 "정적인" 파일만 보낼 수 있다면 웹페이지를 만드는게 불가능하잖아요.

이 부분에서 thymeleaf가 작동합니다. 기존에 저희가 작성한 html에서 th: 표시가 된 부분이 있습니다.
html을 보낼 때, 백엔드에서 thymeleaf가 작성된 html에 수정을 가해서 정보를 채워넣는 것입니다.

비유를 하자면 저희가 th: 표시를 해서 조리법을 미리 적어두면, thymeleaf가 밀키트 조합하듯이 html을 조리해서 완성한 후에, 그것을 브라우저로 쏴주는 겁니다.
브라우저에서는 조리된 음식(html)을 같이 넘겨받은 js와 css랑 잘 조합해서 사용자에게 보여줍니다.

이 때, 중요한 점은 thymeleaf가 template 안에 있는 파일만 인지할 수 있다는 겁니다. thymeleaf가 수정하지 못하는 js, css 파일들은 그냥 static에 넣어두셔야 합니다. 물론 html 안에 js를 script 태그로 넣거나, css를 styles 태그로 넣을 수도 있습니다. 이 경우는 thymeleaf가 해당 코드에 어느 정도 관여할 수 있습니다.

@moonwonki
Copy link
Collaborator Author

다만 어디까지는 백엔드에서 html을 조작하는 건 어느 정도 무리가 있다고 저는 개인적으로 그렇게 생각합니다.
thymeleaf 하나에만 의존해서 html을 채워넣는 셈이니깐요.
난이도가 오를 수 밖에 없다고 생각해요.

다행히 thymeleaf가 업데이트를 많이 해서 이런 식으로 html을 백엔드에서 최대한 조작하고 보내주는 형태가 점점 늘어나고 있습니다. (SSR: server side rendering이라고 합니다!)

@HSPU
Copy link
Collaborator

HSPU commented Aug 31, 2023

타임리프에 대해 정리해주셔서 덕분에 이해했습니다 감사합니다!
한 여섯 번 정도 더 읽으니 더 이해가 됐습니다

@liv303
Copy link
Collaborator

liv303 commented Aug 31, 2023

  • thymeleaf가 서버가 html에 조작할 수 있도록 돕는 라이브러리
  • thymeleaf는 templates 안의 파일만 인지하므로 js와 css는 html 안에 있어야 조작 가능
    라는 말씀이시군요!

프로젝트와 관련 없지만 개인적으로 백엔드에서 html을 직접 조작하는 것이 현업에서 쓰이는지 궁금하긴 합니다. 상황에 따라 다르겠지만 백엔드가 html에 조작을 가하는 상황이 개인 프로젝트나 1인 풀스택이 아니고서는 있을지 궁금하네요!

@liv303
Copy link
Collaborator

liv303 commented Aug 31, 2023

좋은 정보 감사합니다! 타임리프를 왜 도입하셨는지 알 것 같습니다!

@HSPU
Copy link
Collaborator

HSPU commented Aug 31, 2023

저도 시윤님 질문이 궁금합니다. 말씀하신 SSR 부분이 늘어나는 추세라면 현업에서도 쓰이기 때문일까요?

@moonwonki
Copy link
Collaborator Author

제가 들은 바로는 프론트엔드 프레임워크가 점점 발전하면서 서버에서 html을 렌더링하는게 점점 사장될 것이라는 예측과는 다르게, 의외로 SSR이 꾸준히 사용되고 있다고 합니다. 정확한 워딩은 기억이 안 나지만, view resolver의 개념에 대해서는, 그리고 thymeleaf의 간단한 사용법 정도는 알아두시는게 좋을 것 같습니다!

@moonwonki
Copy link
Collaborator Author

스프링 권위자 김영한 개발자님의 말에 따르면
"Thymeleaf는 각 잡고 하면 하루 만에 마스터 할 수 있어요~"

@gmlcjf0326
Copy link
Collaborator

gmlcjf0326 commented Aug 31, 2023

그럼 백엔드 개발자는 알고보면 다들 풀스택...?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants