잡다한곳 잡다한곳

git pull이나 git clone을 할 때마다 계속 인증을 해야하는 경우 Git Credential Manager 설정을 해주면 된다. git-credential-manager는 ubuntu arm을 위한 파일을 따로 배포하고 있진 않다. 그래서 cross platform으로 설치할 수 있는 방법인 dotnet을 통해 설치하는 방법으로 진행해 보고자 한다.sudo apt-get updatesudo apt-get install -y dotnet-sdk-8.0 위 명령어로 dotnet을 설치한다. (자세한 설치 방법) dotnet tool install -g git-credential-managergit-credential-manager configure dotnet을 통해 git-credential-m..

원래는 Google cloud의 프리 티어 인스턴스(e2-micro)를 사용하고 있었는데, 메모리가 적어 개인 프로젝트 빌드에 문제가 있었다. 그래서 e2-small로 수정하긴 했는데, 요금이 나와 다른 무료 인스턴스를 찾아보기로 했다. https://www.oracle.com/kr/cloud/free/#always-free Oracle에서 Arm 기반 인스턴스를 생성하면 24GB 메모리에 4 OCPU를 무료로 제공하는 것을 확인했다. Oracle에서도 클라우드 컴퓨팅 서비스를 제공하는 지 처음 알았다. 자바 원툴인 줄 알았는데... 일단 가입 자체는 쉬웠다. 리전을 어디로 할까 하다가 South Korea North (Chuncheon)이 있어 춘천으로 했다. 서울은 사용자가 너무 많은지 선택지에 없었..

오랜만에 포스팅을 적어본다. 마인크래프트 1.5.2 버전은 2013년 5월 2일에 출시했다. 10년이 넘은 버전으로 개발하는 것은 정말 어려운 일이지만, 나는 마인크래프트 1.5.2 버전의 모드 코드를 분석해보기 위해 MDK(Mod Development Kits)를 설치했다.그때 당시엔 src인지 잘 모르겠지만 일단 이 포스팅에선 MDK라고 하겠다. 이 포스팅에선 MDK를 설치하는 과정에 대해 적는다.말투가 꼬아서 보기 싫거나 긴 글 읽기를 싫어하는 사람들을 위해 아래에 요약을 적어놓았다. MDK 설치 MDK는 https://files.minecraftforge.net/net/minecraftforge/forge/index_1.5.2.html 에서 다운받을 수 있다. 이 페이지를 들어가면 Latest도 ..

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에 전달되는데, 이처럼 다른 곳에서도 사용하려고 이렇게 만든..