[Hanaro] 55일차 / Spring Boot (Model에서 REST API로 변환)

Model에서 REST API로 변환하기

• 작성 코드
  • Model
    • 이전 메소드 (@Controller)

      •     private List<Member> memberList = new ArrayList<>();
            
            // 회원가입
            @PostMapping("/join")
            public String join(@RequestParam("inputName") String inputName,
                               @RequestParam("inputEmail") String inputEmail,
                               @RequestParam("inputPw") String inputPw,
                               Model model) {
                Member member = new Member();
                member.setUsername(inputName);
                member.setEmail(inputEmail);
                member.setPassword(inputPw);
                member.setJoindate(LocalDate.now());
        
                memberList.add(member);
                model.addAttribute("memberList", memberList);
                System.out.println("가입한 회원 정보: " + memberList);
                return "redirect:/";
            }
            
            // 로그인
            @PostMapping("/")
            public String login(@RequestParam("inputName") String inputName,
                                @RequestParam("inputPw") String inputPw,
                                Model model) {
                String message = "로그인 실패!";
        
                for(Member member: memberList) {
                    if(member.getUsername().equals(inputName) && member.getPassword().equals(inputPw)) {
                        message = "로그인 성공!";
                        break;
                    }
                }
        
                model.addAttribute("message", message);
                return "login";
            }

  • REST로 변환
    • 회원가입
      • DTO 생성

        • @Data
          public class JoinReqDTO {
              private String inputName;
              private String inputEmail;
              private String inputPw;
          }

      • 메소드 RestController로 변환

        •     private List<Member> memberList = new ArrayList<>();
              
              // 회원가입
              @PostMapping("/join")
              @ResponseBody
              public List<Member> join(@RequestBody JoinReqDTO joinReqDTO) {
                  Member member = Member.builder()
                          .username(joinReqDTO.getInputName())
                          .email(joinReqDTO.getInputEmail())
                          .password(joinReqDTO.getInputPw())
                          .joindate(LocalDate.now())
                          .build();
          
                  memberList.add(member);
                  return memberList;
              }

      • html에서 스크립트 코드 작성

        •     const join = () => {
                  const inputName = document.getElementById("inputName").value;
                  const inputEmail = document.getElementById("inputEmail").value;
                  const inputPw = document.getElementById("inputPw").value;
          
                  fetch("/join", {
                      method: "POST",
                      headers: {
                          "Content-Type": "application/json"
                      },
                      body: JSON.stringify({
                          inputName: inputName,
                          inputPw: inputPw,
                          inputEmail: inputEmail
                      })
                  })
                      .then(response => {
                          if (response.ok) {
                              window.location.href = "/";
                          } else {
                              console.error("회원가입 실패");
                          }
                      })
                      .catch(error => {
                          console.error("오류 발생: ", error);
                      })
              }

      • 결과

        • 

       
    • 로그인
      • DTO 생성

        • @Data
          public class LoginReqDTO {
              private String inputName;
              private String inputPw;
          }

      • 메소드 RestController로 변환

        •     @PostMapping("/")
              @ResponseBody
              public Map<String, String> login(@RequestBody LoginReqDTO loginReqDTO) {
                  String message = "로그인 실패!";
                  String inputName = loginReqDTO.getInputName();
                  String inputPw = loginReqDTO.getInputPw();
          
                  for(Member member: memberList) {
                      if(member.getUsername().equals(inputName) &&
                              member.getPassword().equals(inputPw)) {
                          message = "로그인 성공!";
                          break;
                      }
                  }
          
                  Map<String, String> loginResMap = new HashMap<>();
                  loginResMap.put("message", message);
          
                  return loginResMap;
              }

      • html에서 스크립트 코드 작성

        •     const login = () => {
                  const inputName = document.getElementById("inputName").value;
                  const inputPw = document.getElementById("inputPw").value;
          
                  fetch("/", {
                      method: "POST",
                      headers: {
                          "Content-Type": "application/json"
                      },
                      body: JSON.stringify({
                          inputName: inputName,
                          inputPw: inputPw
                      })
                  })
                      .then(response => response.json())
                      .then(data => {
                          document.getElementById("alert").innerText = data.message;
                      })
                      .catch(error => {
                          console.error('Error:', error);
                      });
              }

      • 결과

        • 

          
          
          • •