[vue-query] query key 관련 공식문서 정리
·
🤓 기술 학습 & 공부 기록/프론트엔드
📍Query Key의 형태- 직렬화가 가능한 값들의 배열이어야 함- 직렬화가 가능하다 => json.stringify()를 적용할 수 있고, 적용하면 항상 동일한 문자열로 변환된다// 일반적인 배열const userQueryKey = ["user", 1];// JSON.stringify(usersQueryKey) // '["user",1]'// 객체const postQueryKey = ["user", { id: 42 }];// JSON.stringify(postQueryKey) // '["post",{"id":42}]'// An individual todouseQuery({ queryKey: ['todo', 5], ... })// An individual todo in a "preview" format..
<객체지향의 사실과 오해> 4.역할, 책임, 협력
·
🖥️ 컴퓨터 일반/🎻 객체지향
1. 협력협력은 요청으로부터 시작되며 다수의 요청과 응답으로 구성된다 2. 책임책임의 분류1️⃣ 객체가 무엇을 알고 있는가 -> 아는 것(knowing)- 개인적인 정보에 관해 아는 것- 관련된 객체에 관해 아는 것- 자신이 유도하거나 계산할 수 있는 것에 관해 아는 것 2️⃣ 객체가 무엇을 할 수 있는가 -> 하는 것(doing)- 객체를 생성하거나 계산을 하는 등의 스스로 하는 것- 다른 객체의 행동을 시작시키는 것- 다른 객체의 활동을 제어하고 조절하는 것 📍 책임과 메시지메시지 전송(message-send)- 객체가 다른 객체에게 주어진 책임을 수행하도록 요청을 보내는 것- 협력 안에서 객체는 다른 객체로부터 요청이 전송됐을 경우에만 자신에게 주어진 책임을 수행한다- 한 객체가 다른 객체에게 전..
지극히 개인적인 프론트엔드 개발자의 맥북 초기세팅
·
🎶 일반/🎸 기타
지극히 개인적인 프론트엔드 개발자의 맥북 초기세팅 1. 크롬 브라우저 설치- 북마크 세팅- 익스텐션 설치(Deepl, React dev tools ...) 2. 터미널 호스트 이름 고정Iterm2를 설치하기 전에는 기본 터미널을 사용해야 한다. 초기화 이후 공용 네트워크에 접속하면 가끔 터미널 호스트 이름이 변경되는 일이 발생한다..  터미널에 아래 명령어를 입력하면 호스트 이름을 바꿀 수 있다scutil --set HostName [새 호스트 이름] 3. Homebrew 설치https://brew.sh/ 공식 홈페이지 참조설치 이후 터미널을 참고하여 path 추가 4. iterm2 설치https://iterm2.com/index.html 공식 홈페이지 참고 5. iterm2 꾸미기5.1. 폰트 설치터미..
<객체지향의 사실과 오해> 3.타입과 추상화
·
🖥️ 컴퓨터 일반/🎻 객체지향
1. 추상화를 통한 복잡성 극복📍 추상화의 목적- 단순화- 복잡도를 다루기 위해 추상화한다📍 추상화의 정의- 어떤 양상, 세부 사항, 구조를 좀더 명확하게 이해하기 위해 특정 절차나 물체를 의도적으로 생략하거나 감춤으로써 복잡도를 극복하는 방법📍 추상화 방법 2가지1. 구체적인 사물들 간의 공통점은 취하고 차이점은 버리는 일반화2. 중요한 부분을 강조하기 위해 불필요한 세부사항을 제거- 객체지향에서는 객체라는 추상화를 통해 현실의 복잡성을 극복한다 2. 객체지향과 추상화📍 앨리스의 추상화 예시- 하트 여왕, 스페이드 정원사, 클로버 병사 등을 모두 트럼프 객체로 단순화(토끼는 트럼프로 추상화 불가)- 트럼프로 단순화할 수 있는 이유는, 위의 모든 인물들이 트럼프의 일반적인 외형과 행동방식을 지녔기..
<작심삼주 오블완 챌린지>를 소개합니다
·
🎶 일반/🎸 기타
티스토리에서 작심삼주 오블완 챌린지를 시작한다고 합니다! 📍오블완 챌린지는?- 21일 동안 매일 글쓰기 도전! 📍일정- 2024년 11월 7일(목) - 11월 27일(수) 📍참여 혜택  아래 사이트 방문해서 정보를 확인해보세요!! https://www.tistory.com/event/write-challenge-2024 작심삼주 오블완 챌린지오늘 블로그 완료! 21일 동안 매일 블로그에 글 쓰고 글력을 키워보세요.www.tistory.com
[Nuxt] 형제 컴포넌트끼리 데이터 공유하기
·
🥁 Frontend/⛰️ Vue.js & Nuxt
📍목표- Nuxt3(Vue.js) 에서 형제 컴포넌트끼리 데이터 공유하기 📍React vs Vue 데이터 공유 비교- React는 단방향 데이터 플로우이므로 아래 사진처럼 부모 컴포넌트에서 자식 컴포넌트로 데이터가 흐른다- 반면, Vue 에서는 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 수 있다. event emit을 활용하면 된다  📍자식1 컴포넌트에서 상태 변경- defineEmits() 를 활용해서 emit 함수 정의하기- 상태를 변경할 자식 컴포넌트에서 먼저 defineEmits()로 emit 함수를 선언한다- 그리고 컴포넌트가 마운트 되면 mountain 기본값을 emit 해준다- 상태가 변경될 때마다 emit을 실행하기 위해 watch를 사용한다 MountainHeader.vue ..