[Spring Framework] 게시판 구현하기(1)

회원 관련 기능을 구현

1. 요청별 method 타입을 다르게 할 수 있습니다.

1) get 요청으로 가는 경우

    - 브라우저 주소창에 주소를 입력하는 경우는 get 요청

    - a태그 클릭해서 링크로 이동

    - form의 method 속성이 get으로 설정되어 있을 때

    - redirect로 다른 요청 url을 호출할 때

    - ajax의 type이 get으로 설정되어 있을 때

 

2) post 요청으로 가는 경우

    - form의 method 속성이 post로 설정되어 있을 때

    - ajax의 type이 post로 설정되어 있을 때

 

2. get과 post 사용

1) get 요청: 데이터 목록을 조회하거나 화면으로 이동할 때 주로 사용합니다.

2) post 요청: 데이터의 입력, 수정, 삭제, 특정 데이터 조회 등에서 사용합니다.

 

게시판 화면을 만듭니다.

 

주요 기능은 회원가입과 로그인입니다.

 

이 기능을 구현하기 위해서는 사전에 mybatis dependecies를 명시해줘야 합니다.

plugins {
	id 'java'
	id 'org.springframework.boot' version '3.1.0'
	id 'io.spring.dependency-management' version '1.1.0'
}

...

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	compileOnly 'org.projectlombok:lombok'
	developmentOnly 'org.springframework.boot:spring-boot-devtools'
	runtimeOnly 'com.mysql:mysql-connector-j'
	annotationProcessor 'org.springframework.boot:spring-boot-configuration-processor'
	annotationProcessor 'org.projectlombok:lombok'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
	implementation 'org.mybatis:mybatis:3.5.13'
	implementation 'org.mybatis:mybatis-spring:3.0.2'
}

tasks.named('test') {
	useJUnitPlatform()
}

 

회원가입

먼저 완성된 화면입니다.

 

회원가입을 수행하겠습니다.

먼저 회원가입 페이지로 이동합니다.

public class UserController {
	@Autowired
	private UserService userService;
	
	//회원가입 페이지로 이동
	@GetMapping("/join.do")
	public String joinView() {
		//WEB-INF/views/home.jsp
		//WEB-INF/views/user/join.jsp
		return "user/join";
	}

 

다음에 회원가입을 진행하기 위해 PostMapping을 수행합니다. 이 내부에서 userService 내에 있는 join 메서드를 호출하고, 정보가 처리된 이후에는 login 화면으로 이동합니다.

public class UserController {
	@Autowired
	private UserService userService;
	
	//회원가입 진행
	@PostMapping("/join.do")
	public String join(UserDTO userDTO) {
		//회원가입 처리
		userService.join(userDTO);
		
		return "user/login";
	}

 

아이디 중복확인

이번에는 아이디 중복체크를 수행해보겠습니다. String 문자열 값을 반환하면 ViewResolver를 통해 해당 화면을 찾고, Response body에 HTML 화면을 반환합니다. 화면에서 반환되는 값만 받아서 사용하고 싶다면 리턴값을 Response body에 넣어서 반환합니다.

 

@Responsebody 어노테이션은 반환 값을 담아 전송하며, ViewResolver는 실행되지 않습니다. 여기서 json 형태의 데이터를 만들어 반환하는데, 두 가지 방식을 사용합니다. jsonView, objectMapper 가 해당합니다.objectMapper는 그 자체로 객체를 생성해서 json 데이터를 반환합니다. jsonMap은 자바에서 Map이 Json 형태처럼 key, value 형식의 데이터임을 활용해서 json 데이터를 구성합니다.

 

Map을 json 형태로 만든 후에는 String으로 반환하고자 다음과 같은 메서드도 사용합니다. Map을 json 형태의 데이터로 만든 후 String 으로 변환합니다. 이 때, 사용하는 함수 두 가지가 있습니다.

 

1) writerWithDefaultPrettyPrinter(): Map을 json데이터 형태로 만들어줍니다. 엔터값과 들여쓰기를 추가합니다.

2) writeValueAsString(jsonMap): json데이터를 String으로 변환합니다.

mapper.writerWithDefaultPrettyPrinter().writeValueAsString(jsonMap);

 

전체적인 코드는 아래와 같습니다.

@PostMapping("/idCheck.do")
@ResponseBody
public String idCheck(UserDTO userDTO) throws JsonProcessingException {
		int idCheck = userService.idCheck(userDTO.getUserId());

		
		ObjectMapper mapper = new ObjectMapper();

		Map<String, Object> jsonMap = new HashMap<String, Object>();
		
		if(idCheck > 0) {
			jsonMap.put("msg", "duplicatedId");
		} else {
			jsonMap.put("msg", "idOk");
		}
		
		//Map을 json 형태의 데이터로 만든 후 스트링으로 변환
		String jsonStr = mapper.writerWithDefaultPrettyPrinter()
							   .writeValueAsString(jsonMap);
		
		return jsonStr;
	}

 

 

로그인

회원가입이 끝나면, 로그인을 수행할 수 있습니다.

아래와 같은 화면을 구성하고, 내부 코드를 확인해봅니다.

 

먼저 로그인 화면으로 이동합니다.

//로그인 화면으로 이동
@GetMapping("/login.do")
public String loginView() {
    return "user/login";
}

 

다음으로 로그인 작업을 처리하고자 PostMappgin 어노테이션을 사용합니다.

아이디가 존재하는지 여부를 확인하고자, idCheck 메서드를 가져와서 나오는 값을 idCheck라는 변수에 할당합니다. 존재하지 않는다면 idCheck는 0이 될 것이며, 이를 활용해서 조건문을 수행합니다.

//로그인 처리
@PostMapping("/login.do")
public String login(UserDTO userDTO, Model model, HttpSession session) {
    //아이디가 존재하는 유저인지
    int idCheck = userService.idCheck(userDTO.getUserId());

    //아이디가 존재하지 않을때
    if(idCheck < 1) {
        model.addAttribute("message", "idNotExist");

        return "user/login";
    } 

	//아이디가 존재할 때
    else {
		...
    }

    return "redirect:/index.jsp";
}

 

아이디가 존재한다면, 이제 비밀번호를 확인해볼 수 있습니다. 비밀번호와 아이디를 모두 비교하기 위해서, userService의 login 메서드를 호출합니다. loginUser 값이 없다면, 아이디는 존재하지만 비밀번호가 일치하지 않는다는 것으로 비밀번호가 잘못 입력되었다고 메시지를 띄우고 로그인 화면으로 다시 이동합니다.

//아이디와 비번 모두 비교
UserDTO loginUser = userService.login(userDTO);

//비번이 틀렸을 때
if(loginUser == null) {
    model.addAttribute("message", "wrongPw");

    return "user/login";
}

 

마지막으로 로그인이 된다면 session에 사용자 정보를 UserDTO 형태로 저장하고 메인화면(index.jsp)로 이동시킵니다.

        ...
        //로그인되면 session에 사용자정보 저장
        //UserDTO형태로 세션에 저장
        session.setAttribute("loginUser", loginUser);
    }
    return "redirect:/index.jsp";
}

 

코드를 모두 정리하면 다음과 같습니다.

//로그인 처리
@PostMapping("/login.do")
public String login(UserDTO userDTO, Model model,
    HttpSession session) {
    //아이디가 존재하는 유저인지
    int idCheck = userService.idCheck(userDTO.getUserId());

    //아이디가 존재하지 않을때
    if(idCheck < 1) {
        model.addAttribute("message", "idNotExist");

        return "user/login";
    } 
    //아이디가 존재할 때
    else {
        //아이디와 비번 모두 비교
        UserDTO loginUser = userService.login(userDTO);

        //비번이 틀렸을 때
        if(loginUser == null) {
            model.addAttribute("message", "wrongPw");

            return "user/login";
        }

        //로그인되면 session에 사용자정보 저장
        //UserDTO형태로 세션에 저장
        session.setAttribute("loginUser", loginUser);
    }

    return "redirect:/index.jsp";
}