우아한 테크코스) Lv2 - 4주차 [블로그 - 비동기 통신&API / 댓글 추가 기능 구현] 미션 후기, 코드리뷰

Lv2 - 4주차 미션 : 비동기 통신&API / 댓글 추가 기능 구현

https://github.com/woowacourse/jwp-blog

학습목표

• 비동기 방식으로 통신하는 경험을 하고 프로세스를 이해한다.
• API 문서 자동화를 경험한다.

미션

• 댓글 기능을 비동기 방식으로 구현하기
  • 기존에 구현했던 기능 중 필요한 부분은 비동기로 구현해보기
  • 댓글생성 포함해서 반드시 3군데 이상은 적용해보기
• Script를 활용하여 자동 배포하기
• RollingFileAppender를 이용하여 배포한 서버의 로그를 저장하기
• (adv) Spring REST Docs를 이용하여 문서 자동화 하기
• (adv) 파일첨부 기능 구현하기
• (adv) 외부 API 호출하기

체크리스트

• 요청에 대한 Acceptance Test를 구현했는가
• HTML 중복 제거하였는가
• 테스트의 중복을 제거하였는가
• URL 컨벤션을 지키며 구현했는가
• 서버 요청/응답 시 비동기 방식을 적절하게 사용하였는가
• 문서 작성을 자동화 하였는가
• 로그를 적절하게 잘 남기고 저장하고 있는가

---

새롭게 알게 된 것

• Ajax
• Spring Rest Docs

---

느낀점

• 학회참석으로 미국에 가있던 기간이라, 미션에 제대로 집중을 못했다.
• 당시엔 모든게 새롭다보니 기능구현에 급급해서, 지금보니 코드에 아쉬운점이 너무나 많다. 마치 지우고싶은 과거처럼 나중에 혼자서 블로그를 다시 만들어볼 시간이 생기면 좋겠다.
• 레벨1때와 달리 주차마다 등장하는 개념들이 훨씬 더 다양하고 거대하다. 따라서 그때 그때 모든걸 학습할순 없지만, 주요 키워드들을 잘 기억하고 차근 차근 학습해가야할 것 같다. 레벨2, 3에서 많은 것들이 머릿속에 들어오겠지만, 그에 잠식되지않고 큰 흐름을 놓치지 않도록 노력해야겠다.

---

내 코드, 피드백 관련

• XMLHttpRequest -> Ajax, XML보단 JSON을 사용

• @Controller보다 @RestController를 써서, @ResponseBody가 자동으로 붙는 효과를 취한다. 전자는 페이지 리턴에, 후자는 객체 리턴에 주로 사용한다.

• Ajax 테스트

  • contentType으로 보내고, accept형식으로 받을 것이다.

  • body를 예전처럼 BodyInserter로 넣지않고, JSON으로 보내기위해 Mono를 이용한다. (아직 Mono개념 깊게파진말고 일단 이용)

  • jsonPath로 검증

    @Test
    public void test1CreateGithubRepository() {
      RepoRequest repoRequest = new RepoRequest("test-webclient-repository", "Repository created for testing WebClient");
    
      webTestClient.post().uri("/api/repos")
              .contentType(MediaType.APPLICATION_JSON_UTF8)
              .accept(MediaType.APPLICATION_JSON_UTF8)
              .body(Mono.just(repoRequest), RepoRequest.class)
              .exchange()
              .expectStatus().isOk()
              .expectHeader().contentType(MediaType.APPLICATION_JSON_UTF8)
              .expectBody()
              .jsonPath("$.name").isNotEmpty()
              .jsonPath("$.name").isEqualTo("test-webclient-repository");
    }

• Spring Rest Docs

  • 차근차근 따라하기
  • 강의문서 및 필기 참고
  • Rest Docs vs Swagger

• 테스트할 때 사용하는 3가지 객체 : MockMvc, WebTestClient, RestAssured

• 스키마, 어떻게 받을 것인가에 대한 표준. 계속해서 변경된다, map으로 다 받아버리는 방식도 있다. 하지만 그러면 런타임에만 알수있고, 클래스로 만들어야 컴파일타임에 확인가능하다. map을 꺼리고 가급적 클래스를 만들자

프론트

• `var`를 지양하고, `const`와 `let`을 이용하자!

• 백틱 유용!!

• controller, service와 같이 백엔드처럼 프론트코드로 구조화시킬 수 있었다. 그 과정에서 자연스레 아래와 같이, 하나하나 분리해갈 수 있었다.
  • 로직 분리
  • API 분리
  • 중복되는 상수, String 등 분리
  • HTML 마크업부분을 별도의 .js로 분리
  • ...

/js/template.js

const commentTemplate = (comment) => {
    return 
        `<div class="comment">
            <div>
            ...
        </div>
     </div>`
}

• 이땐 몰랐지만 레벨 후반에 토비스프링을 읽으며, @DirtiesContext의 기능과 성능이슈에 대해 이해할 수 있게 되었다