본문 바로가기

IT 개발85

Vue 시작하기 ⑦ members에는 오브젝트가 들어있고 item에 순서대로 들어간다   최종적으로 리턴되는 건 number 타입   indexOf는 찾는 문자열이 몇 번째에 있는지 알려주는데만약 없는 문자를 찾는 경우 -1을 리턴한다     위에를 이렇게 줄일 수 있다검색 여러 번 하게 하려면? 원본 배열과 현재 배열, 이렇게 두 개로 관리해줘야 한다    원본은 members, 현재는 currentMembers로 관리해보자여기서 렌더링 되는 건 반복문을 통해서 렌더링 된 게 화면에 나오는 것이기 때문에 currentMembers가 되어야 한다   ajax promise는 fetch 사용하는데 문제는 최신 웹브라우저에서만 동작하여크롬, 에지는 가능한데 ie는 안된다. 이럴 땐 axios를 사용하면 해결이 가능하다  htt.. 2021. 8. 13.
Vue 시작하기 ⑥ 제이슨 데이터를 Vue에서 받아와서 모델로 사용해보자    ajax promise를 사용하려 했지만 동작하지 않고콘솔 창을 확인해보니 에러가 생겼다   CORS정책에 위반된다  특정 웹서버로부터 콘텐츠를 응답을 받고 특정 시점에 ajax 요청을 동일한 서버에 하면 응답이 잘 온다하지만 다른 웹서버에 ajax 요청이 가능하냐? 이건 원칙적으로 불가능하다응답은 a서버로 받아놓고, 요청은 b같은 다른 서버로 보내버리는 게 원칙적으로 막아져 있다이럴 때 CORS 오류가 뜨는데 이는 교차 출처 리스소 공유라고 한다    이건 톰캣 서버로부터 출력받은 내용이 아닌데 ajax요청을 톰캣으로 하고 있기 때문에CORS 오류가 뜬 것이다    해결하는 방법은?VSC에 있는 이 페이지를 복사해서 톰캣으로 옮기는 방법이 있다.. 2021. 8. 12.
Vue 시작하기 ⑤ 이건 app안에서만 사용이 가능한 컴포넌트이며,이것보다 전역 컴포넌트로 사용하는 경우가 더 많다      데이터를 직접 전달하는 것이 아닌, root 컴포넌트의 모델명 (fortune) 전달도 가능인덱스 키값은 DB에 있으면 primary key값이 존재하겠지만 여기선 임시로 사용하기 때문에 따로 주었다      eventemit? 부모는 자식에게 props를 전달, 자식은 부모에게 event를 발생시키면서 어떤 데이터를 전달이 가능부모는 그럼 component명에 on 붙여서 이름을 명시한다 mom이라는 이벤트 발생하면 feed라는 리스너 함수를 실행하겠다    자식 컴포넌트에서 특정 시점에 이벤트 발생하는 방법 -> this.$emit     자식 컴포넌트에서 삭제 버튼 누르면 부모 컴포넌트에서 de.. 2021. 8. 11.
Vue 시작하기 ④ 이번 포스팅에선 vue의 자식 컴포넌트와 부모 컴포넌트를 이용하여 재사용성을 높이는 방법에 대해 알아보자    컴포넌트를 정의하기동일한 템플렛을 계속하여 만들지 않아도, 컴포넌트를 통해 언제든지 불러서재사용을 할 수 있다 위의 코드에선my-component와 your-component를 정의하였다my-component에선 div 박스를 생성하고,your-component에서도 똑같이 div 박스를 생성하지만 부모(app)로부터 greet이라는 property를 받는다 위의 부모 요소를 보면 your-component v-bind:greet = " '안녕하세요' "라고 greet에 property를 전달해주었다.    위의 코드에 대한 결과물이다html 영역에 컴포넌트만 추가했을 뿐인데, 직접 html에 .. 2021. 8. 9.
Vue 시작하기 ③ 어제의 포스팅에 이은 Vue.js의 class, 그리고 반복문 v-for에 대해 정리하겠다    Vue 프레임워크를 이용해서 class를 동적으로 쉽게 만드는 방법이 존재한다.위의 코드는 버튼 7이라는 이름의 버튼을 갖고 있으며, 따로 부트스트랩 요소를 추가해주지 않는 상태이다. 바로 옆의 input창의 value값을 모델로 지정해놨으며,만약 무언가를 작성하고 옆의 add 클릭 이벤트가 등록되어있는 추가 버튼을 클릭하면 부트스트랩 요소가 적용된다(밑의 예시에서 보여주겠지만, btn과 btn-primary라는 부트스트랩 요소를 이용했다) 여기서 우리가 데이터로 받는 건arr과 inputClass이며, 디폴트 값으로 arr의 경우 입력되는 대로 값을 하나씩 받을 예정이라 빈 배열 [ ]로 지정해놨다. 그리고.. 2021. 8. 8.
Vue 시작하기 ② 저번 포스팅에 이어서 마저 Vue 시작하기 포스팅을 해보겠다!    자바스크립트에서 input 요소의 value를 vue에서 v-model을 통해 지정할 수 있다위의 코드에선 input의 value를 msg라는 모델명으로 사용했다  그리고 input에서 작성한 내용(msg)이 바로 밑의 p요소의 innerText로 그대로 나오게끔 하기 위해  {{msg}}와 두 가지 방법을 사용했다.  input 창에 v-model!!!이라고 작성해보니기존의 {{}}와 v-text 두 가지 방법 모두 제대로 작동한다      위의 예시와 마찬가지로 v-model을 이용하여 value값을 제어한다checkbox의 경우, 체크가 되어있으면 true 안되어있으면 false를 반환하는데ture, false가 아닌 다른 값을 지.. 2021. 8. 7.
반응형

티스토리툴바