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함수, 컴포넌트명, 템플릿 등 다양한 정보가 여기 들어있..

javascript의 자료형 javascript에서의 변수는 언제든지 자료형(data type)이 변할 수 있다. 숫자형이었다가, 문자형이 되기도 한다. 이렇게 변수에 담겨져 있는 데이터 타입을 언제든지 바꿀 수 있는 언어를 '동적언어' 라고 한다. 1. 숫자형 숫자형은 정수 및 부동소수점 숫자를 나타낸다. 연산을 실행할 수 있다. 일반적인 숫자외에 Infinity, -Infinity, NaN과 같은 특수 숫자값이 포함된다. ＊ Infinity는 무한대를 의미한다. 어떤 값이든 0으로 나누면 Infinity값이 된다. * NaN은 연산 중 에러가 발생했을 때 뜨는 특수 숫자값이다. 예를 들면 아래와 같이 숫자가 아닌 값을 나눌때와 같은 에러 발생시 나타난다. javascript에서의 수학연산은 대체로 안..