에바니네

배송지 주소 검색 모달을 구현해보자..

피그마에서 보면 결제하기전에 이렇게 주소를 넣는 칸이 있었다. 생각해보면 우리는 주문할때 항상 저기를 클릭하면 우편주소 검색하는 모달이 떠서 기억나는 길주소를 넣으면 기가막히게 우리 집 주소를 찾아주는 걸 알 것이다. 일단 첫번째로 input을 클릭하면을 켜줘야하는 기능을 구현해야 했는데, 어떻게 해줄까 생각을 하다가 useRef()를 사용해서 강제로 click을 하게끔 만들어 주자는 생각을 해봤다. 일단 useRef()를 만들어서 SearchTrigger라는 변수에 할당해줬다. 박스 친 곳을 보면 Input을 onClick 할때, SearchTrigger.current.click()을 통해아래쪽 Button이 SearchTrigger의 당사자 이시니까 클릭이 자동으로 되시겠다. 근데 위쪽에 if문으로 ..

시작부터... RTK로 햇으면 좋았을 것을..

백단이 슬슬 풀리기 시작해서 API로 데이터를 받아오기 시작하며 나의 소중한 dummy Data들을 삭제해가며 작업을 해가고 있던 찰라, 이제 와서보이는 엄청난 Props Drilling이 보였다. 그리고 대충 동작 되게끔만 만들어놓은 간단한 실행 함수들.. 약간의 반성을 할겸 글을 싸보자. 일단 메인페이지에서 모달과 그 메인페이지에서 제품 카드들을 맵핑해서 나열했었는데, 구매 혹은 장바구니 누를때마다 PG 모달이 뜨면서 해당 제품의 id와 가격, 이름 같은거를 넘기는것도 왼쪽에 사진처럼 메인에서 state를 만들고 setState를 넘기고 자시고 하면서 굉장히 복잡시럽게 했었는데 이제 API를 받고 찬찬히 보니까 너무 비효율적인거 같았다.. pgModal을 위한 슬라이스를 하나 만들고, 카드를 클릭하면..

Did you mean to use React.forwardRef()? Nope

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? Check the render method of `ForwardRef`. 리팩토링 하는중에 에러가 났다. 근데 지금 페이지간 이동하는 버튼에 관해서 다 Link태그로 감싸고 있었어서 이것 때문일거라고는 예상을 했다. 검색하니까 금방 나오더라 https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-functional-component next/link | Next.js Enable client-side transit..

chakra UI 커스텀 컴포넌트 만드는 법.. ?

피그마 디자인을 보자 1. 사이즈를 lg, md, sm 세가지로 나눔 2. 버튼이 하얀버튼과 주황버튼 두가지로 나뉨 3. 폰트 관련 사양은 다 똑같음 무지한 상태에서 무지성 컴포넌트 생성한 코드 import { Button } from '@chakra-ui/react'; interface SubmitButtonType { variant: string; title: string; sizes?: string; w?: string; mt?: string; mb?: string; isDisabled?: boolean; type?: string; onClick?: () => void; } export const SubmitButton = (props: SubmitButtonType) => { const { tit..

클릭해서 스크롤 이동하기 ! ( click to scroll )

피그마 디자인을 보는데 왠지 클릭하면 해당 컴포넌트로 이동할 것 같은 NavBar가 있었다. 처음엔 단순하게... React-Slick 처럼 라이브러리가 있을까 생각하고 찾아보니 있었다. 실제로 ㅋ ; https://www.npmjs.com/package/react-scroll react-scroll A scroll component for React.js. Latest version: 1.8.7, last published: 6 months ago. Start using react-scroll in your project by running `npm i react-scroll`. There are 606 other projects in the npm registry using react-scroll. ..