반응형 2022/0710 lodash 이용해서 프론트에서 고유한 id 만들기 프론트로만 작동하는 페이지를 하나 만들고 있다. 그런데 배열을 매핑할때 key를 index로 하다보니 없는것과 마찬가지이다. (이유) key에 인덱스를 사용하는 것은 최후의 수단이다. 예를들면 인덱스를 사용했을때는 댓글 삭제, 작성처럼 항목들이 재배열되는 경우 오히려 성능이 저하된다고 한다. 프론트에서 어떻게 고유id를 만들까 검색하다가 lodash에 uniqueId()가 있는것을 알게 되었다. (lodash는 debounce용으로 설치해둔 라이브러리였음) 초기 state를 다음과 같이 작성하고, const [purchases, setPurchases] = useState([ { id: uniqueId(), product: "과자", price: "2000", }, { id: uniqueId(), pro.. 2022. 7. 31. TIL 객체로 이루어진 배열중에 특정 key값만 의존성 부여하기 대충 다음과 같은 화면을 만들었다.(상품들은 더미데이터) 남은돈 계산 로직을 처음에는 아래와 같은 useEffect를 간단히 생각했는데, const Home: NextPage = () => { const [purchases, setPurchases] = useState([ { product: "과자", price: "2000", }, { product: "사탕", price: "300", }, ]); useEffect(() => { // 잔액계산 로직 // purchase의 가격들을 다 더하고 totalPrice에 넣는다 // 그 후에 salary에서 뺀다. }, [purchases]); return ( ... ... ); }; 이렇게 되면 상품명만 바뀌었을때 금액은 변함이 없어서 잔액계산을 할 필요가 .. 2022. 7. 30. router.push, <Link />, <a /> 차이 Next로 만든 제품 코드리뷰를 하다가 다음과 같은 코드를 보았다. const handleFunc = () => { router.push(`/example/${example.slug}`); }; return ( {example.name} ... ) 단순 페이지 이동같은데 왜 Link를 안쓰고 router.push 를 쓸까?? 그런데 Link와 router.push의 차이가 뭐지??? 궁금해졌다. 한글자료만 찾아봐도 잘 안나와서 결국 스택오버플로우를 들어갔는데 너무 정갈하게 설명이 나와있었다. 진작에 볼껄.. router.push window.location과 비슷하지만 태그를 만들지 않음. => 크롤러가 탐색하지 못함 SEO에 좋지 못하니 단순 페이지 이동을 위해서라면 사용하지 않는 것이 좋음. 태그를 .. 2022. 7. 29. _document _app.tsx 와 함께 _document는 서버에서만 렌더링되는 파일이기 때문에 onClick같은 이벤트, window객체, DOM 등 클라이언트에서 사용하는 코드는 사용될 수 없다. (_app 실행 이후 _document 실행됨) pages폴더 안에 _document.tsx를 만들면 된다.(typscript를 사용하지 않으면 _document.js) 그럼 _document.tsx는 뭐하는녀석일까?? html을 커스텀하라고 next.js에서 제공하는 녀석이다. 공통으로 사용할 폰트태그를 _document.tsx의 Head태그에 넣어보자 localhost:3000/hi를 다음과 같이 작성하고 _document.tsx의 태그안에 다음과 같이 넣어주면 next/document 에서 제공하는 기본적인 태그들.. 2022. 7. 26. 이전 1 2 3 다음 반응형
