개요 네이버 블로그, 티스토리 등 고급 에디터를 지원하는 서비스에는 게시글을 작성할 때 링크를 포함시키면 해당 링크에 <a> 태그가 자동으로 걸리는 기능이 있습니다. 이 기능을 구현하기 위해서는 평문 속 URI를 찾고, replace 시켜야 합니다. 소스코드 <template> <div class="index"> ...

패키지 설치 yarn yarn add -D eslint eslint-plugin-vue typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser vite-plugin-eslint @nuxtjs/eslint-config-typescript npm npm i -D eslint eslin...

개요 CSS는 DOM에 style을 적용해주기 위한 언어입니다. 그러다보니 화면을 구성하는 DOM에 적절한 길이를 적용하기 위해 다양한 길이 단위를 사용합니다. 대표적으로 사용되는 길이 단위는 px, em, rem 등이 있는데, px의 경우는 그 역할이 굉장히 직관적입니다. 입력하는 길이만큼 크기가 지정되고 그게 끝이기 때문이예요. 그런데 em과 r...

Pinia Pinia는 Composition API 기반에서 동작하는 상태 관리자입니다. 여태까지 Vue에서 사용되던 가장 보편적이고 유명한 상태 관리자는 Vuex였습니다. 그런데 Vue의 개발자, Even You는 본인의 트위터에서 Vuex 5와 Pinia는 사실상 완전 동일한 프로젝트로 생각해야 한다고 말한 바 있습니다. Vuex 5에서 원하던...

Glob 패턴 Glob 패턴은 특정 경로, 특정 이름을 가진 파일들을 선택하기 위해 사용하는 패턴입니다. 이는 와일드카드 문자로 이루어져 있습니다. 예시 { "include": [ "src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/types...

Vite vite는 번들러의 일종입니다. ES6 문법을 따르기에 Webpack보다 상대적으로 빠른 것이 장점이예요. Vue3와 Nuxt3는 기본적으로 Vite를 지원하도록 설계되어 장래성이 뛰어난 개발도구입니다. Environment Variables Environment Variables는 프로젝트 내에서 사용할 환경변수입니다. 환경변수란, 현재 프...

Tauri Tauri는 웹으로 Desktop App을 빌드할 수 있는 툴킷입니다. Desktop App을 Build하기 위한 툴킷으로는 Electron이 유명하고 이미 널리 사용되고 있습니다. 그렇지만 Electron은 태생부터 갖고있던 단점들이 존재하며, 이를 해결하기 위해 출시 된 것이 Tauri입니다. Electron VS Tauri 출처: ...

이슈 <style scoped> </style> <template> <div class="app"> <atom-button></atom-button> </div> </template> <script lang="ts"> import { d...