[코드숨] 리액트 6기 7주차 주간회고

드디어 7주차가 끝났습니다.

다음 8주차만 잘 마무리하면, 이제 포트폴리오를 만들어 보는 시간을 갖는 군요...!

다사다난한 이번 주 회고를 시작해보겠습니다.

 

 

[ 강의 ] 

- 로그인, 리뷰 폼 화면 & 기능 구현

- 로그인 인증

- 로컬 스토리지

 

 

 

Postman이나 Swagger는 알고 있었지만, HTTPie는 처음 알게 되었습니다.

CLI 환경에서 비교적 간단한 API를 쉽게 테스트하는 도구였습니다.

 

로그인을 통해 인증하는 시간도 가져봤는데요.

Authorization 헤더에 대해서 살펴볼 수 있어서 좋았습니다.

Authorization: Bearer [토큰 정보]

 

 

[ 배운 점 ]

- Authorization 헤더 구조

- given2 사용법

 

 

Jest에서 제공하는 기능들 외에 강의에서는 context, given2를 적용시켰습니다.

given 기능을 통해 데이터를 lazy하게 전달할 수 있습니다.

테스트마다 mock 함수나 변수를 이용해서 데이터를 바꿔줄 수도 있지만, 코드가 중복되거나 지저분해지는 부분을 given이 해결해주는 것 같습니다.

 

describe('로그인 페이지', () => {
	useSelector.mockImplementation((selector) => selector({
    	accessToken: given.accessToken
    });
    
    context('로그인 상태일 때', () => {
    	given('accessToken', () => 'ACCESS_TOKEN');
    	
        it('...', () => {
        	...
        });
    })
    
    context('로그인 상태가 아닐 때', () => {
    	given('accessToken', () => '');
    	
        it('...', () => {
        	...
        });
    })
});

 

 

[ 궁금한 점 ]

강의에서는 폼 정보(로그인, 리뷰)를 상태에 저장할 때, 리덕스를 사용했습니다.

그런데 저는 로컬 상태로도 처리가 가능할 것 같아서 useState를 사용해서 폼 정보를 액션에 전달했습니다.

 

구현할 때 다양한 방법이 존재할 것이고, 리덕스를 이용해서 통일성 있게 하는 것도 좋아보입니다.

하지만, 굳이 액션과 스토어 상태를 더 추가해야 할까 라는 생각에 이렇게 진행해봤습니다.

 

해결하지 못한 것은, useState에 대한 테스트 코드 작성인데요.

react-redux와 다르게 react를 mocking 하면 다른 테스트 코드가 깨지는 문제가 있었습니다.

 

로컬 상태도 많이 사용하기 때문에, 이 부분도 어떻게 테스트 코드를 작성해 줄 수 있을 지 궁금한 부분입니다.