개요 CSS는 DOM에 style을 적용해주기 위한 언어입니다. 그러다보니 화면을 구성하는 DOM에 적절한 길이를 적용하기 위해 다양한 길이 단위를 사용합니다. 대표적으로 사용되는 길이 단위는 px, em, rem 등이 있는데, px의 경우는 그 역할이 굉장히 직관적입니다. 입력하는 길이만큼 크기가 지정되고 그게 끝이기 때문이예요. 그런데 em과 r...
Vue3에서 사용되는 상태 관리자, Pinia
Pinia Pinia는 Composition API 기반에서 동작하는 상태 관리자입니다. 여태까지 Vue에서 사용되던 가장 보편적이고 유명한 상태 관리자는 Vuex였습니다. 그런데 Vue의 개발자, Even You는 본인의 트위터에서 Vuex 5와 Pinia는 사실상 완전 동일한 프로젝트로 생각해야 한다고 말한 바 있습니다. Vuex 5에서 원하던...
Glob 패턴
Glob 패턴 Glob 패턴은 특정 경로, 특정 이름을 가진 파일들을 선택하기 위해 사용하는 패턴입니다. 이는 와일드카드 문자로 이루어져 있습니다. 예시 { "include": [ "src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/types...
Vite 환경에서 .env 활용하기
Vite vite는 번들러의 일종입니다. ES6 문법을 따르기에 Webpack보다 상대적으로 빠른 것이 장점이예요. Vue3와 Nuxt3는 기본적으로 Vite를 지원하도록 설계되어 장래성이 뛰어난 개발도구입니다. Environment Variables Environment Variables는 프로젝트 내에서 사용할 환경변수입니다. 환경변수란, 현재 프...
Tauri로 시작하는 Desktop App 개발 생활
Tauri Tauri는 웹으로 Desktop App을 빌드할 수 있는 툴킷입니다. Desktop App을 Build하기 위한 툴킷으로는 Electron이 유명하고 이미 널리 사용되고 있습니다. 그렇지만 Electron은 태생부터 갖고있던 단점들이 존재하며, 이를 해결하기 위해 출시 된 것이 Tauri입니다. Electron VS Tauri 출처: ...
[Vue] Cannot find module '...' or its corresponding type declarations.
이슈 <style scoped> </style> <template> <div class="app"> <atom-button></atom-button> </div> </template> <script lang="ts"> import { d...
[Vue] 절대 경로 import
절대 경로 절대 경로에 대한 자세한 설명은 이 문서를 참고해주세요! 절대 경로 추가 import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; const path = require('path'); // https://vitejs.dev/config/ export defaul...
'구르미랑 반모' i18n(국제화) 적용기
i18n i18n은 Internatinalization의 약자입니다. ‘아이에이틴엔’ 혹은 ‘아이엷여덜엔’ 등으로 발음합니다. 국제화란, 인터넷 서비스 등이 특정 국가나 시장에 진출하기 위해여 대상 문화권 사람들이 어려움 없이 서비스를 이용할 수 있도록 하는 작업입니다. 디자인, 번역, 텍스트 진행방향 변경 등이 모두 국제화 과정에 포함 됩니...