본문 바로가기
Study in Bootcamp/Main Project

[Main Project] Day 15 + 주말 : 배포 시도 및 권한 부여 확인, 코드 리팩터링

by Bhinney 2022. 11. 28.

본 글은 프로젝트를 기록하기 위해 적은 글 입니다.

수정이 될 수 있으며, 정확하지 않을 수 있습니다.


✅ 주말

📌 프론트 엔드와 통신 테스트

: 본격적으로 통신 테스트를 시작했다. 하지만... 시작부터 안되었다.. 회원 수정이 되지 않았다... 약 몇시간 동안 계속 해당 문제를 해결해보려고 시도해보았다. 아래의 코드로 컨트롤러 메서드의 매핑을 수정해보았으나 해당 문제도 해결이 되지 않았다.

@RequestMapping(method = {RequestMethod.OPTIONS, RequsetMethod.PATCH}, value = "/{seller_id}")

계속해서 문제가 해결 안되니 내 코드의 문제인가 싶어 혼자서 굉장히 심각했다. 포스트맨으로는 잘 작동이 되는데, 프런트의 화면에서만 수정이 안된 것이다... 이 문제는 많은 시간을 불태운 12시 이후... 알게되었다. 사파리에서는 잘 작동하는데 크롬에서만 이렇게 문제가 발생했던 것이다. 크롬 문제라는...데... 하하.. 프런트 분께서 PUT으로 메서드를 바꾸니까 되었다고 하셨다. 그래서 회원 로직에 메서드 수정 매핑은 PUT으로 바꾸고, config 파일의 접근 권한 설정 메서드도 PUT으로 바꾸고 CORS를 위한 config에 요청 가능한 메서드에 PUT을 추가하였다.

 

axios patch not working in chrome

I'm trying to update some articles on a drupal site using React axios. GET and POST requests work, but I can't get PATCH to work. Sending the PATCH request through Postman works just fine. I get the

stackoverflow.com

/* CORS 설정을 위한 configuration */
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

   @Override
   public void addCorsMappings(CorsRegistry registry) {
      registry.addMapping("/**")
         .allowedMethods("POST", "PUT", "GET", "DELETE", "OPTIONS", "PATCH") /* 요청 가능한 메서드 */
         .allowedHeaders("*") /* 헤더 허용 */
         .exposedHeaders("Authorization", "Refresh") /* 헤더를 통하여 토큰을 전달해야 하기 때문, 추가 헤더 허용 */
         .allowedOriginPatterns("*") /* 배포 시에는 URL 이 달라지므로 와일드 카드 사용 */
          // .maxAge(3600) /* pre flight 요청에 대한 응답을 캐싱하는 시간 */
         .allowCredentials(true); /* 쿠키 요청 허용 */
   }
}
.antMatchers(HttpMethod.POST, "/members/signup").permitAll()
.antMatchers(HttpMethod.POST, "/login").permitAll()
.antMatchers(HttpMethod.GET, "/login/**").permitAll() /* 소셜 로그인을 위해 */
.antMatchers(HttpMethod.GET, "/members/client/**").hasRole("CLIENT")
.antMatchers(HttpMethod.PUT, "/members/client/**").hasRole("CLIENT")
.antMatchers(HttpMethod.GET,"/members/seller/**").permitAll()
.antMatchers(HttpMethod.PUT, "/members/seller/**").hasRole("SELLER")
.antMatchers(HttpMethod.DELETE, "/members/**").hasAnyRole("CLIENT", "SELLER")
.antMatchers(HttpMethod.GET, "/access").permitAll()

✅ Day 15

📌 접근 권한 확인

: 접근 권한을 확인하였다. 해당 역할(권한)이 있어야 접근할 수 있도록 설정을 해주었다. 그래서 해당 uri가 잘 되어있는지 확인하였다. 그래서 하나씩 확인해보니 잘 못 적은 부분들이 존재했다. 그래서 하나씩 수정해나아갔다. 해당 uri가 빠졌을 수도 있기 때문에 .anyRequest().hasRole("ADMIN")으로 설정하여 아무도 접근할 수 없는 권한으로 부여하고 확인하였다. 결제와 문의 등 빠져있던 부분을 입력하였고, uri가 잘못되었던 부분들을 수정하였다 .anyRequest(). permitAll()이었을 때에는 해당 값이 아니여도 접근이 되었기 때문에 확인할 수 없었기 때문에 이번에 전체적으로 확인한 것이다. 그리고 배포때에는 해당 부분을 .anyRequest().authenticated()로 설정할 것 같다.

 

/* 메인 페이지는 모두 접근이 가능해야한다. */
.antMatchers(HttpMethod.GET, "/").permitAll()

/* 회원 관련 접근 제한 */
.antMatchers(HttpMethod.POST, "/members/signup").permitAll()
.antMatchers(HttpMethod.POST, "/login").permitAll()
.antMatchers(HttpMethod.GET, "/login/**").permitAll() /* 소셜 로그인을 위해 */
.antMatchers(HttpMethod.GET, "/members/client/**").hasRole("CLIENT")
.antMatchers(HttpMethod.PUT, "/members/client/**").hasRole("CLIENT")
.antMatchers(HttpMethod.GET,"/members/seller/**").permitAll()
.antMatchers(HttpMethod.PUT, "/members/seller/**").hasRole("SELLER")
.antMatchers(HttpMethod.DELETE, "/members/**").hasAnyRole("CLIENT", "SELLER")
.antMatchers(HttpMethod.GET, "/access").permitAll()

/* 소셜 수정 권한 접근 */
.antMatchers(HttpMethod.PUT, "/social/**").hasRole("SOCIAL")

/* 판매 게시판 관련 접근 제한 */
.antMatchers(HttpMethod.GET, "/boards").permitAll()
.antMatchers(HttpMethod.GET, "/boards/**").permitAll()
.antMatchers(HttpMethod.POST, "/boards").hasRole("SELLER")
.antMatchers(HttpMethod.PATCH, "/boards/*").hasRole("SELLER")
.antMatchers(HttpMethod.DELETE, "/boards/*").hasRole("SELLER")

/* 리뷰 관련 접근 제한 */
.antMatchers(HttpMethod.GET, "/boards/reviews/**").permitAll()
.antMatchers(HttpMethod.POST, "/boards/*/reviews").hasRole("CLIENT")
.antMatchers(HttpMethod.DELETE, "/boards/reviews/**").hasRole("CLIENT")

/* 주문 관련 접근 제한 */
.antMatchers(HttpMethod.POST, "/orders").hasRole("CLIENT")
.antMatchers(HttpMethod.DELETE, "/orders/**").hasRole("CLIENT")

/* 결제 관련 접근 제한 */
.antMatchers(HttpMethod.GET, "/order/pay/completed").permitAll()
.antMatchers(HttpMethod.GET, "/order/pay/cancel").permitAll()
.antMatchers(HttpMethod.GET, "/order/pay/fail").permitAll()
.antMatchers(HttpMethod.GET, "/orders/*").permitAll()
.antMatchers(HttpMethod.GET, "/order/pay/*").hasRole("CLIENT")

/* 문의 관련 접근 제한 */
.antMatchers(HttpMethod.GET, "/comments/*").permitAll()
.antMatchers(HttpMethod.POST, "/comments").hasAnyRole("SELLER", "CLIENT")
.antMatchers(HttpMethod.PATCH, "/comments/**").hasAnyRole("SELLER", "CLIENT")
.antMatchers(HttpMethod.DELETE, "/comments/**").hasAnyRole("SELLER", "CLIENT")
// .antMatchers(HttpMethod.OPTIONS, "/**").permitAll()

/* 접근 제한 확인을 위해 나머지는 접근할 수 없는 권한으로 설정 */
.anyRequest().hasRole("ADMIN")

📌 Exception 정리

: 작업을 하면서 Exception Code는 공통 클래스이다 보니 충돌하기 쉬워 1차적으로 RuntimeException으로 처리하였던 부분들이 많이 있었다. 해당 부분들을 Exception Code 이넘 클래스에 정의하고 Custom Exception으로 처리하는 방식으로 수정하였다. 하다보니 생각보다 많은 부분에 예외가 존재하여 코드 이름을 짜는 것이 고민이 되었다. 세부적인 에러메세지는 다르지만 결이 비슷한 예외들은 하나로 모은 후 처리하고, log.error()를 통해 세부적인 에러 메세지를 송출하는 방식으로 하는게 좋지 않을까 생각해보았다. 우선 token 부분에만 이렇게 처리하였는데, 내일 다시 테스트를 해보고 에러가 많이 발생하거나 예외를 찾기 힘들면 그렇게 세부적으로 log를 조금 남겨볼 생각이다. 


📌 후반부에 들어오면서 발견된 문제들(?)

: 후반부에 들어오면서 다시 코드를 정리하고, 제한사항들을 추가하다보니 초기에 설정할 때 보이지 않던 문제들이 보였다. 이것 초기에 고민을 더 했으면 좋았을 수도 있던 문제들이었다. 첫 번째는 리뷰 문제였다. 리뷰를 달 때 주문이 결제 된다면 리뷰를 달 수 있도록 하려고 하였다. 하지만 현재 상태에서는 리뷰와 주문은 직접적으로 연관관게가 되어있지 않아 어떤 주문에 대한 리뷰인지 확인하기가 어렵다. 때문에 마이페이지에서 해결하려고 해보았으나 해당 부분도 지금 당장 바꾸기에는 시간이 모자라다는 판단이었다. 그래서 해당 부분은 제외하고 그냥 모두가 리뷰를 달 수 있도록 하였다. 두 번째는 문의 문제였다. 처음에 대댓글 구현에 대해서 크게 고려하지 못하였다. 때문에 지금 와서 보니 판매자가 문의에 대한 답을 다는 것이 어렵다는 것을 알았다. 하지만 이 부분도 당장 무언가를 구현하기에는 시간이 촉박하기 때문에 모두가 문의를 달고 모두가 답을 할 수 있는 상태로 우선 진행하기로 하였다. 

프로젝트가 끝나고 나면, 이 부분에 대해서 혼자서라도 구현을 해보려고 한다.


🔥내일 할 일

  • 서버에서 소셜 로그인이 가능한지 확인
  • 프론트와의 통신에서 헤더 부분에 들어가는 토큰이 이상이 없는지 확인

댓글