본문 바로가기

Client/Vue

 (21)
[Vue3] [plugin:vite:css] [sass] Undefined variable. 언젠가는 publishing도 공부를 해보겠다고 다짐하고 드디어! css 작업을 해보고자 새로 프로젝트를 생성해서 작업을 해보려는 찰나, 시작과 동시에 이런 저런 error를 마주했다. 우선은 이 에러들을 헤쳐나가는 과정을 차근차근 풀어보고자 한다. 프로젝트 스펙: vue3 / typescript / vite / scss 프로젝트는 우선 vue-cli의 npm init vue@latest 명령을 통해 구축했다. 뭐가 뭔지는 모르겠지만 이것저것 대충 입맛대로 설정해줬다. 이런 저런 기본 설정들을 마친 후 호기롭게 scss 파일을 생성했다. color 변수들을 모아놓은 variables.scss 파일. 여기저기 보니 main.ts(js) 파일에 import를 시켜주면 사용할 수 있다고 하여 import 처리..
[Vue] Nuxt fetch의 서버 사이드 호출이 안되는 건에 대하여 오랜만에 vue 프로젝트를 관리 할 일이 생겼는데, nuxt를 사용해 서버를 돌리고 있어 최근 nuxt를 조금 보고 있는 상태이다. 조금 특이한 구조로 되어있어서 (vue를 사용하는데 SPA 기능을 1도 활용하고 있지 않다.) 분석을 열심히 하는 중인데, 대부분의 호출 함수가 asyncData() 로 이루어져 있고, 이 때문에 코드를 수정할 때마다 hot reloading이 되면서 데이터를 불러오지 못하는 오류가 발생하고 있다(...). 개발자 입장에서 불편하기도 하고, 구조를 조금 개선할 수 있지 않을까 싶어 작은 것 부터 해보자는 마음으로 진행하려 했다. asyncData는 only server side 이고 처음 페이지(브라우저)가 생성되는 시점에만 호출되는 반면, fetch의 경우 페이지 load..
[Vue] 외부 js에서 vue function() 호출(3) 오랜만에 다시 포스팅을 하는데, 긴 숙원인 외부 js 파일에서 vue 함수를 호출해야 하는 상황에서의 해결법을 작성해보려 한다. 이전 포스팅들에서도 몇가지 방법으로 시도를 했었는데, 이번 포스팅은 첫 번째 글의 방법을 보완한 방법으로, 참고를 원할 경우 첫 번째 글을 보고 오는것도 괜찮을 것 같다. [vue] 외부 js에서 vue fucntion() 호출 vue 프레임 워크를 사용해서 프로젝트를 진행하다 보니, api 연동 등으로 인해 vue 파일 내 스크립트 코드가 아니라 .js 파일을 작성해서 개발을 진행해야 하는 경우가 생겼는데, js 파일 내 함수에 asang-developer.tistory.com [Vue] 외부 js에서 vue 함수 호출(2) 이전에 외부 js에서 vue 함수 호출 관련 포스팅..
[Vue] Mixin 과 Plugin 일전에 typescript 든 javascript 든 vue의 mixin을 사용하는데에 있어서 나름 여러가지 시도랑 시행착오를 겪었는데, vue 공식 사이트나 다른 잘 하시는 분들 블로그에도 나와있듯이 mixin과 plugin 의 사용 용도가 조금씩 다르다. 지금도 자세히 설명은 못 하겠으나, 개인적인 기록을 위해 또 짬이 날 때 게시글로 기록해두기로 한다. 일단 mixin 은 공식 문서에서는 아래와 같이 설명한다 Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin..
[Vue] 외부 js에서 vue function() 호출(2) 이전에 외부 js에서 vue 함수 호출 관련 포스팅을 한 적이 있었는데, 당시에는 vue 파일의 script내 mounted 위치에서 js 파일을 setAttribute 처리하는 형식으로 vue 파일에 js 를 import 하는 방식으로 굳이 파일마다 setAttribute 처리 할 필요는 없고 프로젝트폴더 내 /pubilc/index.html 파일에 필요한 js 파일을 script 태그로 import 해두면 되긴 하는데, 그 땐 전역으로 사용할게 아니라 해당 페이지에서만 호출되야 할 부분이라서 vue 파일에 따로 등록해서 사용했었음. 참고 링크 [vue] 외부 js에서 vue fucntion() 호출 vue 프레임 워크를 사용해서 프로젝트를 진행하다 보니, api 연동 등으로 인해 vue 파일 내 스크..
[Vue] typescript 프로젝트 진행 시 설치한 라이브러리 목록 기본 설치 리스트 (create 시 모두 선택) Babel, Typescript, progressive Web App Support, Router, Vuex, CSS Pre-processor, linter/Formatter, Unit Testing, E2E Testing * vue-router, vuex 는 npm 으로 따로 설치 가능 추가기능 vue-sweetalert2 : sweetalert 의 vue 버전, 2 버전이 아니면 typescript 에서 사용이 안된다 (javascript만) import VueSweetalert2 from 'vue-sweetalert2'; import 'sweetalert2/dist/sweetalert2.min.css'; Vue.use(VueSweetalert2); v..
[Vue] Typescript 스니펫 만들기 snippet (스니펫) : vscode 에서 제공하는 자동완성 코드 기능. 커스텀 제작 가능 1. 상단메뉴 > File(파일) > Preferences(기본 설정) > User Snippets(사용자 코드 조각) 2. typescript 로 작성하면 기 설정된 경로에 typescript.json 파일이 열림. 해당 파일에 코드 작성 후 저장. 3. 사용할 때에는 스크립트 블럭(또는 파일) 안에서 prefix 로 등록한 키워드를 입력하면 자동완성! 기본으로 사용하는 import 설정 등을 미리 작성해두고 사용하면 편하다. 아래는 책* 보고 작성한 파일코드. { "togetherVueTs": { "prefix": "togetherVueTs",// 사용할 prefix "body": [ "import { Vu..
[Vue] Typescript로 작성한 Mixin 에서 this 접근 바로 전에 작성한 글이랑 이어지는건데, 사실 오류는 같이 발생하고 있었다. 아무튼 이번엔 또 무엇이 문제인가 하니 mixin 파일에 작성한 class 내의 전역변수를 함수에서 읽지를 못했다. 접근 범위를 private에서 public 으로도 바꿔보고(별 차이 없다는걸 알았지만 그래도..) 생성자도 만들어보고 했는데 도무지 대체 도대체~ beforeCreate/created 함수나 따로 호출해야 하는데나 this 로 전역에 접근하려고 하면 죄다 undefined 만 찍고 있어서 눈도 돌고 머리도 돌고 그냥 돌아버리는 줄.. 그래서 열심히 열심히 또 구글링을 한 결과 this 바인딩 문제였다. 그 전에도 한번 화살표 함수에 대해서 짤막하게 메모를 남긴걸로 기억하는데, 함수 내에서 전역변수에 접근하려면 glo..

티스토리툴바