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

수강 강의명

게시글 페이지 기능 구현(상세 화면)

게시글 화면에서 보이는 부분에 대한 데이터 연동을 완료한다. (목업 데이터(X) > DB에 넣어놓은 테스트 데이터(O))

로그인 페이지 기능은 인증 기능을 구현할 때 구현한다. (컨트롤러 레벨 테스트까지 구현 완료)

① <header>, <footer>에 목업 데이터를 넣는다.
② 실제 데이터를 넣기 위해 각각 태그에 id를 부여한다.(검색, 페이징은 추후)
     <main>와 <header>에 id를 부여한다.
     닉네임, 이메일, 생성일자, 해시태그를 넣기 위해 <section> 내 해당 태그에 각각 id를 부여한다.
     본문 영역인 <article>에 id를 부여한다.
     댓글 영역(상위)인 <ul>에 id를 부여한다.
③ 상세 페이지 thymeleaf template : id를 부여한 각 영역에 thymeleaf 문법을 적용한다.
     #main(id) : #header(id), #닉네임(id), #이메일(id), #생성일자(id), #해시태그(id), #본문(id)
     #댓글(id) : <strong>(닉네임), <time>(생성일자), <p>(내용)
     th:object : Controller의 Attribute 객체를 전달 받는다. 상위 영역에 명시하면 하위에서 *{} 형태로 생략 가능하다.
     th:datetime : th.text를 통해 특정 형식을 적용한 시간 데이터를 넣는다.
     th:remove = "all-but-first" : 첫 번째 데이터만 남겨두고 나머지는 모두 삭제한다.(반복문을 사용하기 위함)
④ Recompile한 후 Services를 실행한다.
     Recompile : [Ctrl + Shift + F9]
     Services 실행 : [Ctrl + Shift + F12]
⑤ 게시판 화면 : 각 게시글(상세 화면) 마다 DB에 저장된 데이터가 정상적으로 출력되는지 확인한다.

 

프로젝트 정리

기술적인 부분은 빠르게 확인하되 테스트 코드는 내용의 맥락을 봐야 한다.

코드 : 오타, 흐름, 디자인 확인
테스트 코드 : 어떤 조건에서 > 어떻게 실행되어서 > 어떤 결과를 내야 한다. (작업자의 의도를 파악하기 쉬움)

수강 화면

 

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

https://bit.ly/43z0P6S

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

 

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