01_PROJECT30 카테고리별 상품 목록 보여주기 NavBar는 아래와 같이 화면을 만들었는데 개별 화면으로 넘어가야할 것들은 리액트 라우터의 Link를 통해 넘기고 카테고리는 따로 컴포넌트를 만들었다. 카테고리 컴포넌트 useProducts()훅스를 통해서 받아온 데이터인 products에서 category만 가져온다. 중복을 피하기 위해 Set이라는 자료구조를 사용하고 새로운 배열로 만든다. [new Set(dataCategories]를 하게 되면 Set객체를 감싸는 배열이 된다는 거. [...new Set(dataCategories] 스프레드 연산자를 사용해야 새로운 배열을 생성해준다. 그리고 ALL을 추가하고 ETC는 뒤로 가야해서 저렇게 코드를 썼다...저래도 되는 건가.. 카테고리 별 상품이 보여질 페이지는 AllProduct.jsx인데 이 .. 2023. 10. 28. client.defaultQueryOptions is not a function 에러 해결하기 분명 코드엔 문제가 없는데 계속 이런 에러가 떴다... 예전에 3버전이 썼던 것 같은데 package.json 들어가보니 지금은 5버전이다. 공식 문서에 들어가 보니 아래처럼 코드를 쓰라고 되어있다. 참고자료 https://tanstack.com/query/v5/docs/react/guides/queries Queries | TanStack Query Docs Query Basics A query is a declarative dependency on an asynchronous source of data that is tied to a unique key. A query can be used with any Promise based method (including GET and POST methods).. 2023. 10. 24. [ JavaScript ] Set, 중복된 값을 허용하지 않는 고유한 값을 저장하는 자료구조 오브젝트 v2 에는 찜하기 버튼과 내가 찜한 콘텐츠를 볼 수 있도록 했다. 유저별로 각각 찜을 할 수 있고 개별로 '내가 찜한 콘텐츠'에 목록이 나타난다. 내가 찜한 콘텐츠에 찜한 영상 목록을 넣을 때 중복된 요소를 자동으로 제거해준다는 아주 편리한 자료구조인 Set 에 대해 알아보자. Set Set이란 자바스크립트에서 제공하는 내장 객체로 고유한 값을 가지는 집합을 나타내는 자료구조이며 Set은 값의 순서를 유지하며 중복된 값을 허용하지 않는다. Set 객체 생성하기 new Set() const set = new Set(); Set 메서드 add(value) Set에 값을 추가한다. 이미 존재하는 값이면 무시됨. delete(value) Set에 값을 제거한다. has(value) Set에 특정 값을 .. 2023. 8. 4. [ JavaScript ] for 반복문과 forEach 메서드에 대하여 for 반복문 break나 continue와 같은 제어문을 사용할 수 있다. 초기화, 조건식, 증감식을 사용하여 반복동작을 정밀하게 제어할 수 있다. 배열의 인덱스를 직접 접근할 수 있어 특정 인덱스를 기준으로 반복하는 것이 가능하다. 반복문 내에 다양한 제어와 로직을 처리 시 유연성을 제공한다. 코드가 더 복잡하거나 길어질 수 있다. const numbers = [1, 2, 3, 4, 5]; let sum = 0; for(let i=0; i { sum += num; }); console.log(sum); //15 2023. 8. 3. [ JavaScript ] 정규식과 관련된 편리하고 유용한 메서드를 알아보자 정규식(Regular Expression)은 문자열을 처리하는데 아주 유용한데, 문자열을 검색한다거나, 추출한다거나, 패턴을 찾거나 등등 JavaScript에서는 정규식을 다루기 위해 여러가지 유용한 메서드를 제공하고 있다. 정규식과 관련된 유용한 메서드를 알아보자. 1. test() 주어진 문자열이 정규식과 일치하면 true, 그렇지 않으면 false로 불리언 값으로 반환한다. const regex = /hello/; const str = 'hello regex'; const result = regex.test(str); console.log(result); // true 2. exec() 주어진 문자열에서 정규식과 일치하는 부분을 찾아 배열로 반환. 첫번째 요소는 일치한 부분 문자열, 나머지 요소는 .. 2023. 8. 3. [ JavaScript ] scrollIntoView()로 스크롤을 원하는 위치로 이동하기 개인적으로 요즘은 무한 스크롤 방식을 많이 사용해서 스크롤을 많이 내렸을 때 빠르게 상단으로 이동하고 싶은데 막막할 때가 많다. 그럴 때 위와 같이 스크롤을 상단으로 이동하는 버튼이 있으면 참 편리하다는 생각을 많이 했다. 그래서 해당 버튼을 구현해 보았고,이렇게 스크롤을 원하는 위치로 쉽고 간단하게 이동하는 방법으로는 scrollIntoView() 메소드를 활용할 수 있다. scrollIntoView 메서드 사용법 원하는 DOM요소에 이 메소드를 호출하면 해당 요소가 뷰포트 내로 보이도록 한다. const targetElement = document.getElementById('targetElement'); targetElement.scrollIntoView(); 위의 코드는 targetElement라.. 2023. 8. 3. 이전 1 2 3 4 5 다음
