KDT5 9조 과제 제출 (김준희, 송홍빈, 조은상, 박근우, 백동은) #6
Conversation
dev-junehee
changed the title
dev-junehee
changed the title
dev-junehee
changed the title
dev-junehee
changed the title
dev-junehee
changed the title
| useEffect(()=> { | ||
| authenticateHandler(); | ||
| }, [location]) | ||
|
|
||
| const authenticateHandler = useCallback(async () => { | ||
| try { | ||
| const res = await authenticate() | ||
| dispatch({ type: "RETURN_USER", payload: res }) | ||
| } catch (err) { | ||
| console.log("로그인 인증 실패하였습니다.") | ||
| } | ||
| }, [location]) |
There was a problem hiding this comment.
유저 인증하는 함수를 usecallback으로 메모이제이션 하고
useEffect dependency에 location 변수를 넣어준 것이 코드를 이펙트함수를 잘 다뤄준거 같네요!
There was a problem hiding this comment.
api 폴더를 사용해서 api를 다루는 함수를 잘 모듈화 시켜 재사용 하기 용이하고 코드를 보기 편하게 만들어 준 것이 정말 중요한 것 같습니다. 다만 나중에 시도해보면 좋은 것은 api를 파일별로 비슷한 종류끼리 모듈화 시키는 것이 코드를 유지보수하는데 더 도움이 되기에 시도해보시는 것도 추천드립니다!
| max-width: 1440px; | ||
| min-height: calc(100vh - (100px + 150px)); | ||
| gap: 120px; | ||
|
|
||
| .aboutImg { | ||
| min-width: 300px; | ||
| max-width: 30vw; | ||
| max-height: calc(width / 3 * 4); | ||
| overflow: hidden; | ||
|
|
There was a problem hiding this comment.
min, max 값을 비용하는 것이 반응형 퍼블리싱이 대세가 된 모던 웹에서 정말 유용하게 쓰이는데
calc 메서드를 이용해서 잘 처리해준 바 정말 좋은 것 같습니다
There was a problem hiding this comment.
현업에서도 이런 함수 값 계산 함수랑 날짜에 관련한 함수들을 util 파일로 빼서 따로 관리하곤 하는데
잘 모듈화 시켜주신거 같네요
| e.target.checked | ||
| ? dispatch({ type: "CHECKED_SELECTED_CART", items: item }) | ||
| : dispatch({ | ||
| type: "DELETE_SELECTED_CART", | ||
| items: mySelectedCart.filter(obj => obj.id !== item.id) | ||
| }); | ||
| }; | ||
|
|
There was a problem hiding this comment.
event target에 따라 dispatch 함수를 조건부로 렌더링 하는 것은 생소한데 꽤 효율적으로 보입니다!
dispatch 함수 자체를 직접적으로 쓰는것 말고 다른 방법은 없을지 한번 생각해봐도 좋을거같네요!
There was a problem hiding this comment.
셀렉트 옵션을 따로 contants에서 export로 따로 빼서 관리한 점 정말 칭찬해드리고 싶네요
| useEffect(() => { | ||
| if (!localStorage.getItem('token')) { | ||
| alert('관리자 전용 페이지입니다! ⚙️'); | ||
| navigate('/sweethome'); | ||
| } | ||
| },[]) |
There was a problem hiding this comment.
어드민 확인하는 기능을 만드신 것 좋은 것 같습니다 이번 기회에 리다이렉션에 대해서 알아보는 것은 대해서 알아보면 좋을거 같습니다! 리다이렉션이 현업에선 매우 중요한 기능이기 때문입니다!
🏠 집 가구싶어 (SweetHome)
React, TypeScript, Rest API를 활용한 라이프 스타일 홈 데코·인테리어 쇼핑몰 프로젝트입니다.
성별과 연령에 상관없이 모두가 관심을 가지고 이용할 수 있는 인테리어 관련 주제로 선정하였으며,
‘집(Home)’ + ‘가구(Furniture)’ + ‘가고싶다.(Want To Go)’ 의 합성어로 언제 어디서나 집에 가고싶게 만드는 제품을 판매하다는 의미의 쇼핑몰입니다.
프로젝트 소개
개발자 소개
About 페이지
상품 페이지
장바구니 페이지
결제 페이지
관리자 페이지
Footer
검색 기능
메인 페이지
상품 페이지
장바구니 페이지
결제 페이지
Header
로그인 인증
마이페이지
상품 페이지
장바구니 페이지
결제 페이지
관리자 페이지
사용기술 및 개발환경
Development
Config
Deployment
Environment
Cowork Tools
전체 화면 구성
프로젝트 상세 기능
Layout
Head
메인 페이지 (Home)
상품 페이지 (Shop)
장바구니 페이지 (Cart)
결제 페이지 (Buy)
마이페이지 (Mypage)
관리자 페이지 (Admin)
인증 & 인가
프로젝트 테스트
clone project
go to project
$ cd sweethomeinstall npm
start project
버그 수정 중입니다 ... 🥲⚒️