본문 바로가기

전체 글

 (72)
[React] useMemo useMemo Hook useMemo 훅은 컴포넌트의 성능을 최적화하는데 사용된다.함수의 계산 결과를 메모리에 저장하여 불필요한 재계산을 막아 자원의 낭비를 막는다. useMemo 훅의 사용법은 다음과 같다.const memo = useMemo(calValue, deps); 이전에 보았던 useEffect 훅과 동일하게 실행시킬 함수와 종속성이 요구된다.  const lists = useMemo(()=>{ //useEffect에 객체 전달로 인한 리랜더링 방지 return allLists.filter(list => list.user_content_id === 1); }, [allLists]); 이런 식으로 사용할 수 있다.간단히 설명하자면, 'allLists' 라는 변수에 변화가..
[React/Node] 마켓컬리 클론코딩 12 - 메일 인증 메일 인증 기능  마무리한 줄 알았으나 뭔가 찝찝해서 둘러보니 메일 인증 구현한 걸 정리하지 않았다.. 10번 게시물에서 이어지는 글!https://memo-code.tistory.com/45 마켓컬리 클론코딩 10 - 로그인/로그아웃로그인/로그아웃 (로그아웃 버튼 css를 까먹었다..) 처음해보는 작업이라 그래도 좀 오래 걸릴거라 생각했지만, 예상보다 많이 걸린 작업이었다.온갖 에러와 정보 사이에서 어찌저찌 만들기는memo-code.tistory.com    이 부분의 목적은 이메일의 여부를 확인하기 위한 인증 딱 한가지그래서 특별히 프론트엔드 측에서 손볼건 없다. 그냥 코드 확인을 위한 input만 '인증 코드 받기'버튼을 클릭하면 생기도록 하면 된다. {codeInput && ( ..
[React/Node] 마켓컬리 클론코딩 11 - 장바구니 페이지 장바구니 페이지   장바구니 페이지에 기본적으로 필요한 기능은 '장바구니 담기(생성)'와 '장바구니 보기(읽기)'이다.장바구니를 보려면 일단 상품을 추가해야하기에 상품 상세 탭에서 '장바구니 담기'를 클릭하면 추가하도록 설계해야한다. ♡ 장바구니 담기상세 페이지 코드 중 장바구니 담기 버튼 부분이다.해당 버튼 태그에 onClick 구문을 통해 클릭시 addcart 함수를 거치도록 하였다. addcart의 내용은 다음과 같다.const ItemDetail = () => { ... const isLoggedIn = sessionStorage.getItem("isLoggedIn") === 'true'; const nickname = sessionStorage.getItem("ss_nickname"); ... ..

티스토리툴바