# 관련링크 - [재생목록](https://www.youtube.com/playlist?list=PLE0hRBClSk5LGSKTtuNxsOMV_R_-5WK3o) # 1강 - [24 12 16, p 13899, 1강, 타임리프/벨리데이션 예제 프로젝트 생성 후 GIT PUSH](https://youtu.be/RWXhRsR4no0) - [GITHUB - 저장소 생성 - https://github.com/new](https://github.com/new) - [GITHUB - 저장소 - https://github.com/jhs512/tem-2024-12-16](https://github.com/jhs512/tem-2024-12-16) - [커밋](https://github.com/jhs512/tem-2024-12-16/commit/76fc24b) ## 프로젝트 생성 - [스프링 이니셜라이저 - https://start.spring.io/](https://start.spring.io/) - ![img](https://i.imgur.com/KhgznNq.png) # 2강 - [24 12 17, p 13899, 2강, GET /posts/write, 글 쓰기 폼](https://youtu.be/TZHumU9w8uU) - [커밋](https://github.com/jhs512/tem-2024-12-16/commit/199f21f) ## 요청 - [GET /posts/write](http://localhost:8080/posts/write) - 폼을 사용자에게 보여줌 # 3강 - [24 12 17, p 13899, 3강, GET /posts/doWrite, 글 쓰기 처리](https://youtu.be/hkWGor_ndoM) - [커밋](https://github.com/jhs512/tem-2024-12-16/commit/1bca4b5) ## 요청 - [GET /posts/doWrite](http://localhost:8080/posts/doWrite) - 폼 데이터를 받아서 처리 후 결과를 보여줌 # 4강 - [24 12 17, p 13899, 4강, HTTP 메소드 소개, GET 은 조회, POST 는 생성, PUT 은 수정, DELETE 는 삭제](https://youtu.be/ExoJbNbIAFM) ## HTTP 메소드 표 | HTTP 메소드 | 설명 | 멱등성 | |------------|------|--------| | GET | 리소스 조회 | O | | POST | 리소스 생성 | X | | PUT | 리소스 완전 수정 | O | | PATCH | 리소스 부분 수정 | X | | DELETE | 리소스 삭제 | O | | HEAD | GET과 동일하지만 응답 본문을 제외하고 상태 줄과 헤더만 반환 | O | | OPTIONS | 대상 리소스에 대한 통신 가능 옵션을 설명 | O | | TRACE | 대상 리소스에 대한 경로를 따라 메시지 루프백 테스트 수행 | O | # 5강 - [24 12 17, p 13899, 5강, 등록을 GET으로 해도 되지만 추천되지 않는다. POST 로 변경](https://youtu.be/tcFxaXDjm8k) - [커밋 - action="/posts/write"](https://github.com/jhs512/tem-2024-12-16/commit/f6557d3) # 6강 - [24 12 17, p 13899, 6강, HTTP 메서드가 다르면 액션 Path(경로)가 같아도 된다.](https://youtu.be/ZJUUkb3vUCE) - [커밋 - action="/posts/write"](https://github.com/jhs512/tem-2024-12-16/commit/fec0498) - [커밋 - action 속성 생략](https://github.com/jhs512/tem-2024-12-16/commit/6ff3f1b) # 7강 - [24 12 17, p 13899, 7강, 제목과 내용 유효성 검사](https://youtu.be/DscTDEmUa1E) - [커밋 - 제목과 내용은 필수 입력 항목입니다.](https://github.com/jhs512/tem-2024-12-16/commit/45481a9) - [커밋 - 제목이 입력되지 않았을 경우 경고 메세지와 함께 폼을 보여줌, 이후 작업에서도 동일](https://github.com/jhs512/tem-2024-12-16/commit/2478ca8) - [커밋 - 내용을 입력해주세요.](https://github.com/jhs512/tem-2024-12-16/commit/bae7d8f) - [커밋 - 제목을 5자 이상 입력해주세요.](https://github.com/jhs512/tem-2024-12-16/commit/e2d97fe) - [커밋 - 내용을 10자 이상 입력해주세요.](https://github.com/jhs512/tem-2024-12-16/commit/786a42b) # 8강 - [24 12 17, p 13899, 8강, private String getFormHtml 메서드로 폼 템플릿 중복을 제거](https://youtu.be/woJalP_8crs) - [커밋](https://github.com/jhs512/tem-2024-12-16/commit/c4de6ef) # 9강 - [24 12 17, p 13899, 9강, @Validated 로 유효성 검사 활성화, @NotBlank, @Length 로 유효성 검사 추가](https://youtu.be/loL6miiHNV4) - [커밋 - @Validated 로 유효성 검사 활성화](https://github.com/jhs512/tem-2024-12-16/commit/66312df) - [커밋 - 커스텀 에러메세지](https://github.com/jhs512/tem-2024-12-16/commit/8693ca5) # 10강 - [24 12 17, p 13899, 10강, @ModelAttribute 는 컨트롤러의 액션메서드가 받은 입력값들을 매개변수 대신 객체로 받게 해준다.](https://youtu.be/LF9Vy82ddag) - [커밋 - @ModelAttribute 를 사용하면 입력받은 데이터를 객체에 바인딩함](https://github.com/jhs512/tem-2024-12-16/commit/b1c3af2) - [커밋 - @ModelAttribute 로 입력받은 경우에는 @Valid 를 써야만 유효성 체크를 함](https://github.com/jhs512/tem-2024-12-16/commit/60c295d) - [커밋 - @Valid 만 사용할거라면 더 이상 @Validated 는 필요없음](https://github.com/jhs512/tem-2024-12-16/commit/38d66b1) - [커밋 - @ModelAttribute 는 생략가능](https://github.com/jhs512/tem-2024-12-16/commit/148448b) ## @Validated 가 필요한 상황 vs @Valid 가 필요한 상황 표 | 상황 | @Validated | @Valid | |-----|------------|--------| | 컨트롤러에서 개별 파라미터 유효성 검사 | O | X | | @ModelAttribute 로 바인딩된 객체 유효성 검사 | X | O | | @RequestBody 로 바인딩된 객체 유효성 검사 | X | O | | 서비스 계층에서의 유효성 검사 | O | X | | 그룹 유효성 검사 필요시 | O | X | # 11강 - [24 12 17, p 13899, 11강, BindingResult 추가하면 유효성검사가 실패해도 요청이 중단되지 않는다.](https://youtu.be/FOS9i5ulfA0) - [커밋 - BindingResult 추가하면 유효성검사가 실패해도 요청이 중단되지 않는다.](https://github.com/jhs512/tem-2024-12-16/commit/a988426) - [커밋 - 유효성 결과에서 대표 오류메세지 하나 랜덤하게 불러와서 폼과 표시](https://github.com/jhs512/tem-2024-12-16/commit/1afb965) - [커밋 - 모든 오류메세지들을 보여줌](https://github.com/jhs512/tem-2024-12-16/commit/b3c940c) - [커밋 - 오류메세지들을 메세지 글자들의 사전순으로 정렬](https://github.com/jhs512/tem-2024-12-16/commit/3bff93a) - [커밋 - 오류메세지가 나오는 순서를 지정](https://github.com/jhs512/tem-2024-12-16/commit/c9bb8a3) # 12강 - [24 12 17, p 13899, 12강, PostWriteForm 을 record 로 변경](https://youtu.be/AMFzh59gcXc) - [커밋 - PostWriteForm 을 record 로 변경](https://github.com/jhs512/tem-2024-12-16/commit/396c4fd) # 13강 - [24 12 17, p 13899, 13강, 리스트 페이지 추가, 임시로 엔티티 클래스 추가, 글 쓰기가 완료되면 post 엔티티 객체가 posts 에 추가](https://youtu.be/DmMYNVvR5QI) - [커밋 - 리스트 페이지 추가](https://github.com/jhs512/tem-2024-12-16/commit/b9ba74a) - [커밋 - Post 임시 엔티티 클래스 추가, posts 에 기본적으로 3개의 글이 추가되도록](https://github.com/jhs512/tem-2024-12-16/commit/0126c92) - [커밋 - 글 쓰기가 완료되면 post 엔티티 객체가 posts 에 추가되도록](https://github.com/jhs512/tem-2024-12-16/commit/20087ac) - [커밋 - write 메서드에서 ResponseEntity 를 반환하여 실패시 400, 성공시 302 반환하도록](https://github.com/jhs512/tem-2024-12-16/commit/805da7e) # 14강 - [24 12 17, p 13899, 14강, HTML 을 자바 클래스로 부터 분리하기 위해서 타임리프 의존성 추가, 타임리프 캐시 끄기](https://youtu.be/mkZo57KgBVQ) - [커밋](https://github.com/jhs512/tem-2024-12-16/commit/8a3c555) # 15강 - [24 12 17, p 13899, 15강, POST /posts/write 에서 폼 데이터 유효성 검사 실패시 write.html 이 보여지도록](https://youtu.be/YJKovy9Mulo) - [커밋 - POST /posts/write 에서 폼 데이터 유효성 검사 실패시 write.html 이 보여지도록](https://github.com/jhs512/tem-2024-12-16/commit/317b3e5) - [커밋 - 폼 뿐안 아니라 오류메세지도 표시하도록](https://github.com/jhs512/tem-2024-12-16/commit/4a9d084) - [커밋 - `

[[${errorMessage}]]

` 를 `

` 로 바꿔도 똑같이 작동한다.](https://github.com/jhs512/tem-2024-12-16/commit/4a9d084) - [커밋 - `

` 를 `

` 로 바꾸면 HTML이 보여지는게 아니라 정상적으로 해석된다.](https://github.com/jhs512/tem-2024-12-16/commit/81d513a) # 16강 - [24 12 17, p 13899, 16강, /POST /posts/write 에서 폼 데이터 유효성 검사 실패시 보여지는 폼에 고객 데이터를 유지하도록](https://youtu.be/hSavswi_Dtw) - [커밋 - model 을 사용해서 write.html 에서 사용할 타임리프 변수를 생성](https://github.com/jhs512/tem-2024-12-16/commit/15c300e) - [커밋 - model 을 통해서 넘어온 타임리프 변수를 올바르게 사용](https://github.com/jhs512/tem-2024-12-16/commit/edbbc48) ## HTML input 엘리먼트의 대표 속성 설명 표 | 속성 | 설명 | |-----|------| | name | 서버로 전송될 때 사용되는 필드명 | | value | 입력 필드의 초기값 또는 현재값 | | placeholder | 입력 필드가 비어있을 때 보여지는 힌트 텍스트 | | type | 입력 필드의 종류 (text, password, email 등) | ## HTML input 엘리먼트와 textarea 엘리먼트 비교 표 | 구분 | input | textarea | |-----|--------|----------| | 태그 | `` | `` | | 닫는 태그 | 필요없음 | 필요함 | | 초기값 지정 | value 속성 사용 | 태그 사이에 작성 | | 여러 줄 입력 | 불가능 | 가능 | # 17강 - [24 12 17, p 13899, 17강, @ModelAttribute 매개변수는 model 작업 없이 바로 타임리프에서 사용 가능](https://youtu.be/GDsPI8fOanI) - [커밋 - @ModelAttribute 매개변수는 model 작업 없이 바로 타임리프에서 사용 가능](https://github.com/jhs512/tem-2024-12-16/commit/300c484) - [커밋 - 이전 커밋에서 GET /posts/write 를 통한 타임리프 실행을 고려하지 않아서 오류 발생, `form?.title` 로 해결](https://github.com/jhs512/tem-2024-12-16/commit/e2644cd) - [커밋 - GET/posts/write 에서도 form 객체가 만들어지도록하여 `form?.title` 코드를 다시 `form.title` 로 변경](https://github.com/jhs512/tem-2024-12-16/commit/a1df876) ## `@ModelAttribute("form") PostWriteForm form` 에 대한 고찰 - 타임리프에서 `form` 이라는 이름으로 해당 객체에 접근할 수 있다. - `@ModelAttribute("form")` 부분은 생략할 수 있다. - 생략을 한다면 타임리프에서는 `form` 이라는 이름 대신 `postWriteForm` 이라는 이름으로 접근할 수 있다. # 18강 - [24 12 17, p 13899, 18강, 인텔리제이에서 `Namespace 'th' is not bound` 라는 타임리프 관련 오류 해결법](https://youtu.be/7Akn_NjBXWg) - ![img](https://i.imgur.com/VlKNvHJ.png) - 문제상황 - ![img](https://i.imgur.com/7nnQsNR.png) - 해결방법 ## 설명 - Namespace 'th' is not bound 은 실제로는 오류가 아니다. - 단지 인텔리제이 커뮤니티가 타임리프 문법을 몰라서 생기는 문제이다. - Inspections 에서 `XML : Unbound namespace prefix` 를 꺼주면 된다. # 19강 - [24 12 18, p 13899, 19강, 여태까지의 내용 정리](https://youtu.be/hBSruoKDoH8) # 20강 - [24 12 18, p 13899, 20강, 컨트롤러 클래스 안에서 2줄 띄워쓰기 기준으로 그룹화, @ModelAttribute 생략](https://youtu.be/hJcKkzwuv5o) - [커밋](https://github.com/jhs512/tem-2024-12-16/commit/86275e4) # 21강 - [24 12 18, p 13899, 21강, th:object, th:field 로 HTML 코드량 줄이기, label 엘리먼트 도입](https://youtu.be/_iP_BslV0oE) - [커밋 - th:object](https://github.com/jhs512/tem-2024-12-16/commit/f41709d) - [커밋 - th:field](https://github.com/jhs512/tem-2024-12-16/commit/2302a23) - [커밋 - 라벨 엘리먼트 도입](https://github.com/jhs512/tem-2024-12-16/commit/54cde66) # 22강 - [24 12 18, p 13899, 22강, `${#fields.allErrors()}` 를 통해서 th:object 안에서 관련 오류 출력](https://youtu.be/Vg2ayzqsnWQ) - [커밋 - 일단은 모든 오류메세지가 보여지지만 순서가 랜덤](https://github.com/jhs512/tem-2024-12-16/commit/bf0b655) - [커밋 - 오류메세지들간의 순서 설정](https://github.com/jhs512/tem-2024-12-16/commit/e410695) # 23강 - [24 12 18, p 13899, 23강, 글 리스트의 뷰를 list.html 으로 구현](https://youtu.be/w_TQipAX-go) - [커밋 - list.html 추가](https://github.com/jhs512/tem-2024-12-16/commit/205185a) - [커밋 - 글 목록에서 각 항목에 상세페이지로 향하는 링크걸기](https://github.com/jhs512/tem-2024-12-16/commit/5857810) - [커밋 - 타임리프 규칙상 URL은 `@{}` 로 김싸야 합니다.](https://github.com/jhs512/tem-2024-12-16/commit/dfbfe06) # 24강 - [24 12 18, p 13899, 24강, 글 상세페이지 구현](https://youtu.be/B3GRMvS6PhA) - [커밋](https://github.com/jhs512/tem-2024-12-16/commit/85b8bc8) # 25강 - [24 12 18, p 13899, 25강, JPA 도입](https://youtu.be/B7n7sBmAY-s) - [커밋](https://github.com/jhs512/tem-2024-12-16/commit/1529a1b) # 26강 - [24 12 18, p 13899, 26강, 글이 없다면 샘플 데이터(글 3개) 생성되도록](https://youtu.be/rD6BmlSK8_g) - [커밋](https://github.com/jhs512/tem-2024-12-16/commit/ddced90) # 27강 - [24 12 18, p 13899, 27강, 글 리스트와 상세페이지에 날짜 노출](https://youtu.be/t8z3kwSxBNs) - [커밋](https://github.com/jhs512/tem-2024-12-16/commit/c6b879c)

게시글 상세