Feat/#49 mocking #51
Feat/#49 mocking #51
Conversation
| line-height: 1.4; | ||
|
|
||
| margin-bottom: 0.4rem; | ||
|
|
||
| ${({ theme }) => theme.fonts.body4}; | ||
|
|
||
| overflow: hidden; | ||
| text-overflow: ellipsis; |
There was a problem hiding this comment.
아하링 이렇게 말줄임 할 수 있구나! 난 맨날 글자수 세면서 했는디.... 감쟈해욤!
| function fetchCardsWithFilter(types: string[]) { | ||
| let params = ""; | ||
| types.forEach((type) => { | ||
| params += `?search=${type}`; |
There was a problem hiding this comment.
이부분으 무슨 코드인지 잘 모르겠어욧! 일단 공부해볼게욤🙈🙈
There was a problem hiding this comment.
우리 필터 API 에 타입 넘겨주는 걸,
search: "남자"
search: "상관없음"
search: "20대"
search: "10대"이런 식으로 넘겨야 하더라구,
그래서 인자로 ["남자", 상관없음", "20대", "10대"]를 넘겨주면 되게끔 구현해봤어요!
| export const categoriesHandler = [ | ||
| rest.get(`${process.env.REACT_APP_BASE_URL}/categories`, (req, res, ctx) => { | ||
| rest.get(`${process.env.REACT_APP_BASE_URL}${PATH.CATEGORIES}`, (req, res, ctx) => { |
There was a problem hiding this comment.
근데 여기서 ctx는 뭘 말하는건지 잘 모르겠어요!!🙏
There was a problem hiding this comment.
🔗 ctx :: msw 공식문서 문서 한 번 확인하시면 좋을 것 같습니다!
| useEffect(() => { | ||
| (async () => { | ||
| const { data } = await real.fetchCardsWithCategory("카테고리id"); | ||
| setCardLists(data.cardIdList); | ||
| })(); | ||
| }, []); |
There was a problem hiding this comment.
아하 요롷게 받아오는 거구나~!
마이페이지 부분도 이렇게 바꿔야겠다😚
| return ( | ||
| <St.VoteContent key={element.id}> | ||
| <St.VoteContent key={`${ballot._id}-${idx}`}> |
There was a problem hiding this comment.
key값은 보통 어떤 값을 지정해주는 건가용??
${ballot._id}-${idx} 이 값을 넣은 이유가 궁금합니당!!
There was a problem hiding this comment.
key 값은, 비효율적인 리렌더링을 막기 위해 설정해주는 "고유한 값" 입니다 !
그래서 idx 로만 설정한다면, 순서가 바뀔 떄 key 값이 중복되게 되면서 비효율적인 리렌더링이 일어날 가능성이 있어요
이를 막기 위해 id 값과 같은 고유한 값으로 주어야하고, mock data 로 값이 중복되는 것 같아 -${idx} 값을 추가하였어요!
(보통은 id 값만 주면 됩니다 !! idx X !!)
| async POST(path: string, body: any) { | ||
| const { data } = await real.post(`/${path}`, body); | ||
| return data; | ||
| async POST<T>(path: string, body: T) { |
There was a problem hiding this comment.
타입스크립트에서 any 타입은 모든 타입을 허용한다는 의미로, 사용을 지양해야 타입스크립트의 장점을 활용할 수 있어요
그래서 body 타입에 따라 다른 함수를 정의하기 위해 제네릭 타입인 <T> 을 활용하여 정의합니다!
| // 프로필사진 수정 | ||
| // function patchProfileImg() { | ||
| // function patchProfileImg() { | ||
| // return realReq.PATCH(PATH.USERS); | ||
| // } |
우리가 하던 대로 서버와 통신하면, msw 라이브러리가 (Service Worker API를 활용해서 그 통신을 가로채서) mock api 통신으로 반환합니다 즉, 우리는 그냥 하던 방식대로 통신하면 msw 라이브러리가 알아서 data 로 반환해주는 의미입니닺 |
📌 내용
core/api/폴더에서 알맞는 url 에 맞는 함수 가져가서 쓰면 됩니다 !!!!!!!📌 내가 알게 된 부분
🔗 Service Worker API