[박신천] Sprint 8 #125
[박신천] Sprint 8 #125
Conversation
|
스프리트 미션 하시느라 수고 많으셨어요. |
| <div className="list-item"> | ||
| <div className="item-images"> | ||
| <img src={item.images} /> | ||
| <img src={item.images?.[0]} /> |
There was a problem hiding this comment.
ListItem.tsx 파일에서 에서 src 가 빨간줄로 'string[]' 형식은 'string' 형식에 할당할 수 없습니다. 라는 오류가 떠서 확인을 해보니 src는 string 하나를 원하는데, item.images가 string[] 이라서 임을 깨달았습니다. 그럼 string[] 을 문자화하는 메소드인 JSON.stringfy(), join() ,toString() 등을 사용하면 되지 않을까 했지만 그렇게하면 유효한 문자열이 될 수 없음을 깨달아서
이렇게 고쳤습니다만 더 효율적으로 고치는 방법이 있는지 궁금합니다. 그리고 [0] 안에 0을 넣는게 관례상으로 맞는방법인지도 궁금합니다.
질문 주신 부분이 여기인 것으로 보여요 😉
의도하신게 이미지의 0번째 이미지를 썸네일로 표현하고자 하셨다면 문제 없습니다 !
다만, 기본 이미지도 고려해보시면 좋을 것 같네요 😉
예를 들어서 다음과 같이 해볼 수 있겠어요:
| <img src={item.images?.[0]} /> | |
| <img src={item.images?.[0] ?? "/imgs/panda-product-default.jpg"} /> |
여기서 /imgs/panda-product-default.jpg는 임의로 작성드렸으며, 실제로 존재하고 유효한 path여야 합니다
| export interface Items { | ||
| id: number; | ||
| name: string; | ||
| price: number; | ||
| tags: string[]; | ||
| images: string[]; | ||
| favoriteCount: number; | ||
| createdAt: string; | ||
| updatedAt: string; | ||
| } |
There was a problem hiding this comment.
해당 타입은 복수형으로 보이지는 않는군요 !
| export interface Items { | |
| id: number; | |
| name: string; | |
| price: number; | |
| tags: string[]; | |
| images: string[]; | |
| favoriteCount: number; | |
| createdAt: string; | |
| updatedAt: string; | |
| } | |
| export interface Item { | |
| id: number; | |
| name: string; | |
| price: number; | |
| tags: string[]; | |
| images: string[]; | |
| favoriteCount: number; | |
| createdAt: string; | |
| updatedAt: string; | |
| } |
배열 타입인 경우 Items와 같이 표현해볼 수 있겠으나 현재는 객체에 대한 타입이므로 단수형이 더 낫지 않을까 제안드려봅니다 ㅎㅎ
There was a problem hiding this comment.
(제안) ProductItem으로 바꿔볼 수도 있겠네요 !
또한, Item은 의미가 넓으므로 ProductItem과 같이 특정 자원에 대한 타입임을 이름에 나타내는 방법도 있겠어요 !
| export async function getLists({ | ||
| page = 1, | ||
| pageSize = 10, | ||
| orderBy = "recent", | ||
| keyword = "", | ||
| }: GetListsParams): Promise<GetListsResponse> { | ||
| const query = `page=${page}&pageSize=${pageSize}&orderBy=${orderBy}&keyword=${keyword}`; | ||
|
|
||
| try { | ||
| const { data } = await instance.get(`/products?${query}`); |
There was a problem hiding this comment.
문자열로 직접 쿼리를 붙이면 휴먼 에러(오타, & 누락, URL 인코딩 누락 등)가 발생하기 보다 쉬울 수 있을 것 같아요. 😊
| export async function getLists({ | |
| page = 1, | |
| pageSize = 10, | |
| orderBy = "recent", | |
| keyword = "", | |
| }: GetListsParams): Promise<GetListsResponse> { | |
| const query = `page=${page}&pageSize=${pageSize}&orderBy=${orderBy}&keyword=${keyword}`; | |
| try { | |
| const { data } = await instance.get(`/products?${query}`); | |
| export async function getLists({ | |
| page = 1, | |
| pageSize = 10, | |
| orderBy = "recent", | |
| keyword = "", | |
| }: GetListsParams): Promise<GetListsResponse> { | |
| try { | |
| const { data } = await instance.get("/products", { | |
| params: { page, pageSize, orderBy, keyword }, | |
| }); |
지금처럼 문자열로 직접 쿼리를 붙이면 휴먼 에러(오타, & 누락, URL 인코딩 누락 등)가 발생하기 쉬워요. 특히 keyword 같은 파라미터에 공백이나 특수 문자가 들어오면 문자열 연결 방식에서는 의도치 않은 동작이 발생할 수 있어요 !
axios는 params 옵션을 제공하기 때문에 이를 활용하는 것이 더 안전하고 가독성도 좋아질 수 있습니다 !
| const instance = axios.create({ | ||
| baseURL: "https://panda-market-api.vercel.app", | ||
| headers: { | ||
| "Content-Type": "application/json", | ||
| }, | ||
| }); |
There was a problem hiding this comment.
크으 ~ 굿굿 ! 👍 axios를 사용해보셨군요 !!
| createdAt: string; | ||
| updatedAt: string; | ||
| } | ||
| export type OrderBy = "recent" | "favorite"; |
There was a problem hiding this comment.
크으.. 꼼꼼합니다 🥺
OrderBy를 타입 추론으로 string이 되었다면 안정성이 떨어졌을 텐데 정말 꼼꼼하시네요 👍
|
수고하셨습니다 신천님 ! 이제 NextJS를 부술 일만 남았군요 ..! 💪 |
|
넵 감사합니다 또 열심히 달려보겠습니다!! |
2 participants
요구사항
Typescript를 사용합니다
기본
심화
주요 변경사항
스크린샷
멘토에게
-ListItem.tsx 파일에서
<img src={item.images} />에서 src 가 빨간줄로 'string[]' 형식은 'string' 형식에 할당할 수 없습니다. 라는 오류가 떠서 확인을 해보니 src는 string 하나를 원하는데, item.images가 string[] 이라서 임을 깨달았습니다. 그럼 string[] 을 문자화하는 메소드인 JSON.stringfy(), join() ,toString() 등을 사용하면 되지 않을까 했지만 그렇게하면 유효한 문자열이 될 수 없음을 깨달아서<img src={item.images?.[0]} />이렇게 고쳤습니다만 더 효율적으로 고치는 방법이 있는지 궁금합니다. 그리고 [0] 안에 0을 넣는게 관례상으로 맞는방법인지도 궁금합니다.