티스토리챌린지

🌱 문제 상황마이페이지에서 내가 '리뷰 남긴 테마'와 '좋아요 누른 테마'로 구성된 탭을 눌렀을 때, 눌린 탭별로 테마 리스트가 업데이트되어야 합니다.그러나 테스트 도중, 아래의 움짤처럼 한쪽 탭에 아무 값도 존재하지 않을 때(아래는 리뷰 남긴 테마가 0개이고, 좋아요 누른 테마가 2개인 경우), 한쪽 탭에 해당하는 리스트 값이 다른 탭에 남아있는 오류를 발견하였습니다.기존에는 아래의 코드처럼 productMenuContents라는 배열로 메뉴 탭을 정의하고, 현재 선택된 메뉴 탭의 id값을 상태로 관리하였습니다.그리고 메뉴 탭을 나타내는 버튼()을 클릭할 때마다 onClick 이벤트로 탭 id 상태값을 변화시키고,useInfiniteQuery를 포함하는 파일에 쿼리키를 위한 파라미터로 메뉴 탭의 타입..

🪴 변수와 let변수(variable)란 데이터를 저장할 때 사용하는 '이름이 붙은 저장소'입니다. 변수로 선언된 값은 언제든지 변화할 수 있습니다.자바스크립트에서는 'let'이라는 키워드를 사용하여 변수를 선언합니다. - 출처 사이트자바스크립트에서 변수를 선언할 때 지켜야 할 몇 가지 제약사항이 존재합니다.변수명에는 [문자 | 숫자 | 기호 $, _]만 들어갈 수 있습니다.변수명의 첫 글자에는 숫자가 올 수 없습니다.자바스크립트에서 이미 사용 중인 예약어(reserved word)는 변수명으로 사용할 수 없습니다. 아래는 실제 프로젝트에서 변수를 사용했던 예시입니다.선택된 옵션값(selectedOption)에 따라 정렬 방식(orderBy)이 정해집니다.let orderBy = '';if (selec..

🪴 라이브러리란라이브러리란 특정 기능을 수행하는 코드의 집합으로, 개발자가 필요에 따라 라이브러리를 선택하여 사용할 수 있습니다.따라서 라이브러리를 사용하는 상황이라면 애플리케이션의 흐름을 제어하는 것은 개발자입니다.- F-Lab라이브러리는 특정 기능을 모듈화 한 것으로, 이미 작성된 변수나 함수, 클래스를 포함하고 있습니다.라이브러리는 애플리케이션의 구성요소가 되며, 적용되는 대상에서 바로 실행될 수 있는 형태로 제공됩니다.따라서 개발자는 목적에 따라 필요한 라이브러리를 고르고 설치하여 프로젝트에 적용시킵니다.개발자가 먼저 프로젝트의 흐름을 구성하고, 구현 과정에서 필요한 라이브러리를 가지고 와서 사용하게 되는 것입니다. 쉬운 예시로 많이 소개되는 것은 라이브러리를 가구에 비유하는 예시입니다.예를 들..

🍄 옵셔널 체이닝 연산자([?.], optional chaining operator)옵셔널 체이닝 연산자(?.)를 사용하면 프로퍼티가 존재하지 않는 중첩 객체에 에러 없이 안전하게 접근할 수 있습니다.- 출처 사이트먼저 체이닝 연산자(.)는참조하는 값이 nullish한 값(null 또는 undefined)이면 존재하지 않는 값에 접근한다는 이유로 에러가 발생합니다. 이때 옵셔널 체이닝 연산자(?.)를 사용하면참조하는 값이 존재하지 않을 때, 에러가 발생하는 대신 undefined를 리턴합니다.반대로 왼쪽 참조값이 nullish한 값이 아니라면 오른쪽 참조값의 결과를 반환합니다. 예를 들어, 아래와 같은 객체가 있을 때 const user = { name: 'Emma', } // user.cat?..