본문 바로가기

Client

 (22)
[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..
[React] forwardRef forwardRef와 함수를 component 형으로 빼기 서버 언어들의 class 처럼 상속 등을 통해 사용할 함수들을 캡슐화 하고 싶었다. react 문법 자체가 class형에서 함수형으로 전환되고, 보편적으로 사용되는 추세이다 보니 함수형 component라는 틀 내에서 해결하려 했는데, class 내에서는 jotai를 사용하지 못하다 보니 (hook 특성 상) 원하는 처리를 하려 하면 parameter로 대상 atom 데이터를 전부 넘겨줘야 하는 상황이 발생. 그렇게 헤메다가 발견한게 fowardRef였는데, 결과적으로는 내가 원하던 작업은 아니었고. 희망을 가지고 하다가 내가 아무것도 몰라서 헛되게 희망을 가졌었던 것을 깨닫고, 원리라도 정리해두려 한다. 내가 원했던 것은, 자식 컴포넌트 내의 ..
[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..

티스토리툴바