VUE 검색 결과

해당 글 3건

router함수를 사용해 페이지 엘리베이터를 만드는 방법

이번글에서는 페이지 엘리베이터, 줄여서 PE를 만드는 방법에 대해서 설명해보자 한다. 변경사항이 즉시 웹페이지에 적용되는 Node.js 개발환경에서는 view page를 주기적으로 변경해야 할 상황이 발생한다. 예를들어 A라는 컴포넌트를 사용하는 2개의 페이지가 있다고 하자. 해당 컴포넌트는 각기 다른 위치에 배치되어있기 때문에 수시로 두 페이지를 이동해가며 시각적인 피드백을 받아야 한다. 이러한 작업이 2개 페이지에만 해당된다면 어떻게든 page next, prev정도로 사용 가능하겠지만 3개, 4개, 그 이상의 페이지에서 피드백이 필요하다면 어떨까? 매번 페이지 url를 입력해가며 이동하는건 피곤하고 비효율적인 작업일테고, 보통의 경우라면 엘리베이터 페이지를 사용할것이다. 이와같이 사용중인 페이지의 ..
개발/프론트엔드 2020. 11. 26. 00:35

Nuxt.js에서 컴포넌트의 CSS자산을 관리하는 방법

css: [ '~assets/css/common.scss' ], Nuxt.js 환경에서 개발을 진행하다 보면 컴포넌트 또는 글로벌 요소의 css를 수정해야 하는 경우가 있다. 이러한 상황에서 하나의 파일로 구성된 글로벌 css파일은 여러 문제를 발생시키게 된다. 클래스나 상속등의 문제로 이슈가 발생했을 경우 이를 고치기 어렵다(각기 다른 css코드가 문제를 일으킬때가 있기 때문) 글로벌 요소의 특성상 단일 클래스에서 상속을 통해 코드를 작성하는데 이로인해 가독성이 떨어진다. 자산 로드 속도등의 문제는 뒤로하고, 개발단계에서 발생하는 문제만 봐도 꽤나 심각한것을 알 수 있다. 이를 방지하기 위해서는 요소별 css를 모듈화시켜 사용해야 하는데, 이를 개발하는 과정에 있어 필자가 사용한 방식을 소개해보도록 하..
개발/프론트엔드 2020. 11. 22. 23:06

Vue프로젝트에 적합한 퍼블리싱을 하는 법

Vue프로젝트에 적합한 퍼블리싱이란? 퍼블리싱된 파일을 vue에 적용하는 작업을 수월하게 하기 위해 퍼블리싱 단계에서 할 수 있는 일은 두가지가 있다. vue프로젝트의 폴더구조를 고려해 static file들을 배치한다. 사용하기로 협의된 디자인 프레임워크를 cdn방식으로 적극 활용한다. 퍼블리싱 단계에서 파일들을 관리하는 방법은 여러가지가 있는데 퍼블리싱하기 편한 폴더구조일수록 프로젝트에 이식하기 어려운 구조일 가능성이 다분하다. 예를들어 시안을 보고 작업한다고 할 경우 아래와 같이 폴더구조를 작성할 수 있다. index.html public/ design/ 201011.psd imgs/ dummy.png css/ common.css main.css sub.css lib/ framework.min.js..
개발/프론트엔드 2020. 11. 5. 01:29