봉보로봉봉

함수 안에 파이어 베이스 데이터를 불러오는 코드를 await 키워드와 함께 썼더니 에러가 발생했다. const changeDiarys = (date: string) => { const getNewData = async (database: Firestore) => { ... }; const data = await getNewData(db); ... }; 'await' expressions are only allowed within async functions and at the top levels of modules. 이유 await은 async와 함께 쓸 수 있기 때문에 해당 비동기 코드를 감싸고 있는 함수에 async 키워드를 붙여주니 해결 됐다. const changeDiarys = async (da..

객체를 선언해서 key는 숫자 value는 영문 월을 담아뒀는데 접근해서 사용하려고 하니까 빨간줄이 생겼다. as string으로 타입을 정해줘도 해결되지 않았다. Element implicitly has an 'any' type because expression of type 'string' can't be used to index 대괄호 접근 키값이 any여서 그랬다. 객체에 타입을 정해주고 대괄호로 접근하려는 키값에 키라고 as 키워드를 사용해서 정해주니 해결됐다. const monthsEn : MonthsType = { '1':'Jan', '2':'Fab', '3':'Mar', '4':'Apr', '5':'May', '6':'Jun', '7':'Jul', '8':'Aug', '9':'Sept', ..

서버에서 전달받은 데이터를 props로 넘겨서 v-for를 돌렸다. 그런데 자꾸 item이 unknown이라고 빨간줄을 그으며 분노하신다... diarys는 객체 배열인데 정확히 어떤 데이터가 오는지 몰라서 분노하신 것 같다... 그만하세요 타스 선생님 제발......😫 ... // diarys는 객체 배열인 props이다. props: { diarys: Array, }, ... // 정확한 item의 타입을 몰라 분노하는 것으로 추정 interface를 선언해서 as 키워드로 타입을 정해줘봤다. // 타입 선언 interface DiaryItemType { date: string; reason: string; level: number; } ... // as 키워드로 DiaryItemType[]라는 타입..

promise.all() 주어진 모든 프로미스가 이행하거나, 한 프로미스가 거부될 때까지 대기하는 새로운 프로미스를 반환한다. 반환하는 프로미스가 이행한다면, 매개변수로 제공한 프로미스 각각의 이행 값을 모두 모아놓은 배열로 이행한다. 배열 요소의 순서는 매개변수에 지정한 프로미스의 순서를 유지한다. 반환하는 프로미스가 거부된다면, 매개변수의 프로미스 중 거부된 첫 프로미스의 사유를 그대로 사용한다. 순회 가능한 객체를 인자로 받아 객체에 주어진 모든 프로미스를 이행한 후 결과를 반환한다. 주어진 프로미스 중 하나라도 reject 될 경우 reject 된 값을 반환한다. 매개변수 : 순회 가능한(iterable) 객체 반환 값 : promise 전달받은 비동기 작업 여러 개가 모두 완료될 때까지 기다렸다..

v-if를 쓸 때 쓸데없는 html 태그가 렌더되는 것을 원치 않을 때는 를 쓰면 된다! v-if와 함께 쓰면 html가 렌더되지 않는다. 작성하기 // template 사용 TEST ... v-if 없이 사용하면 일반 html template 태그로 인식하는 것 같다.. 🤔

v-for 객체나 배열을 순회하여 html 요소를 만들어낸다. React에서의 map()과 비슷하다. key 속성은 React와 달리 필수는 아니지만 같은 이유로 사용하는 것이 권장된다. // 객체 배열로 v-for를 사용할 때 {{ item.name }} 객체 배열이 아닌 그냥 배열로도 사용가능하다. // 배열로 v-for을 사용할 때 {{ item }} 객체로 사용할 때 1번째 인자는 값, 2번째 인자로 키를 받아올 수 있다. // 객체로 v-for를 사용할 때 {{ key }}: {{ value }} ref React의 ref와는 다르게 DOM을 직접 조작하지 않는다. 요소 또는 컴포넌트 인스턴스에 대한 반응형 참조를 생성하는 방법으로 사용된다. 이를 통해 반응형 방식으로 기본 DOM 요소 또는 컴..

대체 vue에서는 부모 컴포넌트의 함수를 어떻게 실행하는가...!!!!! 수많은 시행착오 끝에 알게 됐다.... 챗지피티가 data() 버전으로만 알려주거나 헛소리를 해서 한참 걸렸다.... 믿을게 못 되는 녀석..... 먼저 부모컴포넌트에서 전달할 함수를 @나 v-on:키워드를 사용해서 전달해 준다. 이유는 모르겠지만 ref를 사용해야 이벤트가 발생했을 때 값이 바뀌는 것 같아서 ref도 추가해 줬다. ref는 다음에 찾아볼 예정이다. // 부모 컴포넌트 ... export default defineComponent({ setup() { const isShowModal = ref(false); const showModal = () => { isShowModal.value = !isShowModal.va..

컴포넌트를 재사용하는게 좋을 것 같아 props가 필요해졌다. vue에서는 props를 어떻게 넘기는지 알아봤다. 먼저 부모 컴포넌트에서 데이터를 넘겨준다. 넘겨주는 값의 이름을 정하고 :를 붙이면 된다. 나는 lanType과 select라는 props를 넘겨줬다. 그리고 신기하게 vue에서는 넘기는 값의 ""의 내부가 자바스크립트 코드를 쓸 수 있는 범위인 것 같다. "" 안에 그냥 쓰면 변수이고, 문자열을 넣고 싶으면 따옴표로 감싸줘야 한다. 그래서 '한국어'와 'English'라는 문자열을 넘길 때 안에서 작은따옴표로 감싸서 문자열을 넘겨줬다. // 부모 컴포넌트의 태그 내부 부모 컴포넌트에서 값을 넘겨줬으면 이제 자식 컴포넌트에서 값을 받아야한다. props 객체 안에 넘겨준 값의 이름을 키, 대..