경북대 FE_정서현 5주차 과제 Step2 / 3 #89
Conversation
There was a problem hiding this comment.
고생하셨습니다~
전체적으로 잘 작성해주신 것 같아요!
항상 같은 상품이 나오는 원인은 src/api/hooks/products.mock.ts의 아래 부분 때문입니다.
rest.get(getProductDetailPath(':productId'), (_, res, ctx) => {
return res(ctx.json(PRODUCTS_MOCK_DATA.content[0]));
}),
어떤 id가 주어지든 무조건 mock데이터의 첫번째 상품을 반환하도록 작성되어 있네요!
이 부분을 수정하시면 정상적으로 상품을 보여줄 수 있을 것 같습니다.
테스트를 작성하는 의미에 대해서는 뭐... 다들 의견이 다를 것 같은데요.
제가 생각하는 테스트는 안전장치에 가깝습니다.
모듈에 수정이 발생했을때, 테스트를 전부 만족시킬 수 있다면 이상이 없는 것으로 신뢰할 수 있습니다.
또한, 테스트는 코드를 반영하므로 그 자체가 가장 최신화된 문서라고 할 수 있습니다. 노션이나... 어딘가 글로 작성된 문서보다 훨씬 안전합니다.
물론 생각할 수 있는 범위 내에서만 테스트를 작성하게 되니 예외 케이스에 대한 검증이 어려울 수 있어요.
모든 경우의 수를 테스트하는 것은 현실적으로 불가능하고, 예외 케이스는 뭐... 생각 나면 추가하는 방식으로 점점 신뢰도를 높여가면 되지 않을까요?
그리고 저는 사실 e2e테스트에 그리 긍정적이지는 않습니다. 뷰나 기획은 언제든 변경될 수 있는 영역이라고 생각하기 때문이에요.
오히려 저는 단위테스트를 잘 작성해서 작은 모듈들의 신뢰도를 높이고, 그 모듈을 조합해서 앱을 만든다면 앱 자체의 신뢰도도 올라간다고 생각합니다.
그리고 QA팀이 따로 있다면... e2e까지 그렇게 신경써서 작성해야 하나 싶기도 합니다 하하... 물론 제 개인적인 생각일 뿐입니다...
| @@ -16,6 +23,45 @@ export const MyAccountPage = () => { | |||
| window.location.replace(redirectURL); | |||
There was a problem hiding this comment.
로그아웃시 다시 동일한 유저로 로그인이 안되는 것은 이 부분이 원인이에요.
이렇게 이동하는 것은 새로고침과 동일합니다. 즉, 앱이 다시 실행되기 때문에 배열이 다시 초기값으로 돌아갑니다.
react-router-dom을 통해서 이동해야 spa식으로 이동할 수 있어요.
다만, react-router-dom을 사용해서 로그아웃시 페이지를 이동시키면 로그아웃이 정상적으로 이루어지지 않을건데요,
sessionStorage는 리액트가 관리하는 저장소가 아니기 때문이에요.
sessionStorage에서 인증 정보를 제거한다고 해도, 리액트는 그것을 알 수 없어요.
그것을 위해서 window.addEventListener('storage')로 스토리지가 변경될 경우 리액트 렌더링 사이클과 연동해줄 수 있습니다.
혹은 useSyncExternalStore라는 훅을 사용해서 스토리지와 리액트를 연동할 수 있어요.
일단 지금 과제에서는 정상적인 로그인 기능을 구현하기 어려울 듯 하니 크게 신경쓰지 않으셔도 될 것 같습니다~!
| try { | ||
| const response = await fetch(`${BASE_URL}/api/members/login`, { | ||
| method: 'POST', | ||
| headers: { | ||
| 'Content-Type': 'application/json', | ||
| }, | ||
| // JSON 형식의 문자열로 변환 | ||
| body: JSON.stringify({ id: id, password }), | ||
| }); | ||
|
|
||
| // TODO: API 연동 전까지 임시 로그인 처리 | ||
| authSessionStorage.set(id); | ||
| if (!response.ok) { | ||
| throw new Error('로그인에 실패했습니다. 아이디나 비밀번호를 확인해주세요.'); | ||
| } | ||
|
|
||
| const redirectUrl = queryParams.get('redirect') ?? `${window.location.origin}/`; | ||
| return window.location.replace(redirectUrl); | ||
| const data = await response.json(); | ||
| authSessionStorage.set(data.id); | ||
|
|
||
| const redirectUrl = queryParams.get('redirect') ?? `${window.location.origin}/`; | ||
| return window.location.replace(redirectUrl); | ||
| } | ||
|
|
||
| catch (error) { | ||
| alert(error); | ||
| } |
There was a problem hiding this comment.
로그인에서는 react-query + axios가 아니라 fetch만 사용하신 이유가 있을까요??
| try { | ||
| const response = await axios.get(`/api/wishes?page=${page}&size=${pageSize}`, { | ||
| headers: { | ||
| Authorization: `Bearer ${authInfo.token}`, | ||
| }, | ||
| }); | ||
|
|
||
| setInterestList(response.data.content); | ||
| setTotalPages(response.data.totalPages); | ||
| } catch (error) { | ||
| console.error('관심 상품 Fetch 에 실패하였습니다.'); | ||
| } |
There was a problem hiding this comment.
여기는 axios만 사용하셨네요! 데이터 패칭 도구나 서버 상태 도구를 사용하는 기준이 있을까요?
| expect(cashReceiptNumberInput).toBeDisabled(); | ||
| }); | ||
|
|
||
| test('Form Validation 를 성공적으로 수행', async () => { |
There was a problem hiding this comment.
요것은 그냥 제 의견인데, 시나리오는 ~해야 한다, ~한다 등으로 표현하는 것이 눈에 더 잘 들어오더라구요.
"Form의 유효성 검사를 통과할 수 있어야 한다."
근데 유효성 검사가 여러개일 것 같은데 한 번에 테스트하셨군요...! 나누는 기준이 있을까요?
안녕하세요, 멘토님 너무 늦게 PR 보내서 죄송합니다 ㅠㅠ
STEP1 에서 진행한 테스트 코드 작성이 너무 오래걸렸고, 심지어 몇 몇 테스트는 제대로 작동하지 않아서 다음 단계 진행이 어려웠습니다..
이번 STEP2 에서도 질문이 한가지 있습니다.
임의로 유저 정보를 담을 데이터베이스 변수를 두고 회원가입 기능을 구현하였는데, 실제로 담아지지 않아 회원가입 이후 로그아웃을 하게 되면 해당 정보로 다시 로그인이 불가능합니다. 디버깅을 위해 로그를 찍어가면서 했는데 어디서 문제가 발생한지 모르겠습니다..
관심 상품 추가 기능에 대해서는 현재 mock 데이터로 주어진 상품이 해당 상품 밖에 없어서 지금 제대로 동작하고 있는지 확인이 어려웠습니다.
실제 api 와 동작하는 것 '처럼' 구현하려다 보니 어려움이 많았습니다 ㅠㅠ
📌 5주차 질문
🤔 1. Test code를 작성해보면서 좋았던 점과 아쉬웠던 점에 대해 말해주세요.
🤔 2. 스스로 생각했을 때 좋은 컴포넌트란 무엇인지 본인만의 기준을 세우고 설명해 주세요.
🤔 3. 스스로 생각했을 때 공통 컴포넌트를 만들 때 가장 중요한 요소 2개를 선택하고 이유와 함께 설명해주세요.