게시판을 만들고 있는데 한 사용자가 가지고 있는 권한 관련 체크를 해야되는 상황이 생겼다. 평소라면 그냥 for문이나 while문을 돌려서 해당 권한을 가지고 있는지 배열의 길이 만큼 돌려서 했겠지만 이번에는 같이 일하는 담당분이 for문이랑 while문을 쓰지 말고 javascript에서 지원하는 findIndex 함수를 사용해보라고 해서 한번 정리해본다. 위의 코드는 내가 항상 배열 안에 어떤 값이 있나 체크 할 때 쓰던 평소의 코드이다. 해당 리스트의 length만큼 for문을 돌려서 해당 배열에 해당 값이 있나 없나 하나하나 체크를 하는 아주 단순한 코드 for문과 같은 반복문은 연산을 하기 때문에 서버에 부하가 갈 수 있어 좋지 않다고 한다.. 그래서 javascript에서 지원하는 findIn..

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가 객체가 아닌 함수로 이루어져 있는 것을 알 수 있다. 왜 다를까? 무언가 이유야 있으니 다른거겠지만, 모르고 쓰면 헷갈려서 정리를 하고자 한다. 우선 컴포넌트를 사용하는 이유를 알면 간단하다. 컴포넌트를 이용하는 이유는 필요할 때 마다 인스턴스를 작성하는 것이 아닌 필요할 때마다 꺼내 쓰는 재사용성을 위함이다. 만약 컴포넌트를 사용하지 않는다면 필요할 ..