반응형 분류 전체보기56 Vue Multiple Layout (다중 레이아웃) 적용하기 Nuxt를 사용하면 자동으로 다중 레이아웃이 가능하게 세팅된다. 하지만 Nuxt를 사용안하고 Vue만 사용한다면 이걸 자체적으로 구현해야 한다. 가장 간단하면서도 효율적으로 다중 Layout 구성을 해보는 방법을 Vue 3를 기반으로 설명한다. 우리의 목표는 페이지마다 다른 레이아웃을 선택해서 사용할 수 있도록 하는 것이다. Vue3 기본 프로젝트를 기반으로 여러 개의 레이아웃을 만들고 페이지마다 다른 레이아웃을 어떻게 적용시킬 수 있는지를 코드를 보면서 설명하도록 하겠다. 이해하기 쉽게 최소한의 코드만으로 샘플소스를 만들었다. 프로젝트 구조 기본적으로 Vue 3를 기반으로 프로젝트를 만들었고, 아래와 같이 폴더 구조를 구성하였다. 기본 구조에 layouts, pages 폴더를 추가하였다. 그외에는 Vu.. 2023. 6. 7. [Vue + Vite] 근데 Vite는 뭔가요? Vue 3로 오면서 Vue 프로젝트를 만들면 Vite 기반으로 빌드설정이 이루어지게 된다. Vite는 기존의 Vue CLI를 대체하기 위한 툴이다. Vite를 이용하여 Vue 프로젝트의 스캐폴딩을 만든다라고 보면 된다. 따라서 Vue3를 사용하면 Vite가 뭔지를 먼저 알고 넘어가야 한다. Vite Vite는 프론트엔드 개발을 위한 툴이다. 한글로는 비트라는 발음에 가깝다.Vue에 종속되어 있는 툴이 아니라 React, Vanilla, Svelte 등 프론트엔드 개발 어디서든 사용될 수 있다.Vite는 크게 2가지 역할을 한다.Dev Server : 개발 환경에서 HMR과 같은 기능을 제공하는 개발용 서버 기능Build : Production 배포를 위한 소스코드 번들링 기능 기존의 Vue CLI도.. 2023. 6. 6. Electron 으로 데스크탑 어플리케이션 만들기 기초 VS Code, Discord, Slack, Skype와 같은 데스크탑 툴들을 보면 뭔가 느낌이 비슷하다는 것을 느낄 것이다. 그리고 보통 윈도우, Mac, 리눅스와 같이 멀티플랫폼을 지원하고 있다. 이러한 데스크탑 어플리케이션은 어떻게 만들었을까? 정답은 바로 Electron으로 만들었다. Electron은 HTML, JavaScript, CSS를 이용하여 웹기반으로 데스크탑 어플리케이션을 만들 수 있게 해준다. 이 과정을 실습해보면서 간단한 데스크탑 어플리케이션을 만들어보도록 하자. Electron 이란 Framework Electron은 JavaScript, HTML, CSS를 이용하여 데스크탑 어플리케이션을 만들기 위한 프레임워크이다. 독립적인 실행환경 Electrond은 Node.js와 Chro.. 2023. 6. 1. 온라인 지리좌표계 변환 사이트 지구의 좌표를 나타내는 지리좌표계에는 다양한 기준의 좌표계가 존재한다. 그 중에 우리나라에서 사용하는 대표적인 좌표계 값을 온라인상의 지도에서 보여주는 사이트를 소개한다. WGS84, UTM-K, 4가지 원점의 TM 좌표계 기준의 각 좌표값을 실시간으로 확인할 수 있다. 지리좌표계 변환 사이트 https://archmap.gitlab.io/map ArchMapTM 좌표계는 GRS80 타원체 기준입니다.archmap.gitlab.io 위 사이트에 들어가면 위와 같은 화면이 나온다. 2가지 영역으로 나뉜다.지도 영역좌표정보 영역지도 영역에서는 카카오맵이 보이고, 이동 / 확대 / 축소가 가능하다.지도 영역에서 지도 타입을 지도 / 스카이뷰를 선택해서 전환할 수 있다.지도 영역에서 지적도를 on /.. 2023. 5. 15. 이전 1 ··· 3 4 5 6 7 8 9 ··· 14 다음 반응형
