11월 두 번째 주간 회고

📚 221107-221111

이번 주 배운 것

 9주차 리액트 학습 시간에서는 컴포넌트 분리보다는 한 컴포넌트에 모든 기능을 다 넣는 방식으로 구현했었는데 이번 12주차에서는 컴포넌트 분리 뿐만 아니라 컴포넌트 별로 테스트 코드를 작성하여 각 컴포넌트가 맡은 기능만 테스트할 수 있게 하는 방식을 배웠다.

자바에서는 테스트 코드 작성시 MockMvc 라는 가짜 객체를 모킹해서 의존성을 줄여주었다면 jest 는 가짜 함수를 생성할 수 있도록 jest.fn() 이라는 함수를 제공한다. 이 가짜 함수는 일반 자바스크립트 함수와 동일한 방식으로 인자를 넘겨 호출할 수도 있다. 이렇게 객체를 만들어놓고, fireEvent 라는 핸들러를 사용해서 인위적으로 이벤트를 생성한 후 트리거 시킨다.

그리고 styled-components 라는 것도 배웠는데, 내가 알고 있었던 기본 웹사이트 개발 방식은 HTML 과 css, js 파일을 각자 따로 만든 후 이 안에 의존성을 주입해주는 방식이었다. 하지만 styled-components 는 기존 돔을 만드는 방식인 css 파일을 밖에 두고, 태그나 id, class 이름으로 가져와 쓰지 않고, 동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정해줄 수 있다.

const DeleteButton = styled.button`
  width: 200px;
  padding: 30px;
`;

위의 코드처럼 button 같은 지정된 태그를 스타일링 하는 것이 아니라 내가 직접 커스텀한 태그명으로 스타일링이 가능하다. 

속도 높이기

이번 주는 과제가 하나인 만큼 그 난이도도 높았었는데, 강의 반복 과제에서 제대로 이해하지 못한 것들을 과제를 진행하면서 '이게 이런 방식이었구나' 하고 이해되는 부분들이 많았던 한 주였다.

강의 반복 과제를 확실히 이해하고 싶은 마음에 퀘스트 과제를 조금 늦게 시작했어서 과제 마감도 금요일 밤 늦게나마 마칠 수 있었는데, 차라리 일찍 시작했더라면 강의 영상과 과제를 조금 더 쉽게 이해할 수 있지 않았을까 하는 아쉬움이 있다. 시작하기 전 너무 지레 겁먹지 말고 일단은 시작해보자! 하는 속단이 필요한 것 같다. 뭐든지 확실하게 하고 가려는 버릇을 고쳐보자!

---

<11월 셋째 주 액션플랜>

✈️ 퀘스트 과제 월요일에 당장 시작하기!