Conversation
…ithub-actions [Fix] delete merged branch github action
* 초기 빌드 파일입니다 JS에서 React로 마이그레이션 중입니다. * Sprint-Mission5 내용에 따라 중고마켓 페이지 구현 중입니다. * 중고마켓 페이지 UI만 구현, 반응형 웹으로 제작되었습니다. * UI에 맞게 기능이 추가되지 않아 추후에 추가 예정입니다.
* 최신순, 좋아요 순으로 판매 중인 상품 정렬기능을 추가하였습니다.
…Sprint-Mission into React-염성진-sprint5
There was a problem hiding this comment.
다양한 css 도구들을 배우면 더 편하게 스타일링할 수 있을거지만!
일단 그걸 떠나서 폴더 구조에 대한 고민이 있을 거 같아서 아티클 하나 가져왔어요
폴더 구조에 정답은 없지만 대부분 사람들이 짜는 폴더 구조에서 내가 사용할 폴더들만 가져와서 사용하기때문에 이 아티클 외에도 다른 사람들은 어떻게 폴더를 구성하는지 살펴보고 가장 맘에 드는 것, 혹은 사람들이 가장 많이 쓰는 방법을 선택해서 적용해보세요!
https://velog.io/@bjgeumgang/React%EC%9D%98-%ED%8F%B4%EB%8D%94%EA%B5%AC%EC%A1%B0
페이지네이션 기능은 다음 페이지를 불러올 수 있는 기능을 만들어라 라는 뜻이고,
불러올 페이지가 바뀌면 해당 페이지에 맞는 데이터를 불러와야하기 때문에
새로운 데이터를 추가로 받아오는 작업이 필요합니다!
이번 미션도 고생 많으셨어요!
이번주도 화이팅입니다 👍
src/components/BestItem/BestItem.css
Outdated
There was a problem hiding this comment.
BestItem 폴더 안에 UI를 그리는 js 파일 하나랑 스타일을 위한 css 파일 하나로 나뉘어져 있는데 요건 css module 방식과 비슷해보이네요!
각 페이지 or 컴포넌트 별 css를 나눠서 작업하는 것도 아주 좋은 방법입니다
css module에 대해 못 들어보셨을 수 있을 것 같아서 아티클도 같이 첨부해드릴게요!
https://react.vlpt.us/styling/02-css-module.html
|
|
||
| function BestItemList({ items }) { | ||
| // 반응형에 따라 몇 개의 데이터를 표시할 건지 후에 수정해야 함. | ||
| const cutItems = [...items.list].slice(0, 4); |
There was a problem hiding this comment.
반응형에 따라 불러와지는 데이터가 다르다면 처음 화면이 그려졌을 때 화면 크기를 판단하는 로직이 필요할 것 같네요!
src/components/DropDown/DropDown.js
Outdated
| console.log(props.orderBy); | ||
| const nowType = props.orderBy; | ||
| const [isOpen, setIsOpen] = useState(false); | ||
| const [select, setSelect] = useState(`${nowType}`); |
There was a problem hiding this comment.
useState(nowType) 으로 적어줘도 무방합니다!
src/components/DropDown/DropDown.js
Outdated
| import { useState } from 'react'; | ||
| import '../DropDown/DropDown.css'; | ||
|
|
||
| export default function DropDown(props) { |
There was a problem hiding this comment.
props 부분도 객체구조로 가져오셔도 좋아요!
// example
export default function DropDown({orderBy, handleOrderChange}) {
const nowType = orderBy;
...
}There was a problem hiding this comment.
BestItem이랑 코드 구조가 비슷해요!
혹시 둘을 하나로 합칠 수는 없을까요? 한번 합칠 수 없는지 고민해보세요!
(고민해봤는데 어렵다면 일단 패쓰하세요 이건 리액트에 익숙해져야 생각할 수 있는 부분이에요!)
| }, []); | ||
|
|
||
| return ( | ||
| <div className="pagiation-bar"> |
There was a problem hiding this comment.
className={exampleState ? 'pagination-bar' : 'bar-pagination'}처럼 리액트에서는 클래스명에서도 변수들을 사용할수 있으니 참고해보세용 👍
| const $target = e.target; | ||
| if ($target.tagName !== 'LI') return; | ||
| if (navClick !== $target) { | ||
| navClick.classList.remove('pagiation-target'); |
There was a problem hiding this comment.
앞으로는 직접적인 dom을 건드리는 일은 줄어들거에요!
ref 사용이라던지, 클리스명을 추가하고 지운다던지 등등..
리액트에서 useState로 만드는 변수들로 활용하는 연습을 더 해보는걸로!
| const [Bestitems, setBestItems] = useState([]); | ||
| const [items, setItems] = useState([]); | ||
| const [orderBy, setOrderBy] = useState('recent'); | ||
| const handleOrderChange = async (order) => { |
There was a problem hiding this comment.
오 try catch 너무 좋아요 ! try catch문은 에러가 나면 잡아주기 때문에 안전성을 보장해줍니다
* useState값에 불필요한 값 삭제 * DropDown버튼의 이름을 props로 받아온 값을 참조하여 표시되게 변경
…Sprint-Mission into React-염성진-sprint5
* props를 객체 구조로 가져와 코드의 가독성과 유연성을 고려하였습니다.
요구사항
기본
반응형
베스트상품
전체 상품
심화
주요 변경사항
스크린샷
멘토에게
그래도 진행하는 게 맞을까요?
어떤 식으로 개선하는 게 좋을까요?