JNarin Development Story

vite-plugin-vue-layouts은 Vite에서 Vue.js 애플리케이션의 레이아웃을 효과적으로 관리할 수 있도록 도와주는 플러그인이다. 이 플러그인은 각 페이지에 독립적인 레이아웃을 지정하고 중첩하여 사용할 수 있는 강력한 레이아웃 시스템을 제공한다. 크게 핵심 기능을 정리하면 총 4가지로 나뉘게 된다. 1. 동적 레이아웃 각 페이지에 대해 독립적으로 레이아웃을 설정할 수 있다. 2. 중첩된 레이아웃 부모 레이아웃과 자식 레이아웃을 조합하여 복잡한 페이지 구조를 만들 수 있다. 3. 동적 페이지 제목 및 메타 데이터 각 페이지에 대해 동적으로 제목이나 메타데이터를 설정할 수 있다. 4. 동적 레이아웃 전환 런타임에서 동적으로 레이아웃을 변경할 수 있다. 먼저, 플러그인을 설치를 위해서는 해당 ..

프런트 개발자라면 vue와 react에 대해 고민이 많을 것이다. 그중에서 오늘은 vue에 대해 공부를 해보려고 한다. 최근 회사에서는 vue 프로젝트를 하는 회사로 들어와서 vue에 대한 공부가 많이 필요했고, 지속적인 공부를 업데이트를 해 나갈 예정이다. Vue.js는 뭘까? 먼저 vue는 Component 기반의 SPA(Single Page Application) 사이트를 구축할 수 있는 프레임워크다. 여기서 간략하게 하나 짚고 넘어갈 점은 리액트는 UI라이브러리로 자유롭지만, 뷰는 기능이 정해져 있는 프레임워크라고 한다. 쉽게 생각하면 뷰에서는 뷰만의 문법이 정해져 있어 정해진 코드가 있다는 것이다. 뷰를 전역적으로 설치하게 되면 vue 이후에 관련된 명령어를 사용할 수 있다. npm i -g @..

뷰 라우터도 리액트에서 쓰이는 라우터와 비슷한 듯 약간의 명칭만 조금 달라지는 것 같다. 먼저, 뷰 프로젝트에 라우터를 설치한다. $ npm install vue-router@4 OR $ npm i vue-router OR $ yarn add vue-router@4 이 글을 볼 때 4버전이 아닐 수 있으니, 공식문서에서 한번 더 체크를 권장한다. 먼저 프로젝트에 라우터를 설정을 한다. import { createWebHistory, createRouter } from "vue-router"; import Component1 from './Component1.vue'; import Component2 from './Component2.vue'; const routes = [ { path: "/경로1", c..

어쩌다 보니 vue를 쓰게 되다 보니 최근에 미니 플젝을 잠시 중단하고 vue에 대해 공부 중에 있습니다. Vue에서 scss를 변수를 설정하기 위해서는 두 가지를 프로젝트에 설치를 해야 합니다. npm i node-sass sass-loader node-sass 스타일시트 전처리 언어입니다. sass나 scss를 사용할 수 있습니다. sass-loader SCSS 파일을 가져와 CSS로 컴파일합니다. 여기서 컴파일은 특정 프로그래밍 언어로 쓰여 있는 문서를 다른 프로그래밍 언어로 옮기는 언어 번역 프로그램을 말한다. 즉 필자가 이해한 바로는 한국어를 영어로 바꿔주는 거로 이해가 되었습니다. 즉, node-sass로 sass 혹은 scss를 사용할 수 있으며, sass-loader가 sass/scss 확..