1. 개요- 네이버 지도를 활용한 맵 팝업을 구성 - 네이버 정책상 네이버 지도 url에 위도, 경도 값을 넣어도 출발,도착 경로 설정이 불가- 개선방향으로 데스크톱 웹에서는 url에 장소명을 넣어 장소를 표출하고 출발, 도착 지점을 사용자가 지정할 수 있도록 구성 모바일에서는 네이버 지도 어플이 있는 경우 어플로 이동하고, 없는 경우 웹페이지 자체에서 네이버 지도 영역으로 이동해 데스크톱 웹처럼 이용할 수 있도록 구성 2. 요구되어지는 사항- 모바일에서 안드로이드 또는 IOS 기기의 네이버 지도 어플이 없는 경우 열린 웹페이지내에서 페이지 이동이 가능하도록하는 fallback 기능이 필요** 여기서 fallback_ 이란 개발에서 자주 쓰는 개념으로 쉽게 말하면 **주요 동작이 실패했을 때 대..

개요- vue3 프로젝트를 하면서 vuex를 통해 관리하던 상태변경을 pinia를 이용해야했다.- pinia 와 vuex의 차이점을 알고 사용해보기로 함- 이에 앞서 이전 버전과 다른 vue3의 설계구조를 알아야 함 -  Composition API vs Options API 의 차이  composition API란 무엇일까? -> vue3에서 도입된 새로운 방식의 컴포넌트 설계 방법. 이전에는 options API(옵션 객체 data, methods, computed, etc.를 이용하여 구성) 를 사용해 컴포넌트를 작성.composition API는 좀 더 유연하고 효율적인 코드를 작성할 수 있도록 해준다. 주요 개념은 **반응성(reactivity)**과 컴포넌트의 상태와 기능을 함수 기반으로 구성..

개요- 환경설정node 18.14.0  / vue3 / vite 과제형 프로젝트를 진행하면서 v-bind:class를 객체형태로 사용하고 조건식을 속성값으로 사용하는 방법을 쓰게 되었다.문제제기) input type="email" 에서 실시간 value값이 설정한 조건에 부합하는 경우 원하는 클래스명이 붙도록 하는 로직구현이 필요               input에 실시간으로 입력되는 값을 캐치해야하므로 watch() 속성에 구현 [과정]1. true, false값에 따라 구현되는 요소는 기존에 클래스명이 있다.2. 삼항연산자를 통해서는 한가지 조건만 충족할 수 있다. ( 기존에 가진 클래스명 / 조건에 부합하는 경우 ) -> 조건에 부합하지 않는 경우를 를 구현할 수 없음3. v-bind:class ..

깃허브 페이지 배포를 시도하면서 발생하는 오류를 기록해보자 1. vue 컴포넌트들이 뜨지 않는 이슈 배포를 했음에도 불구하고 vue 컴포넌트들이 build가 되지 않는 이슈가 발생했다. 개발자도구로 보니 assets 파일내에 css, 이미지가 있었지만 vue컴포넌트들과 관련된 js파일이 전혀없었다.구글링해보니 vite.config.js파일내 rollupOptions에 input관련 설정을 따로 해줘야만 한다는 사실을 알게 되었다.  컴포넌트 관련 포인트와 경로를 설정하고rollupOptions내 output을 따로 설정해 이미지와 css, js파일을 구별 설정을 따로 작성하였다.     2. plugin-vue export-helper.D4GAd3iU.js net::ERR_ABORTED 404 (Not ..

Tailwind.css 란?-Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크로 부트스트랩처럼 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내 스타일링이 가능하다. ** Tailwind.css의 특징- 매우 쉽고 빠르게 원하는 디자인을 개발할 수 있다.- 커스텀이 편리하다. 커스텀을 할 경우, 기본 스타일 값을 수정하는 방식이므로 디자인 일관성을 크게 해치지 않는다.- Intelli Sens 플러그인을 통해 세밀하게 원하는 디자인을 구현하기가 편하다. (미리보기, 자동완성, 신택스 하이라이팅, 린팅지원)- 편리하지만 코드가 지저분해보일 수 있다.(css가 분리되어있는 게 아니므로)   1. tailwind.css 설치하기 (with Nuxt.js)-  nu..

- 입사 테스트겸 nuxt.js를 사용해 볼 계기가 생겨 vue2 와 함께 작업을 해보기로 했다.    일단 nuxt.js란 무엇일까 nuxt.js란?nuxt.js는 vue.js를 기반으로 하는 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 그리고 클라이언트 사이드 렌더링(CSR)을 모두 지원하는 강력한 도구다.nuxt.js를 사용하면 vue.js로 개발할 때 복잡한 설정을 간소화하고, SEO(검색 엔진 최적화) 및 퍼포먼스를 개선할 수 있다. ** nuxt.js의 주요 특징 서버 사이드 렌더링 (SSR):기본적으로 서버 사이드 렌더링을 지원하여, 초기 페이지 로딩 시 서버에서 HTML을 미리 렌더링하고 클라이언트에 전송. 이는 SEO(검색 엔진 최적화)와 첫 페이지 로딩 속도..