Today's Dev Notes(2019-01-07)

안녕하세요, Brad입니다. 오늘 공부한 내용에 대해 정리해볼게요.

 

Q & A

• HTTP Status Code 206은 언제 사용될까요?

  • 위키피디아에서는 206(일부 컨텐츠)로 나오는데 GET 요청의 일부만 성공적으로 처리할 때 나오는 응답이라고 하네요.
  • 하지만 잘 사용되지는 않는다고 합니다.
  • 참고) 300대에서는 302, 304 응답이 중요합니다.

• 클라이언트, 서버 간 데이터를 주고받을 때의 데이터타입은 어떻게 설정해야할까요?

  • 클라이언트와 서버 간 데이터는 json형식으로 전달되게 됩니다(XML 형식으로 보낼 수도 있습니다)

  • 객체 → JSON : Serializable

  • JSON → 객체 : Unserializable

  • 객체로 전달하려고 할 때 살펴봐야할 부분

    • Json을 객체로 만들 때 setter부분과 같이 제대로 만들어지는지 확인
    • Json으로 만들 때 유실이 되었는지

• ajax 통신시 dataType: 'json' 의 의미

  • 서버에서 다시 클라이언트로 보낼 때 ReponseEntity<Void> 로 보내면 아무런 데이터가 없습니다.
  • dataType: 'json' 은 서버로부터 json형식으로 받기를 원하고 혹시 데이터가 없으면 파싱에러가 발생합니다.
  • 프론트에서 협업시 그때그때 다르게 보내면 예측하기 힘드므로 차라리 빈 객체라도 보내는 것이 좋습니다.
  • 결국 일관되게 보내는 것이 중요한데요. 그러므로 Result 객체와 같은 클래스에 데이터를 넣고 Status 코드와 함꼐 보내는 것이 좋습니다.
  • 또는 Http 상태값을 적절하게 사용하여 다르게 처리하도록 기대하게 할 수 있습니다.
  • 결국 설계를 어떻게 하느냐에 따라 다릅니다.
  • 한쪽은 Json으로 받고, 또 한쪽은 Void로 보내는 것은 좋은 방법은 아닙니다.

• 삭제되었을 때 객체간 연관관계

  • OneToMany 관계에서 List에선 삭제된 데이터를 빼는 것이 좋습니다.
  • 데이터를 가져올 때 추가적인 작업이 필요하기 때문입니다.
  • 물론 atdd에서 한 것처럼 별도의 설정을 통해 요구되는 데이터만 가져오게 할 수도 있습니다.

• 테스트 케이스 연관관계 - Fixture 한 클래스 안에 만들어야 할 필요성

  • 연관관계 때문에 한 클래스에 만드는 것은 그 필요성이 있습니다

• @Valid 사용시 Column과 Size 속성에 왜 둘 다 체크해야할까요?

  • @Column(length = 100) 은 DB에 반영되는 설정입니다.

  • @Size(max = 100) 은 실제 데이터가 유효한지 체크할 때 사용합니다. 이것은 컨트롤러에서 데이터를 받을 때 @Valid 을 통해 체크할 수 있습니다. 만약 없으면 유효 체크를 하지 않습니다.

  • 유효체크시 에러는 매개변수에 BindingResult bindingResult 을 추가하여 밑에 분기를 사용하여 따로 처리할 수 있습니다.

    if (bindingResult.hasErrors()) {
        return "qna/form";
    }
    

  • BindingResult 를 사용하지 않으면 MethodArgumentNotValidException 에러가 발생하는데요. Exception Advice에서 해당 에러를 중앙 집중적으로 처리할 수도 있습니다(BindingResult을 사용할 시에는 에러 발생하지 않습니다)

  • 그리고 유효성 체크를 하다보면 메시지를 어떻게 보낼 것인지도 고려해야 하는데요. atdd미션에서 'message.propeties'에 있는 부분이 그런 것이구요. 그리고 이러한 설정은 @Configuration 부분에서 설정할 수 있습니다(더 공부해봐야 할 부분)

  • Valid는 백엔드 입장에서 매우 중요한 부분입니다. 잘 알아야 하는 부분입니다.

  • 그럼 본론으로 돌아와 왜 DB, 컨트롤러 이 2군데에서 모두 체크해야 할까요?

    • 일단 min속성을 DB에 없습니다.
    • 차이점은 DB에서 오류를 발생하느냐, 아니면 컨트롤러에서 오류를 발생하느냐가 있습니다.
    • 또 DB에서 유효성 체크는 컨트롤러에서 사용하는 유효성 체크에 비해 제한적입니다

• Converter 사용

  • 해당 타입에 대해 Converter가 @Configuration에 등록이 되어있으면 해당 형식에 우선 맞춰서 바꿔줍니다.
  • 날짜 데이터 변환 같은경우에도 default형식이 아닌 저희가 원하는 날짜형식을 가지게 하기 위해 Converter가 필요할 수 있습니다.

 

 

Test - Mock Test

• 테스트의 여러 관점

  • Domain Test
  • Acceptance Test
  • Mock Test
  • 우선순위 : Domain > AcceptanceTest > MockTest (Pobi기준)

• 필요성

  • 물론 도메인에 로직들이 다 있으면 좋지만 만약 서비스에 로직이 있다면 해당 로직을 테스트하기 위해서 생겨났습니다.
  • 현재 저희는 객체지향적으로 많이 짜고 있기 때문에 그 필요성이 없어보이지만 실제 현업에서는 많은 로직이 서비스 레이어에 있기 때문에 필요할 수 있습니다.

• 가장 베스트는 '해당 서비스에 있는 로직을 도메인으로 옮길 수 없을까' 하는 부분을 고려하는 것이 우선입니다.

• 테스트를 각 기능마다 다 만드는 것이 좋지만 혹시 그러한 여건, 시간이 되지 않는다면 예외사항은 제외하고, 핵심 기능(회원가입, 로그인 등)이라도 테스트코드를 작성하는 것이 좋습니다.

• MockTest를 많이 만든다고 좋은 것이 아니며 그것이 필요하다면 객체지향적으로 짜고 있는 건지 의심해봐야 합니다.

 

 

git 개념 가이드(발표: doby)

• svn과의 차이, git의 장점

  • 인터넷 경유가 없는 로컬이 있어 빠릅니다.

    • 로컬 저장소가 있기 때문에 인터넷이 안되는 공간에서도 버전관리가 가능한 것입니다.

  • stage영역이 있습니다.

  • 사실 git은 개개인 간에도 로컬 저장소를 이용하여 하나는 서버역할로 할 수 있습니다. 접근권한과 IP를 알고만 있다면 사실 다른 사람의 PC에 접근하여 버전관리를 통제할 수 있는 것이죠. 이를 '분산처리'라고 볼 수 있습니다.

  • svn은 하나하나 엮는 것인 반면, git은 변화된 부분에 대해서만 감지하고 reference처럼 붙이기 때문에 빠릅니다.

• 도구 때문에 시간을 버리는 것을 막고, 또 더 단축시키기 위해 도구 사용법에 대해서도 잘 알아야합니다!

 

 

공부 정리

• ajax통신 후 해당 path로 이동해버리는 이슈 관련

  • 어제 ajax통신 후 success시에 alert창을 뜨도록 했었는데요. 해당 path로 이동해버리고 어디가 원인인지 모르고 넘어간적이 있었습니다.
  • 오늘 실습을 하면서 똑같은 이슈를 접하게 되었고 어떤 환경에서 이렇게 동작하는지를 알게되었습니다.
  • 원인은 js파일 내에 오류가 발생하면 그렇게 해당 path로 이동하였습니다.
  • 저의 경우 오류가 발생하는 경우가 ajax내 여러 설정을 할 때 ,을 제대로 찍지않고 여러 설정값을 넣으면서 발생했었습니다!
  • 별거 아니라고 생각했는데 이런 부분이 문제가 될 줄 몰랐네요. 이 부분에 유념해야겠습니다.

• ajax 처리시 $(this)의 유효범위

  • js내에 다음과 같은 메서드가 있습니다.

  function editRequest(e) {
      e.preventDefault();
      var url = $(this).parent().attr('action');
      var commentBody = $(this).closest('.comment-body');
      $.ajax({
              type : 'get',
              url : url,
              error : onError,
              success : function onSuccess(data, textStatus, jqXhr) {
                  var commentEditTemplate = $('#commentEditTemplate').html().format(url, data.contents);
                  commentBody.html(commentEditTemplate);
              }
      });
  }
  

  • 처음에 $(this) 를 $.ajax({ })안에 넣어서 사용해봤는데 제대로 인식을 안하더라구요. 그리고 밖에서 사용하니까 제대로 사용되는 것을 알게되었습니다.

• css 여러 항목에 지정할 때 안 먹히는 이슈 관련

  • css 중 float속성과 display 속성을 같이 부여할 일이 있어서 css파일에 해당 클래스명을 명시해서 적용하려고 했습니다.

  .comment-edit .comment-delete {
      display: inline;
      float: right;
  }
  

  • 처음에 위와 같이 적었습니다. 이렇게 하니까 적용이 안되더라구요. 별개의 클래스인데도 불구하고 이렇게 적으면 .comment-deit 의 하위 자식들 중 .comment-delete 에 적용하라는 말이고 그러한 태그는 없거든요.
  • 그래서 같은 레벨에 여러 클래스에 적용하려면 , 을 꼭 붙여줘야 합니다. 별 것 아닌 것 같은데 이것도 , 때문에 문제가 발생했네요.

  .comment-edit, .comment-delete {
      display: inline;
      float: right;
  }
  

  • 참고) 그리고 span태그 내 정렬이 안되는 부분에 대해선 float: right 을 통해 해결했습니다!