letsgojieun

앞의 포스팅에서도 언급했지만 다시 정리하기 위해 작성해본다! vue를 사용하기에 앞서, 먼저 node.js를 설치해야 한다. node.js란? 자바스크립트 해석기! 텍스트로 프로그래밍하지만 결국은 C언어로 프로그래밍하는 거나 마찬가지이다 노드제이에스를 설치하면 자바스크립트를 사용하지만 C언어로 프로그래밍하는 효과를 준다노드제이에스 설치하면 서버에서 자바스크립트를 해석할 기능이 생긴다! 그리고 npm이라는 응용프로그램이 같이 설치되는데 (= node package manager)라이브러리 관련 다운로드는 npm js 사이트에서 다운로드가 가능하다   vue도 node.js 응용프로그램이다    결국은 자바스크립트를 얻어내는 것소스코드의 품질을 높이기 위해 타입 스크립트 사용하기도 한다타입 스크립트는 tsc..

뷰 개발환경은 node js server이다그리고 node js를 설치하면 npm이 같이 설치되는데 이는 node package manager의 줄임말이다    웹브라우저에서 ajax 요청은?우리는 자바 기반의 서버를 배웠는데 뷰를 node.js 서버 기반에서 개발해야 하는데그럼 ajax 요청을 어디로 해야 하나?    결국 서버를 두 개 돌려야 한다. 개발환경에서 계속 개발하기 쉽지 않은데뷰는 이렇게도 가능하지만 리액트 같은 경우엔 cli 개발환경에서만 가능하다    dist 최종적으로 심어놓으면 그 밑에 꺼는 다 필요 없다 (개발과정일 뿐)    새로운 프로젝트를 생성하고 폴더를 확인해보면 다양한 폴더와 파일들이 존재한다    새로 만든 프로젝트 파일 안에서npm run serve를 입력해보자    ..

v-if 첫 번째가 false면 그 밑에 있는 v-else가 실행된다 자바에서는 이런 for문이 가능하지만vue는 안된다 (오직 배열에서 빼내는 거만 가능하다)   배열의 아이템 빼내는 것만 가능한데그렇다면 아이템 배열이 1 - 5면 12345, 6-10이면 678910 이렇게 되도록 만들 수 있을까?   1~5번까지 이 5개의 값은 관리가 되어야 한다pageNum 초기값은 1로 설정되야하고 각 링크 누를 때 다른 값들을 서버로부터 지속적으로 받아와야 한다 v-bind 줄이면 콜론: 만 사용해도 되며 여러 단어를 조합할 땐 언더바 사용이 제일 마음 편하다 (카멜 케이스 신경 써야 하기 때문)    href=""로 비워 놨기 때문에 클릭하면 현재 페이지로 새로 로딩되는데, 다른 페이지 혹은 원래 페이지에서..

members에는 오브젝트가 들어있고 item에 순서대로 들어간다   최종적으로 리턴되는 건 number 타입   indexOf는 찾는 문자열이 몇 번째에 있는지 알려주는데만약 없는 문자를 찾는 경우 -1을 리턴한다     위에를 이렇게 줄일 수 있다검색 여러 번 하게 하려면? 원본 배열과 현재 배열, 이렇게 두 개로 관리해줘야 한다    원본은 members, 현재는 currentMembers로 관리해보자여기서 렌더링 되는 건 반복문을 통해서 렌더링 된 게 화면에 나오는 것이기 때문에 currentMembers가 되어야 한다   ajax promise는 fetch 사용하는데 문제는 최신 웹브라우저에서만 동작하여크롬, 에지는 가능한데 ie는 안된다. 이럴 땐 axios를 사용하면 해결이 가능하다  htt..

제이슨 데이터를 Vue에서 받아와서 모델로 사용해보자    ajax promise를 사용하려 했지만 동작하지 않고콘솔 창을 확인해보니 에러가 생겼다   CORS정책에 위반된다  특정 웹서버로부터 콘텐츠를 응답을 받고 특정 시점에 ajax 요청을 동일한 서버에 하면 응답이 잘 온다하지만 다른 웹서버에 ajax 요청이 가능하냐? 이건 원칙적으로 불가능하다응답은 a서버로 받아놓고, 요청은 b같은 다른 서버로 보내버리는 게 원칙적으로 막아져 있다이럴 때 CORS 오류가 뜨는데 이는 교차 출처 리스소 공유라고 한다    이건 톰캣 서버로부터 출력받은 내용이 아닌데 ajax요청을 톰캣으로 하고 있기 때문에CORS 오류가 뜬 것이다    해결하는 방법은?VSC에 있는 이 페이지를 복사해서 톰캣으로 옮기는 방법이 있다..

이건 app안에서만 사용이 가능한 컴포넌트이며,이것보다 전역 컴포넌트로 사용하는 경우가 더 많다      데이터를 직접 전달하는 것이 아닌, root 컴포넌트의 모델명 (fortune) 전달도 가능인덱스 키값은 DB에 있으면 primary key값이 존재하겠지만 여기선 임시로 사용하기 때문에 따로 주었다      eventemit? 부모는 자식에게 props를 전달, 자식은 부모에게 event를 발생시키면서 어떤 데이터를 전달이 가능부모는 그럼 component명에 on 붙여서 이름을 명시한다 mom이라는 이벤트 발생하면 feed라는 리스너 함수를 실행하겠다    자식 컴포넌트에서 특정 시점에 이벤트 발생하는 방법 -> this.$emit     자식 컴포넌트에서 삭제 버튼 누르면 부모 컴포넌트에서 de..

이번 포스팅에선 vue의 자식 컴포넌트와 부모 컴포넌트를 이용하여 재사용성을 높이는 방법에 대해 알아보자    컴포넌트를 정의하기동일한 템플렛을 계속하여 만들지 않아도, 컴포넌트를 통해 언제든지 불러서재사용을 할 수 있다 위의 코드에선my-component와 your-component를 정의하였다my-component에선 div 박스를 생성하고,your-component에서도 똑같이 div 박스를 생성하지만 부모(app)로부터 greet이라는 property를 받는다 위의 부모 요소를 보면 your-component v-bind:greet = " '안녕하세요' "라고 greet에 property를 전달해주었다.    위의 코드에 대한 결과물이다html 영역에 컴포넌트만 추가했을 뿐인데, 직접 html에 ..

어제의 포스팅에 이은 Vue.js의 class, 그리고 반복문 v-for에 대해 정리하겠다    Vue 프레임워크를 이용해서 class를 동적으로 쉽게 만드는 방법이 존재한다.위의 코드는 버튼 7이라는 이름의 버튼을 갖고 있으며, 따로 부트스트랩 요소를 추가해주지 않는 상태이다. 바로 옆의 input창의 value값을 모델로 지정해놨으며,만약 무언가를 작성하고 옆의 add 클릭 이벤트가 등록되어있는 추가 버튼을 클릭하면 부트스트랩 요소가 적용된다(밑의 예시에서 보여주겠지만, btn과 btn-primary라는 부트스트랩 요소를 이용했다) 여기서 우리가 데이터로 받는 건arr과 inputClass이며, 디폴트 값으로 arr의 경우 입력되는 대로 값을 하나씩 받을 예정이라 빈 배열 [ ]로 지정해놨다. 그리고..

저번 포스팅에 이어서 마저 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가 아닌 다른 값을 지..

학원에서 배웠지만 사용을 안 하다 보니 그새 머릿속에서 지워지고 있었다기억을 되살리자는 의미로 블로그에 정리를 해보겠다   본격적으로 Vue.js 시작하기Vue 공식문서를 참고해가면서 공부하면 좋다참고 예시가 아주 잘 나와있기 때문 :)  vue 공식 페이지의 '시작하기'를 클릭해서 천천히 읽어보기를 추천한다 일단 HTML 코드 복사하여 사용하고자 하는 파일에 붙여 넣는다  https://kr.vuejs.org/v2/guide/ 시작하기 — Vue.jsVue.js - 프로그레시브 자바스크립트 프레임워크kr.vuejs.org      안에 vue를 작성한다app이라는 새로운 vue 생성자를 만들고,여기에 연결 요소를 추가하려면 el: "#아이디 이름"을 작성하여 컨트롤이 가능하다밑의 data에 원하는 데이..