봉보로봉봉

서버에서 전달받은 데이터를 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-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 객체 안에 넘겨준 값의 이름을 키, 대..

Month.vue와 WriteBtn.vue 파일을 생성해서 자식 컴포넌트 2개를 만들었다. 리액트랑 똑같이 import해서 html 태그로 넣어줬는데 브라우저에서 검사로 보면 태그가 들어갔는데 화면에는 아무것도 안보였다. 넣어줬는데....? 😯 vue에서는 자식 컴포넌트를 쓰고 싶으면 components에 해당 컴포넌트 이름을 넣어줘야한다. // 부모 컴포넌트 export default defineComponent({ setup() { const data = reactive({ selectedKr: true, }); const changeButtonState = (e: Event) => { const target = e.target as HTMLButtonElement; target.id === 'kr'..

변수 선언하기 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에 함..