글쓰는 개발자

이 포스팅은 사실, 하고싶은 다음 포스팅을 위한 밑밥이라고 보시면 됩니다. 오랜만에 포스팅해보고 싶은 이야깃거리가 생겼는데, 거기서 불변성의 개념까지 설명하기엔 너무 주제를 벗어나는 느낌이기도하고 불변성(Immutability)이라는 개념 자체도 충분히 하나의 포스팅거리로 삼을법한 주제이기 때문에, 이 포스팅을 작성하게 되었습니다. 0. 변수인데 불변한다는게 무슨 말이야? 처음 불변성이라는 용어를 Javascript를 공부하며 들었을때, 머릿속에 들었던 첫 번째 물음. 우리는 개발을 하고 코드를 작성하며 수많은 변수를 사용한다. 변수라는 건 엄연히 변경이 가능한 수를 뜻하고, 변하지 않는 수라면 그건 상수라고 칭하면 될 텐데 굳이 불변성이라는 용어로 정의하면서까지 설명을 해놓는 이유가 뭘까. 1. 포인터..

문제점 개발중인 Vue.js 기반의 프로젝트에서, 배포를 위해 빌드를 하던중에 배포된 상태의 용량을 최대한 줄이기 위해서 import된 npm 패키지들을 분석하던 도중에, 컴포넌트 쪽 패키지가 생각보다 너무 크길래 줄이려고 시도하다가 난 이슈다. 확인결과 해당 컴포넌트 패키지를 import 하는 대상이, minify & uglify가 적용되지 않은 js를 사용하고 있었기에 minify & uglify 된 파일을 import 하는 형태로 바꿨는데...콘솔이 에러메시지로 가득차버렸다. did you register the component correctly? For recursive components, make sure to provide the "name" option. 사실, 이 에러는...Vue 파일..

안녕하세요, 오랜만에 Vue.js 관련 포스팅을 합니다. 와...벌써 2021년 4월이라니...Vue.js 관련 마지막 포스팅이 작년 11월이네요. ([Vue.js_#04_2] 라우터(vue-router) vol.2) 무려 4개월이 넘는 시간동안 포스팅을 하지 않다니... 바쁘다는 건 늘 핑계라고 생각하는 성격상 입이 열개라도 할 말이 없습니다......만! 그래도 열 한 번째 입이라도 강물에 둥둥떠서 살아보고자 이 포스팅을 쓰게 되었습니다. 사실, 티스토리에서 못 다한 Vue 가이드 포스팅을 Github Page에서 완성해버렸답니다? 에헷>_

어,음…저번 포스팅때 이번편부터 본격적으로 Vue 파일들에 대해 파헤쳐보겠다고 했던 거 같은데, 생각해보니 라우터와 관련해서 못 다한 이야기가 있어서 이렇게 또 라우터를 주제로 작성하게 됐습니다. 그냥 나중에 좀 더 상세한 내용을 담는 포스팅에서 쓸까하다가, 그냥 나온김에 쓰자 싶어서요. (제 성격이 방학숙제조차도 미뤄놓으면 되게 찜찜해하는 타입이라 그렇습니다) 그래서 이번편은 #04_2편 입니다. 1. vue-router는 사실 2개야. 우선, Vue에서 라우터 기능을 사용하기 위해서 우리는 하나의 npm 패키지를 설치해줘야 합니다. 대략 vue-router 라는 이름을 가진 npm 패키지구요, Vue.js를 활용하신다면 필수적으로 사용할 수 밖에 없는 라이브러리입니다. 근데 여기서 중요한 점은 포스팅..

문제점 npm install 명령어를 통해서 패키지를 설치하는데, 아래와 같이 run `npm audit fix` to fix them, or `npm audit` for details 라는 에러가 발생했다. npm을 다룬지도 한참됐는데...처음보는 에러라서 또 뭔가 프록시 설정을 누락했거나, npm config 설정값에 문제가 있는 줄 알았는데, 그게 아니고 npm audit 라고, 각 패키지들이 가진 취약점을 체크해주는 로직이 들어 왔다는 거였다. npm 패키지 자체가 install 시에 물고물고물린 의존성에 따라 여러 패키지들을 알아서 설치해주다보니, 그 과정에 발생할 수 있는 이슈를 대비하기위해 해주는 거라고 한다. 해결법 생각보다 심플하다. 해당 audit 옵션을 쓰지 않겠다는 옵션을 아래와 같..

0. Intro 이전 편을 쓴 지 일주일이 넘었네요. 빠르게 되짚고 시작해보도록 하겠습니다. 왜냐면 지금 이미 새벽 4시거든요. 그리고 오늘은 화요일이라, 오늘도 출근을 해야하니까요! 우선 저번 포스팅에서 했던 마지막 단락을 되짚어 보겠습니다. index.html 이라는 하나의 정적 파일이 있고, 브라우저는 얘만 로딩합니다. 그래서 SPA(Single Page Application) 개념이 적용이 되는 거였구요. 그 index.html 파일에는 우리가 익히 아는 태그 하나와, build.js를 정의하는 코드로 이루어져 있었습니다(기타 메타태그는 그냥 무시할게여) 그리고 딱 하나 있는 태그가 가진 id ‘app’를, Vue Application 인스턴스(Vue 2.x버전의 경우 Vue 인스턴스)가 가리킴으..

문제점 Cannot read property 'coordinateSystem' of undefined at Object.layout (catesianAxisHelper.js:54) at ExtendedClass.render (CartesianAxisView.js:74) at echarts.js:1450 at Array.forEach () at each (util.js:300) at renderComponents (echarts.js:1448) at render (echarts.js:1434) at ECharts.update (echarts.js:861) at ECharts.echartsProto.setOption (echarts.js:411) 해결법 vue-echart의 초기 설정값에 문제가 있었다. 라..

0. 시작하기에 앞서 사실 저번 편에 이어서 이번 편도 좀 지루하지 않을까, 라는 생각이 듭니다. 대체 Vue.js 에 대해서 설명하는 포스팅이라고 해놓고 Vue.js를 실질적으로 활용하는 설명은 어디 있는거냐, 라는 생각이 드실수도 있어요, 충분히. 이래저래 필요한 개념들부터 짚고 넘어가려다보니 포스팅이 길어지고 있는데요, 하지만 그렇다고해서 ‘이 정도는 알아야 할 거 같은 것’들을 모른 척 당장 넘어갈 수는 없잖아요? 당장에 급하기에 활용법부터 필요하실 수도 있습니다만, 급히 먹는 밥은 체하기 마련이니까요. 최소한의 기본은 쌓고 인지한채로 개발을 해야하지 않겠습니까?ㅎㅎ 그러니 이번편도 당장 Vue.js를 ‘코드’로써 활용하고자하시는 분이라면 스킵하셔도 됩니다. 이번 포스팅은, 이전 글에서도 언급했던..

이번에 작성할 포스팅은 Vue3.0에 Fontawesome을 적용하는 방법이다. 사실, 아직 공식적으로 Fontawesome이 Vue 3.0을 지원하진 않는다… 그도 그럴것이 정식 릴리즈 된 지 아직 2주도 되지 않은 시점이니까. Font Awesome의 공식 홈페이지에서 제시하고 있는 vue-fontawesome 깃헙 레파지토리도 방문해 보신 분이라면 알아채겠지만 Vue 3에 대한 정식 지원이 되지 않고 있다. 좀 더 정확히는 아래처럼 우리 지원해. 그러니까 이 방법을 쓰면 될거야, 라고 안내는 하고 있지만 위에 버젓이 Using Vue 3.x라고 하고 npm install 명령어를 적어놨지만 실제 사용하면 아래와 같이 No matching version found for @fortawesome/vue..

0. 어때요, 서버는 잘 떴나요? npm run serve의 결과로 띄워진 http://localhost:8080 에 브라우저로 접속해서, 아래와 같은 화면을 띄웠다면 이제 절반은 끝낸 겁니다(시작이 절반이니까요?) 아, 시작하기에 앞서서 당부드리자면 오늘은 좀 지루한 이야기를 해야 할 거 같습니다. 그러니 좀 더 집중해서 글을 읽어주시면 좋을 거 같습니다. 저도 지루한 이야기는 별로 좋아하지 않습니다만, 지루하더라도 해야하는, 이야기는 해야하니까요ㅎㅎㅎ 아, 뭐 그렇다고해서 되~~~~게 어려운 개념을 설명하려는 건 아닙니다. 물론 듣는 이에따라서는 이게 대체 뭔 소리야? 라고 생각할 수도 있긴합니다. 그러니 차근차근 설명을 시작해보도록 하겠습니다. 1. SPA (Single Page Applicatio..