Conversation
tkddbs587
added
enhancement
| @@ -8,26 +11,25 @@ export async function getArticlesData({ | |||
| keyword = "", | |||
| }) { | |||
| const query = `page=${page}&pageSize=${pageSize}&orderBy=${orderBy}&keyword=${keyword}`; | |||
| const res = await fetch(`${BASE_URL}/articles?${query}`); | |||
| const data = await res.json(); | |||
| const res = await axios.get(`/articles?${query}`); | |||
There was a problem hiding this comment.
fetch에서 axios 활용해보신 점 좋네요!
There was a problem hiding this comment.
api 함수를 각 파일로 분리해서 작성하실때는 해당 함수 명을 파일로 이름을 짓기도 합니다. 파일 같은 경우는 getProductsData로 지어주는 것이죠!
| }) => { | ||
| const [kebabButton, setKebabButton] = useState(false); | ||
| const [kebabButtonVisible, setKebabButtonVisible] = useState(false); |
There was a problem hiding this comment.
상태 이름을 더 명시적으로 수정해주신 점 좋네요!
There was a problem hiding this comment.
멘토님한테 배운대로 적용해봤습니다! 🫡
| if (comment.id === targetId) { | ||
| return data; | ||
| } | ||
| return comment; |
There was a problem hiding this comment.
이런 로직은 삼항연산자로 대체 해주셔도 좋습니다.
|
|
||
| useEffect(() => { | ||
| async function loadData() { | ||
| const data = await getArticlesData({ | ||
| page: page, |
There was a problem hiding this comment.
객체에서 필드명이랑 변수명이 같으면 한번에 작성 가능한 것 알고 계시죠? ㅎㅎ
There was a problem hiding this comment.
넵 알고 있습니다 수정하겠습니다!
| const handleInputChange = ( | ||
| e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement> | ||
| e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>, | ||
| ) => { |
There was a problem hiding this comment.
이 함수도 저번에 textarea와 input을 분리했던 것처럼 똑같이 분리해서 사용해주셔도 좋을 것 같습니다.
| const [search, setSearch] = useState(""); | ||
| const [totalPage, setTotalPage] = useState(1); | ||
| const [page, setPage] = useState(1); | ||
| const [order, setOrder] = useState("recent"); |
There was a problem hiding this comment.
recent 상수로 반영해주시면 좋을 것 같아요!
There was a problem hiding this comment.
컬러변수 활용 누락된 부분 반영해주시면 좋을 것 같습니다.
| setOrder: React.Dispatch<React.SetStateAction<string>>; | ||
| setSearch: React.Dispatch<React.SetStateAction<string>>; |
There was a problem hiding this comment.
이런 경우에 setState 함수를 감싸는 handleInputChange 함수 자체를 외부에서 받아오게 사용하시는 것도 좋습니다. setSearch를 사용하는 것 이외의 로직이 추가되야 한다면, 현재 상태에서는 구현하기 어려워 보이기 때문입니다.
There was a problem hiding this comment.
아 그러면 handleInputChange 함수 자체를 상위 컴포넌트에서 만들고 prop으로 내려주는게 더 좋다는 말씀이신거죠?!
| body { | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| font-family: |
There was a problem hiding this comment.
폰트가 없을때를 대비해서 여러개를 준비해주신 점 좋네요.
There was a problem hiding this comment.
넵 글로벌 스타일 설정 해주면 좋더라구요 코드 리뷰 감사합니다 멘토님!!
요구사항
기본
멘토에게
스크린샷
상품 상세 페이지
상품 상세 페이지 댓글