봉보로봉봉

변수 선언하기 typescript를 사용하므로 defineComponent로 export default를 한다. 사용할 변수나 함수는 setup() 안에서 선언하고 return을 해준다. 변수는 reactive 함수로 감싸줘야 값을 동적으로 변경할 수 있는 것 같다. 선언한 변수를 이용해 class 넣기 일반적인 클래스는 class에 넣으면 되고 변수를 사용하는 class는 앞에 :을 붙여서 :class로 사용하면 된다. 리액트처럼 class 안에 다 넣으려고 {}를 쓰지 않고 따로따로 써도 동작한다. 한국어 English 함수 선언하기 사용할 함수도 똑같이 setup() 안에 선언하고 return 할 때 넣어주면 된다. export default defineComponent({ setup() { con..

토이 프로젝트를 하나 하려는데 react+ts로 할까 하다가 vue 공부를 하다만 게 생각나서 vue로 프로젝트를 생성했다! 오랜만에 생성하니까 정말 하나도 기억이 안난다! 🤯 블로그에 적어둔 것도 없어서 이번에는 적어가면서 진행하려고 한다 😀 vite로 프로젝트를 생성한다. npm create vite@latest 내 프로젝트 -- --template vue d.ts 파일 생성 import from에 vue 모듈이 없다고 난리를 치면 때문에 황급히 d.ts 파일을 생성한다. 참고 컴포넌트 선언 문법 Options API vs Composition API options API는 기존 vue 2.X 버전 때 사용하던 방법이다. data()가 return 하는 객체 안에 변수를 정의하고, methods에 함..

처음 보는 에러 등장! TypeError: JSON.stringify cannot serialize cyclic structures. JSON.stringify는 순환 구조를 직렬화할 수 없습니다. 찾아보니 순환 참조 객체는 JSON.stringify를 사용하면 에러를 발생시킨다고 한다. MDN 페이지 순환 참조란 무엇인가? A가 B를 참조하고 B가 A를 참조하는 경우처럼 순환 참조는 모듈이 서로를 참조하고 있을 때를 이야기한다. A가 B를 참조하고 B는 C를 참조하고 C는 A를 참조하면? 이런 상황이 순환 참조이다. 마치 가위바위보처럼... A -> B -> C -> A 프로젝트가 커지고 여러 사람이 개발하다보면 이런 상황이 발생할 수 있는 것 같다. Circular Dependency, Referen..

별별 패턴이 다 있군요 😀 아키텍처 패턴 마스터-슬레이브 패턴 (Master-Slave Pattern) 마스터 컴포넌트에서 슬레이브 컴포넌트로 작업을 분할한 후 슬레이브 컴포넌트에서 처리된 결과물을 다시 돌려받은 방식으로 작업을 수행한다. 마스터 컴포넌트는 모든 직업의 주체이고, 슬레이브 컴포넌트는 마스터 컴포넌트의 지시에 따라 작업을 수행하여 결과를 반환한다. 장애 허용 시스템과 병렬 컴퓨팅 시스템에서 주로 활용된다. 브로커 패턴 (Broker Pattern) 사용자가 원하는 서비스와 특성을 브로커 컴포넌트에 요청하면 브로커 컴포넌트가 요청에 맞는 컴포넌트와 사용자를 연결해 준다. 원격 서비스 호출에 응답하는 컴포넌트들이 여러 개 있을 때 적합한 패턴이다. 분산 환경 시스템에서 주로 활용된다. 피어-투..

구질구질한 라우터에 질린 사람 헤쳐 모여~ 라우터를 저렇게 만드는 방법밖에 몰랐는데 새로운 방법을 알게 되었다. 바로 createBrowserRouter 사용하기! 😀👍 createBrowserRouter createBrowserRouter를 사용하면 라우터를 생성할 수 있다. 라우팅 정보를 담은 배열을 인자로 넣어주면 된다. 그리고 path에 경로를 설정하고 해당 경로에서 보여줄 컴포넌트를 element에 넣는다. 만약 한번 더 들어가는 경로라면(예: /board/all 과 /board/notice) children에 넣으면 된다. 경로가 계속 타고 간다면 같은 방법으로 타고 갈 수 있도록 정해주면 된다. import { createBrowserRouter } from 'react-router-dom'..

여러분은 string[]과 [string]이 다른 것이라는 사실을 알고 계십니까...? 오늘 ChatGPT에게 물어보며 문제를 해결하던 중 새로운 개념을 발견했다. [string] is a tuple type with a single element of type string, while string[] is an array type that can have zero or more elements of type string. const tuple: [string] = ["hello"]; // valid const array: string[] = ["world"]; // valid const anotherTuple: [string] = []; // error: expects exactly one elemen..

Vue.js props 속성 부모 컴포넌트로부터 받아오는 props를 props 속성에 정의한다. 자식 컴포넌트에서는 부모 컴포넌트의 props를 변경해서는 안된다. export default { props: { greetingMessage: String } } {{ greetingMessage }} filters 속성 사진에 씌우는 필터와 비슷하다고 생각하면 된다. 텍스트를 원하는 형식으로 바꾼다. 아래와 같은 형식으로 사용한다. {{ message | capitalize }} filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() +..

useQuery useQuery는 주로 GET으로 데이터를 받아올 때 사용하고 data, isLoading, Error 속성이 있는 객체를 반환한다. 처음으로 특정 데이터를 받아와 캐싱할 때 사용한다. data는 통신을 하고 난 뒤 받게 되는 데이터를 말한다. const {data, isLoading, Error} = useQuery('queryKey', queryFN, [options]) useMutation useMutation는 POST, DELETE를 사용해 수정, 삭제와 같이 서버 데이터를 변경할 때 사용한다. mutate 함수를 사용할 수 있다. const {mutate} = useMutation(queryFN, options) mutate(parameter) 이렇게 사용할 수도 있다. 이때 ..