vue (13) 썸네일형 리스트형 [Vue] ERROR - NavigationDuplicated 이제 새로고치을 해도 404에러는 뜨지 않는데...댓글을 입력하면 바로 새로고침을 해주도록 만들어두었는데 아래 에러가 반환되었다.현재 페이지 주소가 이동하려는 페이지의 주소와 같기 때문에 발생한 에러라고 한다. 아래 사진이 현재 상태이다! 수정 후!this.$router.go(this.$router.currentRoute); 현재 페이지의 경로로 가라는 뜻인데 새로고침과 같은 역할이라고 한다! 이제 에러는 안뜬다! 댓글 작성 후 새로고침 잘 된다! !~! [Vue.js 에러] NavigationDuplicated (부제: 현재 경로에서 새로고침 하고 싶을 때 - router.reload, router.go, cur진행 중인 프로젝트에서 네비게이션바를 이용하고 있는데 현재 페이지에서 또 같은 경로를 .. [Vue] 새로고침 시 404Error / Connect-history-api-fallback 새로고침을 했는데 404 에러가 떴다.찾아보니, SPA 이라서 발생한 에러라고 한다.SPA는 단일 html 페이지를 로드하고, JavaScript를 통해 페이지의 콘텐츠를 동적으로 변경하여 사용자에게 여러 페이지가 있는것 처럼 보이게 한다. 이는 클라이언트 사이드 라우팅(Client Side Routing)으로 구현된다.클라이언트 사이드 라우팅을 통해 사용자가 웹사이트에서 다른 주소로 방문 하려 할 때 서버에게 새로운 HTML파일 요청을 막고 클라이언트에서 JavaScript를 이용해 다른 주소를 방문한 것처럼 만들게 해준다.필요한 컨텐츠만 동적으로 불러오기 때문에 부드러운 화면 전환이 가능한 것! 즉 하나의 파일(html)만을 사용하는데 사용자가 새로고침을 하거나 주소창에 직접 입력을 하면, 해당 파.. [Vue] vue-moment - 날짜 / 시간 Vue-moment vue js에서 사용하는 날짜와 시간과 관련된 라이브러리. 타임스탬프로 가져와서 시간이 보기 불편하다. 이걸 vue-moment로 수정 할 것이다. 1. npm install vue-moment 2. 3. [vuex] 상위의 모듈에 있는 commit 실행시키는 방법 update.js에서 user에 있는 mutations인 FETCH_USER_NICKNAME을 실행시켜주기 위해 commit 실행시켰다. 그런데 제대로 작동하지 않았다. 원인을 찾아보니 내가 제대로 문법을 알지 못한채 사용했던것ㅎㅎㅎ 모듈로 구성된 경우 하위 모듈에서 형제 또는 상위모듈의 state에 접근하기 위해서는 rootState를 사용하면 된다고 한다!!!! mutation이나 action을 실행시켜주기 위해 commit 또는 dispatch를 실행시킬 경우 세번째 인자에 { root : true }를 넣어주면 된다. 추가해주니까 nickname이 바로 바뀐다,,,,,, 공부는 꼼꼼히 해야겠다 뼈저리게 느낌........ 출처: https://uxgjs.tistory.com/149 개발하면서 경험.. [vue] img태그 바인딩하기 - require 사용 img태그의 src 속성에 이미지의 상대 경로를 넣어주면 사진이 잘 나온다. 그러나 이미지 경로를 인스턴스의 데이터로 바인딩해주려고 하면 사진이 안뜬다. 이때 바인딩은 v-bind:src 또는 축약형인 :src 라고 써주어 바인딩한다. 해결법은 이미지 경로를 require해주면 된다! 이렇게 사용해도 된다. [Bootstrap-Vue]게시판 만들기 - Read와 Delete 구현하기 임의의 게시글 목록을 클릭하면 해당 게시글의 contentid를 가져와 detail페이지로 갈 수 있게 해준다. @row-clicked="rowClick" 를 사용했다. 세개의 인자를 받는데, 첫번째 인자 : 클릭된 row가 가지고 있는 data 그 자체 두번째 인자 : 클릭된 row의 index 세번째 인자 : 클릭한 당시의 이벤트 정보를 볼 수 있다. detail 페이지로 content_id를 보내줌! style은 아직 하나도 해주지 않았다. class만 달아둔 상태!! 강의에서도 css는 안보여주셨는데 이거 다하고 css 스타일 달아줘야겠다. 게시판 만들기 - 정렬과 글쓴이 필드추가하기 정렬 지금은 글 번호 순서대로 정렬이 되어있다. 하지만 실제 게시판은 최신순으로 나열된다. 즉, 정렬이 반대가 되어야한다! 최근에 작성한게 앞으로 가게끔! sort 정렬을 이용한다! 자바스크립트 공부할때 했었다. 두 요소를 뺐을 때 양수가 나오면 자리를 바꿔준다! ( 양수면 정렬 음수면 고대로 둠! ) 글쓴이 필드 추가하기 게시판의 요소들은 Content 데이터들을 뿌려준것인데, Content 데이터에는 유저의 이름이 없다. 유저의 이름은 User에서 가지고 와야한다! 그러므로 유저의 이름은 User에서 가져와야한다. 이럴때 써야하는것이 map함수!! items = items.map(contentItem => { return { ...contentItem, user_name: data.User.filte.. [Bootstrap-Vue]게시판 만들기 - component 맨 위부분에 있는 Header는 내가 공지사항을 눌렀던 자유게시판을 눌렀던 어떤 페이지로 이동했던간에 항상 그 위치에 있어야한다. 그러므로 header는 라우터로 해주는것이 아니라 App.vue 부분에다 component를 등록해준다! template안에서 위에다 컴포넌트 태그 를 넣어준다. router-view가 URL의 값에 따라 갱신되는, 해당하는 화면을 보여주는 영역이기 때문이다. header는 가장 위에서 보여줘야하기 때문에 제일 위해 태그를 넣어준다. 이전 1 2 다음
