미니 블로그 프로젝트 완성 후기 및 정리.

학교 수업이랑 병행하면서 해서 빠르게 수정하지는 못했지만,

 

결국 완성.

 

수정하고자 했던 사항은...

 

1. 여러 tsx파일에 중구난방으로 흩어져있는 axios config 변수들을 정리한다.

안쓰는건 지우고 좀 깨끗하게 리팩토링이 필요.

 

2. 비동기 처리를 사용할 때, promise 문법을 then 보다는 async await으로 교체.

 

3. toast 라이브러리를 사용.

 

4. eslint를 꼭 사용한다. 협업과 깨끗한 코드 제작을 위해 필수.

 

5. 컴포넌트 return문 안에 오브젝트로 스타일을 준 것들 다 styled-component로 바꿔주기.

 

6. 복잡하거나 중복된 함수, 메소드 리팩토링해주고, 함수와 변수 이름 더 신중하게 짓기 및 수정 작업.

 

7. 미디어쿼리 작업 하기.

 

8. 깃 리드미 작업하기.

 

9. 추가로 컨트롤러에 ControllerAdive 어노테이션을 사용하여 컨트롤러단에 더럽게 붙어있던 예외처리 코드들을 줄여 좀 더 깔끔하게 만들었다. 추가로 거기에 발생하는 익셉션마다 일치하는 enum 자료형의 정보를 클라이언트에 return해 좀 더 일관성있는 예외처리 로직을 구현했다. 해당 어노테이션에 대한 정보는 https://jeong-pro.tistory.com/195를 참고했다.

 

 

어쨋든, 리드미 작성 빼고 다 완료했다. ㅎㅎ

 

물론 난 아직 초보이기에 잘하시는 분들이 보면 문제가 많을 코드이지만 계속 이것만 붙잡고 있을 수는 없기에.. 일단 정리하고 다음 계획으로 넘어갈것이다.

 

개발을 하면서 내가 몰랐던 부분이나 까먹었던 부분을 다시 밑에 정리하려고한다.

 

 

1. MediaTypeNotAcceptableException 문제.

return ResponseEntity.status(401)
        .headers(headers)
        .body(new ExceptionDTO(ExceptionInfo.UnauthorizedUserInfo.getCode(),
                ExceptionInfo.UnauthorizedUserInfo.getDescription()));

ExceptionDTO객체를 http객체에 싣어 클라이언트에 전송하기위해 body에 싣었지만 해당 익셉션이 발생했다. 이유는 ExceptionDTO 객체의 필드를 반환하는 Getter메소드가 없었던 것. 따라서 해당 클래스의 정의에 @Getter 어노테이션을 붙여주었다. http객체의 body에 데이터를 보낼 때, ExceptionDTO의 필드를 다시 한번 Getter로 복사하여 적재해야하기때문.

 

 

2. http 상태 401 or 403 ???

401은 세션, 토큰등의 인가 수단으로 사용자의 식별이 완전하게 이루어지지 않았을 때 발생시키는 상태값이며,

403은 인가를 완료한 사용자가 권한에 넘어서는 read, write 등의 로직을 요청했을 때 발생시키는 상태값이다.

은근히 헷갈려서 정리.

 

 

3. @RequestBody vs @RequestParam

 

한동안 스프링부트를 만지지않으니까 까먹어버려 발생한 이슈였다.

 

axios로 일반 Post나 Put요청을 사용하면 보내고자 할 데이터가 http의 body에 싣어져 보내지는데, 그 데이터를 @RequestBody 어노테이션을 사용해 객체로 받아 사용할 수 있었다. 

반면, RequestParam은 목표 url의 쿼리 파라미터를 캐치할 수 있는 어노테이션이다. 즉 이 어노테이션은 http body에 있는 정보를 캐치하기 위한 어노테이션이 아닌것이다.

따라서 쿼리 스트링을 url에 추가해줄 수 있는 JS 내장 객체인 FormData를 사용하거나, for문 등을 통해 동적으로 url에 원하는 데이터를 쿼리 스트링으로 추가해주면 된다.

 

추가로 

@PutMapping("/handleLikesCount")
public ResponseEntity<Void> handleLikesCount(@RequestBody Map<String, String> map,
        HttpServletRequest req) {

RequestBody 어노테이션을 사용한다면, 사용자가 따로 제작한 객체를 사용하지 않고 Map으로도 데이터를 받을 수 있다.

Json의 key, value 구조가 Map과 일맥상통하기 때문.

물론 value의 자료형이 각각 다르다면, 클라이언트에서 모든 value의 자료형을 같게한 다음, 서버에서 다시 원래 자료형으로 복구시켜주는 추가 작업이 필요하다.

 

https://ocblog.tistory.com/49을 참고하였다.