6. Spring Boot 게시판 생성 (1)
Spring Boot 게시판 생성
설명
◻ 로그인,로그아웃,회원가입,게시판글쓰기, 게시판글보기 가능한 웹을 제작하는 실습
◻ 기본 HTML 템플릿은 제공 받은것을 사용
순서
🔶1. 프로젝트 생성
![[Screenshot_447.png]]
◻ 1-1. PakageExploler -> 우클릭 -> new -> Spring Starter Project 클릭
![[Screenshot_448.png]]
◻ 1-2. 이름과 패키지 부분을 알맞게 수정해준후 -> Next
![[Screenshot_449.png]]
◻ 1-3. 필요한거 체크해주고 -> Finish
![[Screenshot_451.png]]
◻ 1-4. 패키지 익스플로러에 프로젝트가 생성된것을 볼수 있다.
🔶 2. HTML 템플릿 생성
![[Screenshot_453.png]]
![[Screenshot_454.png]]
◻ 2-1. 미리준비한 HTML 파일을 프로젝트에 복붙해준다.
🔶 3. 프로퍼티 설정
![[Screenshot_455.png]]
◻ 3-1. 프로퍼티 파일을 열어준다.
![[Screenshot_456.png]]
코드
spring.application.name=Board
# 1. port번호 수정
server.port=8082
# 2. DB설정(username, pw, url,driver 설정)
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/spring_db
spring.datasource.username=root
spring.datasource.password=12345
# 3. JPA설정(필수)
spring.jpa.hibernate.ddl-auto=update
spring.jpa.database-platform=org.hibernate.dialect.MySQL8Dialect
# 4. 콘솔에 SQL문 출력(선택사항)
spring.jpa.show-sql=true
spring.jpa.properties.hibernate.format_sql = true◻ 3-2. 프로퍼티 내 필요한 설정을 해준다.
- 포트번호 수정
- DB연결 설정
- JPA설정
- 기타 옵션 설정
🔶 4. 패키지 생성
![[Screenshot_457.png]]
◻ 4-1 필요한 패키지를 만들어준다.
!주의 : 기본패키지 하위에 생성을 해준다.
com.smhrd.board.controller
com.smhrd.board.repository
com.smhrd.board.entity
com.smhrd.board.service
🔶 5. 컨트롤러 생성1 (MainController)
◻ 5-1 컨트롤러 패키지 하위에 맵핑을 위한 MainController 를 클래스로 생성해준다.
![[Screenshot_458.png]]
◻ 5-2 어노테이션 작성및 페이지 이동 맵핑기능을 생성해준다.
![[Screenshot_460.png]]
코드
package com.smhrd.board.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class MainController {
// 인덱스 페이지 이동
@GetMapping(value = "/")
public String indexPage() {
return "index";
}
// 로그인 페이지 이동
@GetMapping(value = "/login")
public String loginPage() {
return "login";
}
// 회원가입 페이지 이동
@GetMapping(value = "/register")
public String registerPage() {
return "register";
}
}
🔶 6. HTML 주소 연결
◻ 6-1 header.html
![[Screenshot_461.png]]
로그인 페이지로 이동 할수 있게 button 태그에 onclick이벤트 사용하여, 로그인 페이지로 이동할 주소를 적어준다.
onclick="location.href='/login'"
◻ 6-2 login.html
![[Screenshot_462.png]]
마찬가지로 회원가입 페이지로 이동 할수 있게 button 태그에 onclick이벤트 사용하여, 회원가입 페이지로 이동할 주소를 적어준다.
onclick="location.href='/register'"
🔶 7. 컨트롤러 생성2 (UserController)
◻ 7-1 컨트롤러 패키지 하위에 맵핑을 위한 UserController 를 클래스로 생성해준다.
![[Screenshot_463.png]]
◻ 7-2 로그인,회원가입 등 기능들을 작성해준다.
![[Screenshot_464 1.png]]
◽ @Controller 어노테이션작성
◽ 요청별 @Mapping 작성 (@GetMapping, @PostMapping)
◽ 페이지를 맵핑해주므로 String반환타입의 매서드로 생성
◽ 각 기능별로 필요한 @RequestParam사용하여 매개변수를 받는다.
코드
package com.smhrd.board.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import com.smhrd.board.entity.UserEntity;
import com.smhrd.board.service.UserService;
import jakarta.servlet.http.HttpSession;
@Controller
public class UserController {
@Autowired
private UserService userService;
//로그인 기능
@PostMapping(value = "/login.do")
public String login(@RequestParam String entity) {
return "redirect:/";
}
//회원가입 기능
@PostMapping(value = "/register.do")
public String register(
@RequestParam String id,@RequestParam String pw,
@RequestParam String name,@RequestParam int age,
HttpSession session
)
{
return = "redirect:/"
}
}🔶 8. Entity 클래스 생성
◻ 8-1 UserEntity 클래스 생성
![[Screenshot_465.png]]
코드
package com.smhrd.board.entity;
import jakarta.persistence.Column;
import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import jakarta.persistence.Table;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Entity
@Table(name = "user") // 이미 만들어놓은 DB 사용 / 매개변수에 값을 넣어서 기본테이블 이름을 변경할수도 있음
@Data //게터와 세터가 모두 들어있는 어노테이션 (@Data = @Getter+@Setter)
@AllArgsConstructor
@NoArgsConstructor
public class UserEntity {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY) // PK값 : Auto Increase
private Long idx;
@Column(nullable = false, unique = true) // 제약조건 : Unique Value
private String id;
private String pw;
private String name;
private int age;
}
◻ 8-2 해당 사이트에 필요한 필드(컬럼)를 생성해준다.
ㄴ lombok 을 이용하면 더 편하게 생성이 가능하다.
◻ 8-3 설명
◽ @Entity
- 엔티티 어노테이션
◽ @Table - 이미 만들어놓은 DB 사용
- 매개변수에 값을 넣어서 기본테이블의 이름을 변경할수도 있다.
- 위에서는 @Table(name = "user")로 user테이블을 생성하도록 한다.
◽ @Data - Getter와 Setter가 모두 들어있는 어노테이션 (@Data = @Getter+@Setter)
◽ @AllArgsConstructor - 모든 매개변수가 있는 생성자 생성(lombok기능)
◽ @NoArgsConstructor - 매개변수가 없는 생성자 생성(lombok기능)
🔶 9. Repository 인터페이스 생성
개념:
- Repository는 sql문을 자바코드로 사용할수 있게 해주는 공간이다.
- 기본 제공 SQL문 및 커스텀 SQL문을 자바코드로 작동할수있게 제공해준다.
◻ 9-1. UserRepository 인터페이스 생성해준다.
![[Screenshot_466.png]]
◻ 9-2. 상속 및 타입지정
![[Screenshot_467.png]]
JpaRepository를 상속받고 제네릭 인자로 방금 생성한 UserEntity와 PK의 타입을 넣어준다.
코드
package com.smhrd.board.repository;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import com.smhrd.board.entity.UserEntity;
@Repository
public interface UserRepository extends JpaRepository<UserEntity, Long>{
}
🔶 10. Service 클래스 생성
개념 :
- 서비스는 비지니스 로직 구현 공간이다.
- 컨트롤러에 여러 기능을 한번에 넣으면 프로그램이 복잡해지고 예기치 않은 문제가 발생할수 있다.
- 따라서 결합도를 낮추기 위해 Service를 Controller와 분리하여 생성한다.
◻ 10-1 UserSercice 생성
![[Screenshot_469.png]]
◻ 10-2 회원가입 기능 코드작성
![[Screenshot_471.png]]
코드
package com.smhrd.board.service;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.smhrd.board.entity.UserEntity;
import com.smhrd.board.repository.UserRepository;
@Service
public class UserService {
@Autowired
UserRepository userRepository;
// 회원가입 기능
public String register(UserEntity entity) {
UserEntity user = userRepository.save(entity);
if(user != null) {
return "success";
}else {
return "fail";
}
}
}
◻ 10-3 설명
◽ @Service
- 서비스 어노테이션주입
◽ @Autowired - userRepository 의존성주입
◽ userRepository.save(entity) - 앞서 생성한 repository의 SQL실행 자바코드로 매개변수로 들어온 엔티티를 DB에 insert한다.
◽ return - user로 리턴값을 받고 값의 유무에 따라 컨트롤러에 String 메세지를 보낸다.
🔶 11. Controller-Service 연결
◻ 연결부 생성
![[Screenshot_473 1.png]]
코드
//회원가입 기능
@PostMapping(value = "/register.do")
public String register(
@RequestParam String id,@RequestParam String pw,
@RequestParam String name,@RequestParam int age,
HttpSession session
)
{
UserEntity entity = new UserEntity();
entity.setId(id);
entity.setPw(pw);
entity.setName(name);
entity.setAge(age);
String result = userService.register(entity);
if(result.equals("success")) {
return "redirect:/login";
}else {
return "redirect:/";
}
}◻ 11-2 설명
◽ @Autowired
- userService와의 연결을위한 의존성 주입
◽ UserEntity - 엔티티의 인스턴스 생성
- @RequestParam으로 받은 정보를 엔티티에 입력
◽ userService.resister(entity) - service에 기능을 실행시키고 리턴값으로 success / fail 문자열값을 받아온다
- 이후 비교를 하여 값에 따라 redirect 시킨다.
🔶 12. 회원가입 확인 및 유효성검사
◻ 12-1 회원가입 진행
![[Screenshot_474.png]]
값을 입력후 회원가입 진행
◻ 12-2 DB확인
![[Screenshot_475.png]]
DB에 Entity클래스에서 설정한 @Table(name = "user")로 user테이블 생성이 잘 된것을 볼수 있다.
![[Screenshot_476.png]]
select문으로 조회
![[Screenshot_477.png]]
DB에 회원가입한 정보가 잘 들어가 있는것을 볼수 있다.
◻ 12-2 유효성 검사 진행-1 (비밀번호 확인)
◽ register.html
![[Screenshot_478.png]]
비밀번호 확인을 위해 필요한건 pw,pwConfirm,pwMessage 이다.
해당 아이디값을 이용하여 javascript에서 비밀번호 확인을 진행
◽ register.js
![[Screenshot_479.png]]
(1) pw, pwConfirm, pwMessage의 아이디로 변수를 생성
(2) pw, pwConfirm의 일치여부로 pwMessage를 화면에 출력한다(일치:그린 / 불일치:레드)
- 참고! : === 는 타입과 값이 모두 일치하는지를 판단한다.
코드
$('#pwConfirm').on('input', function() {
const pw = $("#pw").val();
const pwConfirm = $("#pwConfirm").val();
const pwMsg = $("#pwMessage");
if (pw === pwConfirm) {
pwMsg.text("비밀번호가 일치합니다").css({'color': 'green'});
} else {
pwMsg.text("비밀번호가 일치하지 않습니다!").css({'color': 'red'});
}
});![[Screenshot_481.png]]
자바스크립트로 구현한 비밀번호 확인 기능이 잘 작동되는것을 볼수있다.
◻ 12-3 유효성 검사 진행-2 (아이디 중복체크)
◽ register.html
![[Screenshot_482.png]]
아이디 중복검사를 위해 필요한건 id와 중복체크 함수 이다.
해당 아이디값을 이용하여 javascript에서 버튼클릭시 중복체크 기능을 실행하도록 자바스크립트 코드를 만들어주자
◽ register.js
![[Screenshot_483.png]]
(1) 아이디 중복체크를 위한 비동기통신 코드생성
(2) 키 값 설명
- url : UserRestController에 맵핑할 주소
- method : 전송방식
- data : 통신할 대상 파라미터
- success : 응답을 받아와 반환값에따라 처리
- 입력값이 있을때 텍스트를 화면에 출력
- error : 통신실패시 로그출력
코드
// 아이디 중복 체크 함수
function checkId() {
// jQuery 선택자 수정: id 속성 선택 시 '#'을 붙여야 합니다.
const id = $('#id').val();
if (id) { // 아이디 입력값이 있을 경우에만 AJAX 통신 시도
$.ajax({
url: '/user/check-id',
method: 'GET',
data: {"id": id},
success: function(response) {
// 서버 응답 (JSON 객체)에서 hasId 값을 확인합니다.
console.log("응답 결과:", response); // 응답 확인을 위한 로그 추가
if (response && response.hasOwnProperty('hasId')) {
if (response.hasId) {
// hasId가 true이면 이미 존재하는 아이디입니다.
alert("이미 사용 중인 아이디입니다."); // 또는 "일치하는 아이디 입니다" (존재 의미)
$('#idMessage').text("이미 사용 중인 아이디입니다.").css({'color':'red'});
} else {
// hasId가 false이면 사용 가능한 아이디입니다.
alert("사용하실 수 있는 아이디입니다.");
$('#idMessage').text("사용하실 수 있는 아이디입니다.").css({'color':'green'});
}
} else {
// 예상치 못한 응답 형식일 경우
alert("아이디 확인 중 오류가 발생했습니다.");
$('#idMessage').text("아이디 확인 중 오류가 발생했습니다.").css({'color':'red'});
}
},
error: function(jqXHR, textStatus, errorThrown) {
console.log("비동기 통신 실패!");
console.log("상태:", textStatus);
console.log("에러:", errorThrown);
console.log("응답:", jqXHR.responseText);
alert("아이디 확인 중 서버 오류가 발생했습니다.");
$('#idMessage').text("아이디 확인 중 오류가 발생했습니다.").css({'color':'red'});
}
});
} else {
// 아이디 입력값이 없을 경우
alert("아이디를 입력해주세요.");
$('#idMessage').text("아이디를 입력해주세요.").css({'color':'orange'});
}
}
![[Screenshot_484.png]]
자바스크립트로 구현한 아이디 중복체크 기능이 잘 작동되는것을 볼수있다.
--->2부에이어서