이클립스에서 html 코딩하는데 자동완성이 제대로 안될때
[이클립스] html 파일에 코드 쓰는데 자동완성이 제대로 안 될 때 Tip
휴 이거땜에 며칠을 고통받았는지... 이클립스 자동완성 관련 글을 검색하면 보통 자바 에디터 기준으로만 나오는데 html 에디터는 따로 설정을 해 줘야 하더라고요? 이클립스로 자바 쓸 때엔 자
hgu-can.tistory.com
https://blog.naver.com/njw1204/221654918683
이클립스에서 자바스크립트 및 jQuery 자동 완성 사용하기 (Tern Eclipse IDE)
이클립스에서 웹 프론트엔드 개발을 할 때 불편한 점이 몇 개 있는데요. 그것 중에 하나가 자바스크립트의 ...
blog.naver.com
1. 부트스트랩 추가
Bootstrap
The most popular HTML, CSS, and JS library in the world.
getbootstrap.com
CSS는 헤드부분에 JS는 바디에 넣어준다. ->먼저 렌더링 후에 JS 처리를 위해
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
2. 롬복을 이용하는데 적용이 안될때 -> 롬복은 getter와 setter를 자동생성해준다.
https://www.inflearn.com/questions/45755
th:field에서 에러발생 - 인프런 | 질문 & 답변
타이핑을 잘못했나 싶어 작성되있는 html을 가져와서도 확인하였으나 동일한 현상이 발생합니다. th:field=*{nickname}'부분에서 Error during execution of processor 'org.thymeleaf.spring5.pro...
www.inflearn.com
1. 롬복 설치
2. 롬복 메이븐에서 추가 (추가되어있다면 update)
3. 프로젝트-프로퍼티스에서 어노테이션 설정 [java compiler]
타임리프를 이용해 객체에서 프로퍼티값들을 정해준다.
<!-- 타임리프 네임스페이스 설정-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div class="row justify-content-center">
<!--th:object="${signUpForm}" 객체 이용해 form을 채운다 -> 객체의 프로퍼티를 *를 이용해 사용-->
<!--needs-validation 은 html로 검증 -->
<form class="needs-validation col-sm-6" action="#" th:action="@{/sign-up}" th:object="${signUpForm}"
method="post" novalidate>
<div class="form-group">
<label for="nickname">닉네임</label>
<!-- 필수 : 닉네임 이메일(이메일 형태 검증), 비밀번호 - > 검증이 안되면 invalid-feedback -->
<input id="nickname" type="text" th:field="*{nickname}" class="form-control" placeholder="whiteship"
aria-describedby="nicknameHelp" required minlength="3" maxlength="20">
<small id="nicknameHelp" class="form-text text-muted">
공백없이 문자와 숫자로만 3자 이상 20자 이내로 입력하세요. 가입후에 변경할 수 있습니다.
</small>
<small class="invalid-feedback">닉네임을 입력하세요.</small>
<small class="form-text text-danger" th:if="${#fields.hasErrors('nickname')}"
th:errors="*{nickname}">Nickname Error</small>
</div>
<div class="form-group">
<label for="email">이메일</label>
<input id="email" type="email" th:field="*{email}" class="form-control" placeholder="your@email.com"
aria-describedby="emailHelp" required>
<small id="emailHelp" class="form-text text-muted">
스터디올래는 사용자의 이메일을 공개하지 않습니다.
</small>
<small class="invalid-feedback">이메일을 입력하세요.</small>
<small class="form-text text-danger" th:if="${#fields.hasErrors('email')}"
th:errors="*{email}">Email Error</small>
</div>
<div class="form-group">
<label for="password">패스워드</label>
<input id="password" type="password" th:field="*{password}" class="form-control"
aria-describedby="passwordHelp" required minlength="8" maxlength="50">
<small id="passwordHelp" class="form-text text-muted">
8자 이상 50자 이내로 입력하세요. 영문자, 숫자, 특수기호를 사용할 수 있으며 공백은 사용할 수 없습니다.
</small>
<small class="invalid-feedback">패스워드를 입력하세요.</small>
<small class="form-text text-danger" th:if="${#fields.hasErrors('password')}"
th:errors="*{password}">Password Error</small>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block" type="submit" aria-describedby="submitHelp">가입하기</button>
<small id="submitHelp" class="form-text text-muted">
<a href="#">약관</a>에 동의하시면 가입하기 버튼을 클릭하세요.
</small>
</div>
</form>
</div>
타임리프를 이용해 객체로 form을 채우고 해당 프로퍼티를 가져온다.
1. signUpForm에 nickname, email, password를 받는다. -> 없으면 에러 처리
th:action="@{/sign-up}" th:object="${signUpForm}"
th:field="*{nickname}"
th:if="${#fields.hasErrors('nickname')}"
th:errors="*{nickname}"
h:field="*{email}"
th:if="${#fields.hasErrors('email')}"
th:errors="*{email}"
th:field="*{password}"
th:if="${#fields.hasErrors('password')}"
th:errors="*{password}"2. 롬복을 이용해 getter, setter를 자동생성한다.
package com.demo.account;
import lombok.Data;
@Data
public class SignUpForm {
private String nickname;
private String email;
private String password;
}3. 컨트롤러에서 해당 폼이 날라오면, addAttribute( ) 메소드를 사용해 Model에 데이터를 담는다.
@GetMapping("/sign-up")
public String signUpForm(Model model) {
//model.addAttribute(new SignUpForm()); 생략 가능
model.addAttribute("signUpForm", new SignUpForm());
return "account/sign-up";
}'Server Programming > Spring Boot Full-Stack Programming' 카테고리의 다른 글
| [스프링 풀스택 클론 코딩] @Valid @Length 어노테이션 의존성 추가 (0) | 2022.08.26 |
|---|---|
| [스프링 풀스택 클론 코딩 - 회원가입] (1-4) 회원가입 뷰 (0) | 2022.08.26 |
| [스프링 풀스택 클론 코딩] 의존성 주입 방법 (0) | 2022.08.25 |
| [스프링 풀스택 클론 코딩 - 회원가입] (1-3) 회원가입 컨트롤러 (0) | 2022.08.25 |
| [스프링 풀스택 클론 코딩] JPA 즉시로딩과 지연로딩 (0) | 2022.08.24 |