Vue를 이용해서 게시판을 만드는데 Vue인스턴스에 각 컴포넌트들을 상속해 컴포넌트에 있는 게시판 데이터를 가져오는 search()라는 함수를 호출하려고 했다. 그래서 Vue인스턴스가 mounted가 되자마자 컴포넌트의 search()함수를 호출하려는데 mounted 내에서 컴포넌트를 찾지 못하는 상황이 발생.. 위와 같이 컴포넌트에 있는 함수를 호출하였지만 해당 함수를 찾지 못한다.. 그런데 개발자도구를 이용해 확인해보니 함수뿐 아니라 아예 컴포넌트 자체를 찾기 못하는 상황.. 원래 Vue의 라이프 사이클링을 보면 mounted같은 경우 컴포넌트가 먼저 실행되고 그 후에 인스턴스가 실행이 되니 인스턴스의 mounted()내에서는 컴포넌트가 들어있어야 되는데 들어있지 않다.. 한시간 동안 계속 찾다가 결..

Vue를 이용해서 게시판을 작성하는데 에러가 떴따.. 템플릿을 적용하는데 실패했다는 에러내용인 듯한데.. 해당 에러 밑으로 템플릿 소스가 다 뜬다 그 소스들을 무시하고 맨 밑으로 내려가보니 위와 같은 에러메세지가 뜬다. key 관련 문제 때문에 템플릿을 적용할 수 없다는 내용같은데.. 예전에 랜더링 문제 때문에 key를 설정한 적이 있는데 그 문제인가 싶어 그 키를 지우니 제대로 돌아간다. 위에 v-for을 이용해 리스트를 출력하는 에 :key="board"를 설정해 놓았다. 원래 저 key를 이용하여 리스트가 변할때마다 리랜더링이 되도록 하여 했지만 실패했고 그걸 그대로 방치하여 에러가 떴던 것.. 확인 또 확인하자..

Vue를 이용하여 게시판을 만들고 있는데 랜더링이 되지않는다.. 현 상황은 게시판은 뿌려져 있고, 3페이지로 이동을 하면 쿼리를 통해 데이터(리스트/페이징)를 성공적으로 가져 왔고 해당 데이터를 컴포넌트의 data에 넣은 상황.. 그런데 이상하게 화면은 바뀌질 않았다.. Vue는 반응형 웹이기 때문에 data안에 있는 데이터 값이 변경 되면 분명 웹화면도 변경이 되야 하는데.. 위의 소스는 search(검색조건) 데이터를 Controller로 보내주는 역할을 하며 통신이 성공적으로 완료 되면 return되는 값을 result에 담아준다. 해당 result에 리스트, 페이징 데이터가 담겨있다. 분명 데이터값을 변경이 되었다.. 저 데이터 값을 컴포넌트의 data에도 넣어줬다.. 근데 왜 안될까.. 결국 이..

Vue를 이용하여 게시판 만드는 연습을 하는데 도중에 이러한 에러가 발생하였다. 해당 내용을 보면 component를 올바르게 등록하였는가? 라는 내용인데... 분명히 component를 등록하였다. 분명 위와 같이 해당 component를 등록하였는데 component가 등록되어 있지 않다고 하자 당황..... 이것 때문에 하루종일 헤매었다... 그러다 구글링을 하면서 Vue인스턴스가 component 보다 아래에 있어야 된다는 말을 듣고 설마... 하면서 위치를 바꿔보니 된다.... 뷰 인스턴스와 컴포넌트를 각각 javaScript파일로 만들어서 불러와서 이용을 하는 바람에 그걸 생각 못한 게 실수였다.. 뷰 인스턴스를 컴포넌트보다 먼저 불러와서 컴포넌트를 못찾음.. 뷰 인스턴스를 컴포넌트보다 아래 ..

Vue를 공부하면서 헷갈리는 data에 대해서 정리하고자 한다. 처음 Vue.js 튜토리얼을 통해 공부를 하면 인스턴스에 대해서 배운다. 인스턴스는 대략 다음과 같은 구조를 가지는데 보면 인스턴스(좌)는 data가 객체로 선언되어 있다. 해당 객체에 몇개의 데이터든 집어 넣고 필요할때마다 꺼내 쓸 수 있는 방식이다. 그런데 컴포넌트(우)를 보면 data가 객체가 아닌 함수로 이루어져 있는 것을 알 수 있다. 왜 다를까? 무언가 이유야 있으니 다른거겠지만, 모르고 쓰면 헷갈려서 정리를 하고자 한다. 우선 컴포넌트를 사용하는 이유를 알면 간단하다. 컴포넌트를 이용하는 이유는 필요할 때 마다 인스턴스를 작성하는 것이 아닌 필요할 때마다 꺼내 쓰는 재사용성을 위함이다. 만약 컴포넌트를 사용하지 않는다면 필요할 ..

오늘 컴포넌트간의 데이터 전달을 위한 props를 공부하고 있는데 갑자기 컴포넌트의 data함수 안에 있는 data 값에 어떻게 접근해야 하지 라는 궁금증이 생겨 크롬 관리자 도구에서 한시간 30분 동안 이것저것 입력해보다가 기록하고자 한다. 우선 props를 연습하기 전에 단순히 화면에 result값을 표출하는 컴포넌트를 생성하였다. 내가 원한 것은 해당 child1 컴포넌트 -> data함수 -> result2 의 데이터값을 꺼내는 것이었다. 위 소스를 통해 성공적으로 result2의 데이터를 꺼낼 수 있었다. 여기서 extendOptions를 이용하면 해당 컴포넌트의 상세 데이터를 확인 할 수 있다는 것을 알 수 있다. 해당 컴포넌트의 data함수, 컴포넌트명, 템플릿 등 다양한 정보가 여기 들어있..