React) 6주차 회고

이번주에 배운 React Router

이번 주에는 다양한 시도들을 해볼 수 있었던 주였습니다! 앞으로 8주차가 마지막이고 그 다음은

개인 프로젝트를 만드는 것이 시작됩니다. 벌써부터 너무 재밌을 것같아서 기대가 됩니다!

1. 한 것

1. Router라는 개념을 이용해서 화면을 이동할 수 있는 법을 배웠습니다.

2. TDD를 이용해서 어떻게 Router를 test할 수 있을지 깊게 고민해보았습니다.

3. 다음에 만들 것을 항상 이야기 흐르듯이 타당한 순서로 보려고 했습니다.

4. 저번주에 만든 지뢰찾기에 시간과 깃발갯수 카운트 기능을  더했습니다.

5. 이번 3기의 다른 분들과 Google Solution challenge를 나갈 준비를 했습니다.

6. CSS/HTML을 열심히 배우고있습니다.

 

2. 배운 것 

 

Router를 이용한다는 것이 unit test로 test가 가능할까?

 

위의 질문이 1주일동안 가장 많이 해봤던 생각이었습니다.

테스트를 한다면 Router의 어떤 것을 test할 것인가? 저는 useParams로 제대로 파라미터를 받아오는지를 테스트 했습니다.

((올때) test에서 MemoryRouter를 이용해서 페이지로 왔을 때 params를 잘 받았는지)

((갈때) 또한 Link는 href의 속성이 pathName을 올바르게 가지고 있는지)

올바른 이동이 이루어 졌는지는 unit테스트보다 e2e테스트에서 하는 것이 맞다고 생각했습니다.

한다고 해도 이게 unit 단위에서 가능할지가 의심스러웠습니다.

(독립적이지 않기때문에 이렇게 생각했습니다)

 

마우스 양쪽 동시 클릭을 어떻게 구현하지..?

 

개인 프로젝트로 지뢰찾기를 TDD로 만드는 과정에서 마우스 양쪽클릭이 주변의 칸들을 계산해줘서 열 수 있을 때 열어주는 기능을 구현하면 모든 기능은 끝입니다. 그런데 알고리즘보다도 양쪽을 클릭한다는 것을 어떻게 인지할 수 있을까?에서 심각한 고민을 했습니다. 왼쪽을 누른 상태에서 오른쪽을 누르거나 오른쪽을 누른상태에서 왼쪽을 누르는 것을 바탕으로 구현을 했고 결과는 성공적으로 인지할 수 있었습니다. (단 한쪽을 클릭하고 너무 오래있다가 또한 onClick과 onContextMenu사이의 이벤트 발생시점의 차이가 이것의 구현을 어렵게 만든다는 것을 알 수 있었습니다.

 

3. 느낀 것

1. react관련 테스트를 하면서 공식문서가 그 어떤 문서보다 좋다는 것을 배웠습니다.

 

2.아무리 간단한 App이어도 제대로 구현한다고 하면 쉽지 않다는 것을 느꼈습니다..(그래도 제대로 만들고 싶습니다!🤔)

 

4. 다짐

다음주에도 열심히 달리자! 화이팅!!