[박민규] Sprint5 #114
[박민규] Sprint5 #114
Conversation
| { allowConstantExport: true }, | ||
| ], | ||
| // js 문법에서는 prop-types를 사용하지 않기에 비활성화함 | ||
| 'react/prop-types': 'off', |
There was a problem hiding this comment.
'react/prop-types': 'off' 옵션은 js 문법에서 비활성화 하는 것이 아니라 prop-types 를 js 환경에서 쓰지 않는 경우에 비활성화 하는 것입니다.
| return { windowWidth, isMobile, isTablet }; | ||
| }; | ||
|
|
||
| export default useDeviceType; |
There was a problem hiding this comment.
구조가 깔끔해요! 나중에 context 확장하기도 좋을 것 같아 보입니다:)
| # 폴더 구조 소개 | ||
|
|
||
| - 우선 FSD 아키텍쳐의 숙련도가 낮은 관계로 app, pages, shared 3 개의 폴더로만 구성했습니다. (만약 공통 요소가 안나올시 shared는 폐기될 수 있습니다.) | ||
| - FSD 아키텍쳐는 폴더의 이름에 제한이 없으나 우선 공식문서에 있는 이름 규칙을 준수했습니다. |
There was a problem hiding this comment.
아키텍쳐는 사실 회사마다 다릅니다. 컴포넌트 명명하는 부분도 그렇구요. 추후 팀 프로젝트 시 멘토링 시간에 가이드를 해드리겠습니다!
There was a problem hiding this comment.
"UI 관련 컴포넌트들이나 페이지를 구성하는 조각으로 이루어진 컴포넌트들은 page 내에 두신 이유가있을까요?"
위 코멘트에 답글이 안달려서 여기에 달겠습니다.
해당 컴포넌트들은 관련 page에서만 재사용되는 컴포넌트들이라 그렇습니다. 만약 좀 더 범용적으로 사용되는 컴포넌트라면 shared의 component 폴더로 이동할 것 입니다.
There was a problem hiding this comment.
조금 더 추가적으로 설명하자면 현재 "세그먼트"(3단계 deps) 단에 있는 3개의 폴더 "api", "model", "ui"에 대해 짧게 설명하자면
api 폴더는 말그대로 api 통신에 관련된 로직만,
model 폴더는 api 통신을 통해 받아온 데이터의 가공 및 UI를,
ui 폴더는 그냥 렌더링을 담당하는
폴더로 구성하였습니다.
There was a problem hiding this comment.
좋습니다! 그러면 본격적인 아키텍처 구성은 곧 진행하는 팀 프로젝트에서 제대로 배워보는걸로 해요~
| </footer> | ||
| ); | ||
| }; | ||
|
|
There was a problem hiding this comment.
footer는 이렇게 짜시는게 맞습니다!
| import twitter from '../../../../public/img/ic_twitter.png'; | ||
| import youtube from '../../../../public/img/ic_youtube.png'; | ||
| import instagram from '../../../../public/img/ic_instagram.png'; | ||
|
|
There was a problem hiding this comment.
절대경로 vs 상대경로 찾아보세요! 설정 파일은 jsconfig 혹은 타입스크립트 사용 시 tsconfig 입니다.
|
| # 폴더 구조 소개 | ||
|
|
||
| - 우선 FSD 아키텍쳐의 숙련도가 낮은 관계로 app, pages, shared 3 개의 폴더로만 구성했습니다. (만약 공통 요소가 안나올시 shared는 폐기될 수 있습니다.) | ||
| - FSD 아키텍쳐는 폴더의 이름에 제한이 없으나 우선 공식문서에 있는 이름 규칙을 준수했습니다. |
There was a problem hiding this comment.
좋습니다! 그러면 본격적인 아키텍처 구성은 곧 진행하는 팀 프로젝트에서 제대로 배워보는걸로 해요~
| const [isOpen, setIsOpen] = useState(false); | ||
| const [order, setOrder] = useState(ORDER_LIST[0]); | ||
| const [totalPage, setTotalPage] = useState(0); | ||
| const [currentPage, setCurrentPage] = useState(1); |
There was a problem hiding this comment.
pagination을 custom hook으로 빼보시는 방법을 한번 고민해보세요~
| import styles from './Pagination.module.css'; | ||
| import { IoIosArrowBack, IoIosArrowForward } from 'react-icons/io'; | ||
|
|
||
| const Pagination = ({ totalPage, currentPage, setCurrentPage }) => { |
There was a problem hiding this comment.
pagination이 hook으로 사용되면 이 파일도 같이 통합하셔야해요!!
| }) => { | ||
| function formatNumberWithComma(number) { | ||
| return number.toLocaleString(); | ||
| } |
There was a problem hiding this comment.
이거 잘 하셨어요! 별거 아닌거 같은데 은근 중요한 것입니다ㅠ
| const Header = () => { | ||
| const location = useLocation(); | ||
|
|
||
| const isCommunity = location.pathname === '/community'; |
There was a problem hiding this comment.
useRouter hook으로 따로 빼보시는 방법 생각해보세요~!
기본 요구사항
공통
중고마켓 페이지
심화 요구사항
공통
중고마켓 페이지
pageSize값을 적절하게 설정합니다.배포 사이트
멘토에게