봉보로봉봉

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

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 요소 또는 컴..

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