반응형

FE/html 40

[Thymeleaf] th:fragment | th:replace | th:insert

th:fragment 반복되는 코드를 재사용 ex) th:fragment="head(title)" fragment 이름이 head(title) th:replace 현재 태그를 fragment 태그로 교체 ex) th:replace="fragments/common :: head('게시판')" fragments폴더의 common파일에서 head('게시판') fragment를 가져와 교체 th:insert 태그 안에 내용 삽입 fragments/common.html에서 fragment 이 fragment는 다른 html의 공통 head로 쓸것이다. 처음에는 이렇게 head에 th:replace를 쓰니까 이 head에 작성한 것들은 다 사라진다. (문제점) th:replace는 말그대로 지정한 fragment로..

FE/html 2022.02.14

[Error] form 전송시 서버에 null이 들어온다

✨ 해결 name="userId"여서 null이 들어왔다. 필드 네임 "username"으로 고침 password는 iloveyou00!,iloveyou00!로 들어가서 한 번만 들어가게 했다. form 전송시 null이 전송되면 name 속성을 살펴보자. 그리고 disabled가 있는 태그는 form 전송이 안 된다. 유저 아이디를 disabled로 해서 null이 들어왔던 것이다. readonly를 사용하면 사용자가 값을 수정할 수 없고, form 전송은 된다. 👇 참고 https://south10.tistory.com/66 input 태그 form 전송시 disabled와 readonly 차이 input 태그 form 전송시 disabled와 readonly 차이 form submit 전송시에 di..

FE/html 2022.02.08

[CSS] div 태그로 사각형 그리기

.my-box{ border : 1px solid; padding : 30px; background-color: #f5f5f5; width : 400px; } class명이 my-box인 div 태그에 스타일을 줬다. solid는 선 padding은 안쪽 여백 background-color는 사각형을 채우는 색 참고 👇 http://mwultong.blogspot.com/2006/06/html-css-div-box.html [HTML-CSS] DIV 태그로 간단한 박스(Box) 그리기 예제 div 태그에, 가령 이런 스타일을 적용해 주어야 합니다: border:1px solid; 박스를 그리기 위해서는, border 속성으로 테두리를 만들어 주면 됩니다. 위의 예에서, 굵기는 1픽셀로 지정되어 있고 so..

FE/html 2022.02.07

form onsubmit

onsubmit은 조건에 따라 form을 서버에 전송할 수 있게 한다. 가입하기 signUp 메소드 호출 결과가 true일 때, post 방식으로 /user/join에 전송 버튼의 type은 생략해도 됨(defualt가 submit) function signUp(){ var nameMsg=document.getElementById("name_msg").innerText; var id=document.getElementById("id_msg").innerText; var password=document.getElementById("pass_msg").innerText; var email=document.getElementById("check_email").innerText; var phone=documen..

FE/html 2022.01.20

회원가입 정규표현식

회원가입 정보 이름 아이디 비밀번호 연락처 이메일 🎨 javascript 정규 표현식 1. 이름 정규 표현식 /^[가-힣]{2,5}$/ 2~5 길이의 한글 2. 아이디 정규 표현식 /^(?=.*[0-9]+)[a-zA-Z][a-zA-Z0-9]{5,10}$/g 영문자로 시작하고, 5~10 길이의 영문자와 숫자의 조합 g는 모든 문자를 검색하는 플래그다. /^[a-zA-Z]+/g 첫 문자는 영문자 3. 비밀번호 정규 표현식 /(?=.*[0-9])(?=.*[a-z])(?=.*\W)(?=\S+$).{8,20}/ 소문자, 숫자, 특수문자 조합의 8~20자 4. 이메일 정규 표현식 /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+$/ 영문자/숫자/_/./- @ 영문자/숫자/-..

FE/html 2022.01.13

[Thymeleaf Error] EL1007E: Property or field 'name' cannot be found on null

org.thymeleaf.exceptions.TemplateProcessingException: Exception evaluating SpringEL expression: "user.name" (template: "user/joinForm" - line 179, col 54) Caused by: org.springframework.expression.spel.SpelEvaluationException: EL1007E: Property or field 'name' cannot be found on null 에러문구 🍟 해결 Name "${userDto.name}"을 "${userDto?.name}"로 수정하고 해결했다. ?은 null이 발생할 수 있는 프로퍼티에 넣는다. ?은 if를 의미한다. 해결 x 첫..

FE/html 2021.12.29

[CSS] pagination과 버튼 나란히 두기

쓰기 Previous 1 Next ul 태그에 margin-top:0을 줬다. 쓰기 버튼이 페이지네이션보다 밑에 있으면 두 개를 수평으로 두는 게 안 된다. 쓰기 버튼을 감싸고 있는 div 태그는 블록레벨이기 때문에 한 행을 혼자 다 차지한다. 참고 👉 https://stackoverflow.com/questions/19768389/bootstrap-alignment-of-button-and-pagination Bootstrap alignment of button and pagination I am using Twitter Bootstrap 3 to build my new website. I want to place a button on the left side and a pagination on the..

FE/html 2021.12.02

[ERROR] org.thymeleaf.exceptions.TemplateProcessingException: Exception evaluating SpringEL expression: "#temporals.createDate(post.createdDate, 'yyyyMMdd')"

org.thymeleaf.exceptions.TemplateProcessingException: Exception evaluating SpringEL expression: "#temporals.createDate(post.createdDate, 'yyyyMMdd')" java.time.format.DateTimeParseException: Text '21. 11. 25. 오후 7:32' could not be parsed at index 0 에러 로그 ✨ 해결 작성일자를 출력한다. "#temporals.createDate(post.createdDate, 'yyyyMMdd')"을 위와 같이 고쳤다. 참고 👉 https://azurealstn.tistory.com/93 [스프링 부트로 게시판 만들기] 09...

FE/html 2021.11.26

form을 submit하는 3가지 태그(button, a, input)

Logout 버튼 태그를 아래처럼 해도 동작할 줄 알았다. 참고로 버튼의 타입은 기본값이 submit이다. Logout a 태그를 쓰고 role="button"을 했지만, 동작하지 않았다. 🦄 버튼 태그 대신에 쓸수 있는 방법 input 태그와 type="submit"을 쓰는 방식은 많이 쓰인다고 한다. Logout a 태그가 속한 form의 id를 test로 했다. document.getElementById로 test 아이디를 가진 form을 가져오고, 전송한다. 스택오버플로우를 참고했다. 참고 👉 https://webdir.tistory.com/421 input type="submit" vs button 비교 프로젝트를 진행하면서 로 폼의 내용을 전달하는 경우를 많이 접하게 되었습니다. 습관적으로 b..

FE/html 2021.11.24

[Thymeleaf] 로그인, 로그아웃 버튼

🦔 먼저 implementation 'org.springframework.boot:spring-boot-starter-security' implementation 'org.thymeleaf.extras:thymeleaf-extras-springsecurity5' build.gradle의 dependencies에 추가해줬다. 로그인 로그아웃 로그아웃할 때는 따로 컨트롤러를 만들지 않아도 된다. 로그인과 로그아웃 버튼 둘중 하나만 보인다. 참고 👇 https://www.thymeleaf.org/doc/articles/springsecurity.html Thymeleaf + Spring Security integration basics - Thymeleaf Have you switched to Thymelea..

FE/html 2021.11.19
반응형