[24일차] 10개 프로젝트로 완성하는 백엔드 웹개발(Java/Spring)

수강 강의명

게시판 페이지

① resources > templates > {view name 경로} : 디렉토리와 HTML 파일을 생성한다.
② 마크업 개념인 semantic tag를 사용하여 뷰를 작성한다.
     의미를 전달하는 태그를 사용함으로써 HTML 문서에 의미를 부여한다.
     https://www.w3schools.com/html/html5_semantic_elements.asp

     <header> : 컴포넌트 파일로 작성(다른 페이지에서도 동일한 형태로 표시되어야 하는 반복적인 요소)
     <main> : <form> : 검색창, <input> : 검색 바(데이터 입력), <button> : 검색 버튼, <select> : 분류 선택
                    <table> : <thead>, <tbody>, <tfoot> 영역으로 나뉘며, 사용하지 않는 요소는 생략 가능하다.
                         <thead> : 분류(제목, 해시태그, 작성자, 작성일), <tbody> : 목업 데이터
                    <nav> : 이전, 페이지 번호, 다음
     <footer> : 컴포넌트 파일로 작성(다른 페이지에서도 동일한 형태로 표시되어야 하는 반복적인 요소)
     https://www.thymeleaf.org/doc/tutorials/3.1/usingthymeleaf.html
③ Controller : Handler Method를 생성하여 해당 경로로 이동하도록 코드를 작성한다.
④ "게시글 리스트 페이지 - 정상 호출" 테스트 코드를 실행하여 테스트를 통과하는지 확인한다.
⑤ 웹 브라우저 주소창에 localhost:8080/articles를 입력하여 접속되는지 확인한다.
     localhost:8080/articles

HTML Semantic Elements

Tutorial: Using Thymeleaf

소스 코드에 변경이 발생할 때마다 빌드를 실행하는 옵션
Preferences > 검색 : automatically > Build > Compiler > Build project automatically(v)

 

Thymeleaf : Decoupled Template Logic

Thymeleaf의 추가적인 옵션을 application.yaml에 연동시키는 방법

Thymeleaf 문법을 분리하여 표현하는 방법.
순수 마크업 문서는 렌더링되지 않은 상태에서 협업자에게 전달해도 문제 없이 작업 가능하다.
외부 프로퍼티로 제공되지 않기 때문에 Config를 통해 직접 설정해줘야 한다.
https://www.thymeleaf.org/doc/tutorials/3.1/usingthymeleaf.html#decoupled-template-logic

① config 패키지에 ThymeleafConfig를 생성하여 decoupled-template-logic를 적용하기 위한 코드를 작성한다.
    원래 존재하던 SpringResourceTemplateResolver에 decoupled-template-logic를 설정하는 메서드를 호출
    한 다음 그대로 반환한다.
② application.yaml : 사용자가 직접 만든 Propertie를 true로 설정한다.
③ 사용자가 직접 만든 프로퍼티를 IDE의 지원을 받기 위해 의존성을 추가한다.
    start.spring.io > Gradle Project(v) > ADD DEPENDENCIES... > 검색 : configuration processor
    > EXPLORE > annotationProcessor : 복사 + 붙여넣기
④ 메인 클래스에 @ConfigurationPropertiesScan를 붙여 직접 만든 Configuration Propertie를 스캔한다.
     Configuration Propertie를 사용자가 직접 만든 경우에는 스캔 과정을 거쳐야 한다.
⑤ Thymeleaf 문법을 적용한 부분을 순수 마크업 문서로 변경한다.
⑥ Recompile하여 변경 내용을 반영한 다음 웹 브라우저 주소창에 localhost:8080/articles를 입력한다.
     localhost:8080/articles

Tutorial: Using Thymeleaf

Recompile : Ctrl + Shift + F9

 

수강 화면

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

https://bit.ly/43z0P6S

패스트캠퍼스 [직장인 실무교육]

 

#패스트캠퍼스 #포트폴리오 #직장인자기계발 #환급챌린지 #포트폴리오챌린지 #패스트캠퍼스후기 #초격차패키지 #오공완