경북대 FE 이은경 2주차 과제 #65
Conversation
There was a problem hiding this comment.
안녕하세요~
1주차와 동일한 문제가 있네요!
node_modules를 제거한 후, npm install로 의존성을 설치하시고 npm start로 개발서버를 띄우면 정상적으로 동작하나요~?
이런 문제가 발생하는 이유는 무엇이고, 어떻게 이런 문제를 편하게 해결할 수 있을까요?
협업하는 개발자간에 최소한의 동작하는 코드임을 보장받을 수 있는 장치를 두면 어떨까요~?
그 장치란 어떤 것일지 한 번 찾아보시면 좋을 것 같습니다!
import React from 'react'; 부분은 생략을 하는 것이 좋은지 지금처럼 제외를 하는 것이 좋은지 질문드립니다.
생략을 하는 것과 제외를 하는 것이 무슨 말인지 잘 모르겠네요... ㅠㅠ
일단 해당 라인이 무엇을 의미하는지부터 찾아보시면 좋을 것 같습니다.
예전엔 필요했던 라인인데요. 왜 필요했고, 왜 필요없어졌는지 금방 찾으실 수 있을거에요.
현재 저는 목록에 보이는 만큼 직접 다 theme을 작성해서 코드가 반복되고 긴데 아직 다른 분들이 어떻게 구현했는지 모르겠어서 이부분은 좀 더 고민해보고 다른 분들도 참고해보려합니다! 조언이 있으시다면 부탁드립니다!
theme이 혹시 이 부분을 말씀하시는 걸까요?
const themes = [
{ key: '생일', name: '생일', imgSrc: '/images/cake.jpg' },
{ key: '스몰럭셔리', name: '스몰럭셔리', imgSrc: '/images/cake.jpg' },
{ key: '명품선물', name: '명품선물', imgSrc: '/images/cake.jpg' },
...이런 mock 데이터는 간단한건 그냥 손으로 작성하는 경우가 많고, vscode 확장 프로그램이나 웹에서 mock 데이터를 손쉽게 생성할 수 있도록 도와주는 제품을 쉽게 찾으실 수 있을거에요.
현업에서는 대부분의 데이터를 서버드리븐으로 가져오는 경우가 많으니 크게 신경쓰지 않으셔도 될 것 같아요!
src/components/common/Header.tsx
Outdated
| <HeaderContainer> | ||
| <Nav> | ||
| <NavItemleft> | ||
| <Link to="/">선물하기</Link> | ||
| </NavItemleft> | ||
|
|
||
| <NavList> | ||
| {authToken ? ( | ||
| <NavItem> | ||
| <Link to="/my-account">내 계정</Link> | ||
| </NavItem> | ||
| ) : ( | ||
| <NavItemRight> | ||
| <Link to="/login">로그인</Link> | ||
| </NavItemRight> | ||
| )} | ||
| </NavList> | ||
| </Nav> | ||
| </HeaderContainer> |
There was a problem hiding this comment.
구조가 조금 어색하다고 생각하는데요,
버튼 두개가 양쪽 끝에 위치한 형태의 뷰를 만들기 위해 이렇게 많은 요소와 스타일이 필요할까요?
justify-content가 잘못 작성된 것 같은데 한 번 수정해보시면 좋을 것 같아요
| const filterOptions: { label: string; value: Filter }[] = [ | ||
| { label: '전체', value: '전체' }, | ||
| { label: '👩 여성이', value: '여성이' }, | ||
| { label: '👨 남성이', value: '남성이' }, | ||
| { label: '🧒 청소년이', value: '청소년이' }, | ||
| { label: ' 받고 싶어한', value: '받고 싶어한' }, | ||
| { label: ' 많이 선물한', value: '많이 선물한' }, | ||
| { label: ' 위시로 받은', value: '위시로 받은' }, | ||
| ]; |
There was a problem hiding this comment.
과제 예시에서는 필터가 2deps인 것으로 보여요.
여성, 남성, 청소년 / 받고싶어한, 많이선물한, 위시로받은
| const { filter, changeFilter, filterOptions } = useFilter(); | ||
| const [showMore, setShowMore] = useState(false); | ||
|
|
||
| const displayedItems = showMore ? items : items.slice(0, 6); |
There was a problem hiding this comment.
필터 기능이 정상적으로 동작하지 않는데, 조금 수정이 필요할 것 같아요~
| {items.length > 6 && ( | ||
| <button onClick={() => setShowMore(!showMore)}>{showMore ? '접기' : '더보기'}</button> | ||
| )} |
There was a problem hiding this comment.
버튼을 누르면 페이지 전체가 리렌더링 되고있네요.
리렌더링이 필요한 부분과 불필요한 부분을 찾아서 최적화해보면 좋을 것 같아요
react에서 제공하는 메모이제이션 기능을 활용해보세요!
안녕하세요 멘토님! 피드백 감사합니다! |
안녕하세요 멘토님!
꼼꼼한 리뷰 항상 감사드리고 1주차도 놓치지않고 조금씩 공부를 계속 진행하도록 하겠습니다!
단계별로 나눠서 pr을 하지않고 한번에 했고 이해가 안되는 부분을 제외하고는 최대한 구현을 했습니다!
질문이 몇가지 있는데
import React from 'react'; 부분은 생략을 하는 것이 좋은지 지금처럼 제외를 하는 것이 좋은지 질문드립니다.
현재 저는 목록에 보이는 만큼 직접 다 theme을 작성해서 코드가 반복되고 긴데 아직 다른 분들이 어떻게 구현했는지 모르겠어서 이부분은 좀 더 고민해보고 다른 분들도 참고해보려합니다! 조언이 있으시다면 부탁드립니다!
감사합니다! :)