12/7 TIL | 레벨 테스트 작업 일지 Day 10. 오늘은 TIL이 긴데.. 그만큼 한 게 많다는 것이겠죠(찡긋)

🔙 이전 시리즈

12/6 TIL | 레벨 테스트 작업 일지 Day 9. 집중 집중 집중👏

---

오늘 작업 목표 달성률(75%)

✅ 주문 조회 페이지
✅ 주문 상세 페이지
      🔗 F/E PR, B/E PR
✅ 스타일링(조회/상세)
🟩 예외처리(작업 중💬) 

작업 회고

1. 중첩된 Dto 이름 관리(?)법

오늘은 주문 조회 페이지, 상세 페이지를 구현했다. 작업하면서 새롭게 알게 된 사실은 중첩된 DTO(Data Transfer Object)의 이름을 수정하고자 할 때는 getter 뒤의 이름을 수정하면 된다는 것이다. 그간 1 depth의 DTO만을 사용했어서 이 부분을 고려해볼 일이 전혀 없었는데, 오늘 작업하면서 product로 불러와지길 바라는 것이 아래와 같이 productDto로 반환되는 것이다!

productDto로 반환되는 모양새

이는 OrderDto의 ProductDto productDto를 ProductDto product로 수정하여 해결할 수 있었다.

// Before
public class OrderDto {
    // 생략..
    
    private ProductDto productDto;

    public ProductDto getProductDto() {
        return productDto;
    }
}

// After
public class OrderDto {
    // 생략..
    
    private ProductDto product;

    public ProductDto getProduct() {
        return product;
    }
}

그동안 습관처럼 앞에 타입에 맞춰 변수명도 똑같이 쓰는 식이었는데, 이번에도 작업하면서 똑같이 그렇게 했다가 내가 이런 것들에 대해서 생각 없이 쓰고 있었다는 것을 느꼈다. 아샬님이 피드백으로 항상 '우연에 따라가지 마라'라는 말씀을 하셨는데, 이게 딱 그 모양새였던 거 같아서 다시금 경각심을 가질 수 있었다.

productDto가 아닌 원했던 product로 제대로 반환됨

 

2. IntelliJ MockMvc 한글 깨짐 방지법

이번 마카오 기프트샵을 구현하면서 그간 영어로 테스트했을 때와는 달리 상품의 내용이 한글이라 결과 내용이 IntelliJ에서 깨지는 것을 확인할 수 있었다.

IntelliJ MockMvc 한글 깨짐 현상

지난번 1기분들의 TIL을 보면서 해당 테스트 파일에 아래와 같이 처리해주면 해결할 수 있다는 것을 알았고, ProductControllerTest에서는 아래 코드로 해결을 했다.

@Autowired
private WebApplicationContext context;

@BeforeEach
public void setUp() {
    this.mockMvc = MockMvcBuilders.webAppContextSetup(context)
            .addFilters(new CharacterEncodingFilter("UTF-8", true))
            .alwaysDo(print())
            .build();
}

다만 OrderControllerTest에도 한글이 들어가게 되어 테스트가 깨지게 되었는데, 그렇다면 한글이 포함된 각각의 테스트 파일에 매번 이 코드를 추가해줘야 한다는 것이 번거롭기도 하고, 단지 한글 깨짐을 방지하기 위해서 거의 10줄에 가까운 코드를 추가한다는 게 별로라고 느껴졌다. 뭔가 더 간단하면서도 확실한 방법이 없나 싶어 1기분들께 물어봤더니 커스텀 어노테이션을 만들면 된다는 팁을 얻을 수 있었다. 해결 방법은 아래와 같다.

// EnableMockMvc.java

@Retention(RetentionPolicy.RUNTIME)
@Import(EnableMockMvc.Config.class)
public @interface EnableMockMvc {
    class Config {
        @Bean
        public CharacterEncodingFilter characterEncodingFilter() {
            return new CharacterEncodingFilter("UTF-8", true);
        }
    }
}

main 폴더 하위에 EnableMockMvc.java 파일을 만들고, 실제로 사용하는 테스트 파일 상단에 @EnableMockMvc 어노테이션만 추가해주면 된다!

@EnableMockMvc 어노테이션 추가

덕분에 이제 우리의 훈민정음을 제대로 출력할 수 있게 되었다!👏

한글 깨짐 현상 @EnableMockMvc로 해결!

 

3. PDCA 싸이클로 작업 훈련하기!

어제 TIL에서 프론트는 항상 구현하고 테스트를 이후에 작성하게 되어 고민이라고 적었는데, 이에 대해 아샬님이 답변을 주셨다.

아샬님 가라사대 📣

시도해보고 에러를 만나 디버깅하는 순서의 작업을 하지 말고, 의식적으로 PDCA(Plan-Do-Check-Act) 순서로 작업하도록 해야 한다는 것이었다.

이 글을 읽고 내가 왜 그동안 프론트엔드는 테스트 코드를 먼저 작성하기 힘들었나를 돌아보게 되었다. TDD를 처음 배우게 된 시점이 이 메가테라에서 코딩 수련 과정을 시작하게 되면서였는데, Java 쪽 TDD는 아예 이 메가테라 시작과 동시에 처음으로 배웠기 때문에 그게 너무나도 당연했다.

마치 알에서 막 깨어난 새끼오리와 같은 심정으로 백엔드 코드는 테스트부터 작성하는 것이 익숙했는데, JavaScript와 React는 이미 학습을 한 상태인 데다가 학습 당시 테스트 코드는 무슨 무작정 그냥 냅~다 구현부터 하는 것이 익숙하니 프론트엔드 코드 짤 때 테스트를 미리 작성하고 그 후에 구현을 한다는 것이 나에게는 익숙하지 않았던 것이다.. 이미 React로 어떤 식으로 구현해야 할지 머릿속으로 있는 상황이기에 구현부터 손이 갔던 것인데....

TDD는 의식적으로 훈련을 해야 한다는 코멘트를 남겨주시니까 이제는 손발을 묶어서라도 테스트 코드를 먼저 작성하고 그다음에 구현하는 방식으로 가야겠다는 생각이 더더욱 강력하게 들었다. 그래서 오늘 주문 조회/상세 페이지 작업은 테스트 코드 싹 작성하고 후 구현했다..ㅋㅋㅋ 막상 하면 어려운 것이 아닌데 역시 습관이 무섭다... 안 좋은 습관을 버리자!

 

4. 아무튼 그래서 오늘의 작업은!

길게 돌아왔다. 오늘 뭔가 여러모로 풀 썰이 많았다.. 심지어 git stash 해놨던 unstaged 파일이 한번 다 날아갔어서 어제 새벽에 난리 부르스도 한번 췄는데 그건 너무 길어질 거 같으니 별도로 정리를 해보려고 한다. 왜냐면 날아간 unstaged 파일을 당.당.히 복구해냈기 때문^^... 근 1년 만에 git 때문에 진땀 뺐던 새벽이었다 ㅋㅋㅋ 알 것 같을 때쯤에 한 번씩 병크를 터트려주는 우리들의 Git..😉

아무튼 진짜 각설하고! 그래서 오늘은 주문 조회 페이지와 주문 상세 페이지를 작업했다 이거다~! 프론트, 백 모두 구현하고(앞서 말했듯이 테스트 코드부터 작성했음 ^_^ㅎㅎ) 마크업과 스타일링까지 싹 마무리했다!

주문 조회 페이지

주문 상세 페이지

---

이로써 모든 페이지에 대한 마크업 및 스타일링은 끝이 났고, 마지막으로 남은 것은 예외처리(로그인, 회원가입, 주문 폼)와 페이지네이션이다! 근데 이것도 꽤 고군분투할 거 같은 예감이 드는데... 이제 마감이 이틀도 채 안 남아서 마지막까지 스퍼트를 내서 완벽도가 있는 웹 애플리케이션을 만들어보자! 파이팅이다 보니야~~😊