JNarin Development Story

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

프로젝트 규모가 커질수록 Vue나 React에서는 라우트 관리에 대해 번거로움이 생길 수 있다. 이러한 문제에 직면한 개발자들을 위해 등장한 것은 unplugin-vue-router이다. 사실 필자는 아직까지 이러한 문제를 심각하게 경험하지 않아 모르는 부분이지만, 이 패키지는 어떻게 사용되며, 어떤 문제들을 해결해 주는지 자세히 알아보도록 하겠다. 이 패키지를 사용할 때에는 vue router를 최소 4.1.0 버전 이상을 사용하는 것을 권장하며, 실험적인 패키지이기 때문에 사용 시 주의가 필요할 수 있다. 다만, 이 패키지외에 다른 라이브러리인 vite-plugin-pages가 있는데 여기에서는 unplugin-vue-router를 권장하고 있다는 것을 감안하고 이 글을 읽기를 바란다. 그럼 이제 사..

vue를 처음 개발하면 몇 가지 에러가 자주 발생한다. 이런 에러는 해결법은 쉬운데 왜 하는지에 대한 설명을 더 추가하고 싶어서 이 글을 쓰게 되었다. 1. PRETTIER 에러 원인 vue를 처음 생성하고 마주한 에러가 있었다. 여기서 생기는 원인은 라인의 끝의 줄바꿈에는 두 가지가 있다. 하나는 \n은 리눅스와 맥에서 발생하고, 또 하나는 \r\n으로 윈도에서 발생하여 운영 체제가 다른 문제로 인하여 생기는 원인이다. Delete `␍` 물론 간단하지만, 노가다가 필요한 방법이 한 가지가 있다. End Line Sequnce를 LF로 변경하는 것이지만 파일이 많으면 이마저도 좋은 방법이 아니라고 한다. 2. 그래서 해결방법은? 그래서 좀 더 수월한 방법은 다음과 같다. 아래 rules라는 코드를 추가..

회사에서 처음 배정받은 이메일 템플릿 제작을 진행한 적이 있었다. 근데 생각보다 간단하지만 수정사항이 많았었다. 찾아보아도 이 내용에 대한 정리가 별로 많지 않아 아쉬워 글을 쓰게 되었다. 언제까지나 이 이야기는 필자가 직접 겪은 과정을 회고하듯이 작성한 글임을 밝힌다. 1. body 일반적으로 퍼블리셔/프런트 분들이라면 body에서도 기본적인 스타일 값을 준다. 그래서 나도 평소처럼 body태그 안에 style값을 주려 아래와 같이 작성을 해보았었다. hello 물론 웹상에서는 아무런 문제 없이 잘 보였다. 하지만 진짜 문제는 이메일로 보냈을 때 생겼다. 구글은 body 태그 안의 style값이 잘 들어왔다. 하지만 문제는 네이버였다. 네이버는 body 태그 안의 모든 스타일값을 무시하여 돌아왔다. 이..

Vue를 시작하면서 TypeScript까지 함께 공부하게 되면서 타입 지정이라는 것을 알게 되었다. 현재는 어느 정도 익숙해져 있어 이번에 기억을 토대로 내용을 정리해보려고 한다. 아래 글을 Vue3와 Typescript를 사용할 때 쓰는 방식을 기준으로 한다. TypeScript란? 자바스크립트에 타입을 부여한 언어로 자바스크립트에서 확장된 언어라고 할 수 있다. 브라우저는 실행하려면 한 번 변환하는 과정인 컴파일(Compile)을 거쳐야 한다. 왜 TypeScript를 사용하는가? 1) 에러의 사전 방지 2) 코드 가이드 및 자동완성(개발 생산성이 향상된다.) TypeScript의 타입 정리 1) String import { ref } from "vue"; const color: string = "b..

프런트 개발자라면 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 확..