잡다한곳 잡다한곳

Vuex state가 바뀔 때마다 Vue는 re-rendering 하여 보여준다. 그런데, SSR mode일 때는 정상적으로 작동하던 페이지가 SPA mode일 때는 state가 갱신되지 않는 현상이 발생했다. 일단 아래는 필자의 코드다. // store/index.js export const state = () => ({ page: {}, }); export const mutations = { pageSetValue(state, data) { state.page[data.key] = data.value; }, }; {{ $store.state.page.title }} {{ $store.state.page.content }} 위와 같이 실행시키니, SPA mode에서만 state가 갱신되지 않았다. 해결..

지난 포스트에선 Nuxt에서 모든 경로가 일치하는 페이지를 생성하였다. 이번 포스트에선 nuxt-link를 사용해 params를 전달하는 방법을 알아보려 한다. 일단 ~/pages/_.vue 라는 파일이 있다는 가정하게 진행해 보도록 하겠다. 방법은 2가지 정도가 있는 것 같다. 첫번째 방법은 methods를 사용해 path를 return하는 방법이다. test 위와 같이 적용하면 해당 nuxt-link(a)를 클릭하는 순간 /test URL로 이동하게 된다. 두번째 방법은 to props에 Object를 활용한 방법이다. test ... params.pathMatch라는 key를 사용하면 되며, 위와 같이 적용하면 해당 nuxt-link(a)를 클릭하는 순간 /test URL로 이동하게 된다.

nuxt에 대한 포스팅은 처음 작성한다. nuxt는 라우팅을 참 편리하게 해주는 프레임워크다. 이외에도 장점이 많지만, 이곳에서는 설명하지 않으려고 한다. nuxt 프로젝트를 생성하면 오른쪽 사진과 같이 directory가 생성된다. 만약 폴더가 존재하지 않는 경우 직접 생성하면 된다. 최근에는 모든 폴더를 기본적으로 생성해주진 않더라. 일단 ~/pages directory에 .vue 파일을 생성하면 자동으로 router가 생성되어 라우팅된다. 이렇게 라우팅된 라우터 파일은~/.nuxt/router.js 파일에서 확인할 순 있지만, 수정하여도 적용되지 않는 것으로 알고 있다. ~/pages/_id.vue 라는 파일은 어느정도 매칭이 되나, /test/asdf 라는 "/"가 존재하는 url에 접속하게 되면..

필자는 당시 h() domProps의 innerHTML를 사용했기에 a element를 nuxt-link component로 바꿀 필요가 있었다. innerHTML을 사용하기에 vue로 render가 되지 않아 nuxt-link는 무의미했고, a element를 사용하자니 Vue를 사용하는 이유가 없었기 때문이었다. 구글링한 결과... 아래와 같은 방법을 찾았다. import Vue from 'vue' export default { mounted() { const anchors = this.$el.getElementsByTagName('a') Array.from(anchors).forEach(anchor => { const anchorLink = anchor.getAttribute('href') if (..

vue-router, nuxt-link의 경우에는 element가 아닌 component다. 그리고 해당 component의 경우 to props를 강제하고 있는데 이전 포스트에서 설명했듯, 아래와 같이 생성하면 to가 없다고 오류를 띄운다. export default { render(h) { return h('nuxt-link', { to: '/home' }) // domProps에 넣어도 안됨 } } 필자는 이 오류 때문에 한 2시간은 구글을 뒤져봤던 것 같다.... 해결 방법은 아래와 같다. export default { render(h) { const vnode = h('nuxt-link', attributes, children); vnode.componentOptions.propsData.to ..

https://vuejs.org/guide/extras/render-function.html 공식 홈페이지에선 h function의 innerHTML 사용 방법을 아래와 같이 설명하고 있다. export default { render(h) { return h('div', { innerHTML: 'hello' }) } } 하지만 필자의 경우 위와 같이 사용해도 innerHTML이 적용되지 않았다. 이유는 정확하게 모르겠지만 어느 순간부터 문법이 바뀐 듯하다. innerHTML을 적용하려면 아래와 같이 적용해야 한다. export default { render(h) { return h('div', { domProps: { innerHTML: 'hello' } }) } } innerHTML 뿐만 아니라 id,..

Vue에는 vnode를 생성해 주는 function h()가 있다. Vue 2.x 버전에선 render 함수에 h() 함수를 인자로 받는다. 인자로 받기 때문에 이름은 아무렇게 받아도 상관없다. export default { render(h) { // h 대신 createvnode를 사용해도 상관 없음 return h('div') } } Vue 3.x 버전에선 render 함수에 인자로 받지 않으며 전역으로 선언해 주어야 한다. import { h } from 'vue' export default { render() { return h('div') } } 아마 Vue 3.x 버전부터 setup function에 return한 값이 template에 전달되는데, 이처럼 다른 곳에서도 사용하려고 이렇게 만든..

bootstrap 버전이 5.x도 나왔지만 4.x 버전을 사용하는 사이트가 꽤 있었다. 왜 그런지는 나도 모르겠지만... 어쨌든 bootstrap 4.x 버전은 JQuery를 사용하고 있다. 공식 사이트에도 아래와 같이 JQuery를 사용해 alert close event를 처리하고 있었다. $('#myAlert').on('closed.bs.alert', function () { // do something... }) 당연하지만 bootstrap 5.x를 사용해 vanilla javascript로 처리할 수 있다. 하지만 유저스크립트 개발 등의 이유로 bootstrap 4.x를 사용해야 하는 상황이 있을 수 있다. (필자의 상황이 이러했다.) 이 포스팅에선 bootstrap 4.x를 사용하면서 JQuer..

처음으로 티스토리를 시작해 본다. 아직은 어색하고 닉네임도 아무렇게나 지었는데 다행히 없는 닉네임이라 생성되었다. 프로그래밍하다가 막혔을 때 포스팅으로 올려보려고 한다. 내 블로그를 보고 도움을 받는 이가 있었으면 좋겠다는 생각이 든다.