본문 바로가기

Vue.js46

[Chart.js] Vue에서 사용하기.

안녕하세요. 회사에서 외주로 맡겼던 제품코드를 보면서, Chart.js라는 라이브러리를 처음 접하게 되었습니다. 기존에는 apex chart를 제품에 사용하고 있었습니다만, chart.js 또한, 커스텀이 광범위하게 가능하다는 점에서 많이 사용하고 있는 것 같더라구요. 그래서, chart.js를 사용해서 실제 작업 중인 프로젝트에 처음 적용해보면서 공부한 내용을 정리해보고자 합니다. 제가 chart.js로 프로토타입은 만든 결과는 다음과 같습니다. Chart 만들기 Vue 프레임워크에 chart.js를 사용해서 chart를 화면에 그리는 과정을 설명한 글입니다. 일단, 공용으로 여러 컴포넌트에서 재사용할 수 있도록, 파일 구성을 다음처럼 구성했습니다. 📂src | - 📂Modules |- 📂LineCha.. 2021. 7. 26.

[Vue] Vuetify 템플릿 적용 개발 팁

개요 제가 실제 업무에서 담당하는 제품의 스타일 작업은 scss로 개발되었습니다. 전부요. style 코드가 script 코드보다 많은 컴포넌트 파일도 많았습니다. 유지보수에 적합하지 않다고 생각했습니다. 그래서, components 템플릿을 찾아서 사용하면서, 템플릿의 장점과 사용방법을 공유하려고 합니다. 직접 css로 style 작업 Vuetify 템플릿 사용 장점 🤔. - 개발 생산성 증가. 빠르게 개발 가능. - UX 좋아짐. - css 코드를 작성할 일이 거의 없음. 유지보수 관리에 좋음. - 얼마든지 디자인 요구사항대로 커스텀 가능. - 정적 파일 img를 사용하지 않고, icon을 넣을 수 있음. 단점 - 개발을 할 때, 작업 시간 많이 걸림. - css 코드가 많아져서 관리에 어려움. - .. 2021. 7. 18.

[vue][업무] 404 페이지 만들기

404페이지로 redirect하기 위해서는 router 설정이 필요합니다. 등록된 vue-router 설정 이외의 경로로 요청이 오면, 지정된 페이지로 요청이 가도록 해야 합니다. 저희 제품은 사용자에게 없는 경로임을 알려주기 위해서 404페이지로 redirect 되도록 했습니다. 📂 router/index.js { path: '*', redirect: "/404" // 아래처럼 바로 NotFound 경로를 매칭해도 됨 // component: NotFound }, 2021. 7. 15.

[Vue][업무][베트남🇻🇳]webpack의 모듈 시스템을 사용한 alert와 confirm 개발하기

이번 글은 Vue에서 alert와 confirm을 더 좋게 개발하는 방법에 대해서 알아보려고 합니다. 프로토타입 결과물은 아래와 같습니다. 🧑🏻‍💻 현재 제가 다니는 회사 웹 솔루션 제품 구성은 아래와 같습니다. Vue-cli의 기본 스펙으로 개발되었음. Javascript의 기본 alert를 사용하지 않음. alert가 Vanilla Javascript로 작성되었음. mixin에 script 파일을 등록하고 alert를 사용할 컴포넌트에 mixin 파일을 import해서 alert를 화면에 표시하고 있음. 시니어 개발자가 개발해 놓은 기능 중에는 alert와 confirm이 있었고, 어떻게 개발이 된 건지 분석을 해봤습니다. 시니어 개발자의 코드가 더 좋은 방법이고 구조적으로 코드가 작성되어 있다는 느.. 2021. 7. 12.

[Vue] Virtiual DOM과 Vue 렌더링 원리 알아보기 ✏️

개요 이번 6월에 회사에서 제가 속한 팀을 대상으로 Vue 라이프 사이클에 대한 기술 공유를 제가 맡게 되었었는데요. 단순히, 라이프 사이클에 대한 개념과 사용 방법 공유보다는 라이프 사이클이 어떻게 렌더링으로 작용하는지를 공유하고 싶었습니다. 그 이유는 저와 팀 원들에게 원리와 동작을 충분히 이해하고 프로그래밍을 하자는 메시지를 던지기 위해서였습니다. 공유를 준비하면서 공부한 내용을 총 3개의 시리즈 포스팅으로 작성해봤습니다. ✏️ [웹 렌더링 개념-1] DOM 이해하기 ✏️ [웹 렌더링 개념-2] webkit 렌더링 엔진 작업 순서- 브라우저에 화면이 그려지는 과정 👉 [Vue] Virtual DOM과 Vue 렌더링 원리 알아보기 이번 내용은 Vue가 브라우저에서 렌더링되는 원리를 알아보겠습니다. 그.. 2021. 6. 27.

[Vue] vue-cli 스펙을 사용한 코드 베이스에서 IP 분리하기

개요 코드 베이스에 ip가 들어가 있는 경우는 조금 기형입니다. 개발된 코드 베이스에 ip가 있을 이유도 없고 있어선 안 된다고 생각했습니다. 그래서 vue-cli의 빌드 종류(개발/빌드)에 따라서 잡히는 환경변수를 이용해서 웹의 호스트를 자동으로 설정해 보겠습니다. 🤔생각한 문제점 - 개발 환경일 때와 배포 환경일 때 사용해야 할 IP 구분을 위한 로직이 추가되어야 함. - 가독성 문제 - 보안 문제 간단하게. Vue-cli로 구축된 프로젝트에서 파일에 변수를 설정해서 코드베이스에서 이 파일을 참조해서 코드에 값을 대입하는 방법을 알아보겠습니다. 분리를 해야하는 문제를 해결하기 위해서, 전에 작성된 에서 소개한 Vue-CLI Mode env 관련한 공식문서를 다시 참고해 보았습니다. 구분 방법 1. 프.. 2021. 6. 17.

[Vue-cli]개발모드와 빌드모드 구분하기

개요 개발 작업에 비효율적인 문제가 있었습니다. 브랜치를 매번 새로 만들어서 작업을 할 때마다, 개발 호스트를 변경해 줘야 하는 문제가 있었습니다. 효율적이지 않았고 자동화가 필요한 부분이라고 생각했습니다. 코드 베이스에 ip가 들어가 있는 경우는 조금 기형입니다. 개발된 코드 베이스에 ip가 있을 이유도 없고 있어선 안 된다고 생각했습니다. 그래서 vue-cli의 빌드 종류(개발/빌드)에 따라서 잡히는 환경변수를 이용해서 웹의 호스트를 자동으로 설정해 보겠습니다. 요약 Vue-CLI는 커스텀 설정을 하지 않으면 빌드할 때 자동으로 process.env.NODE_ENV에 값을 주입해 줍니다. 저는 코드 레벨에서 조건문을 사용해서 process.env.NODE_ENV의 값에 따라서 개발 환경일 때와 빌드 .. 2021. 6. 16.

[Vue] life cycle

Vue life cycle Vue.js 라이프사이클은 Vue 인스턴스가 생성되는 것부터 인스턴스가 소멸되는 것까지의 과정입니다. Vue 라이프 사이클이 실행되는 경우는 다음과 같습니다. - Vue 인스턴스가 생성돼서 DOM에 마운트되는 경우 - 데이터가 변경되서 DOM을 업데이트하는 경우 Vue.js 라이프 사이클은 여러 단계가 정의되어 있습니다. 그리고 각 단계마다 사용자가 정의한 로직을 실행하는 주체가 있습니다. 이를 '훅'이라고 합니다. Vue.js 공식문서에서는 '인스턴스 라이프사이클 훅'이라고 정의하고 있습니다. 인스턴스 라이프사이클 훅 Vue.js 라이프 사이클은 여러 단계를 순서대로 실행합니다. 각 단계마다 호출되는 훅이 있습니다. 주요 훅은 created, mounted, updated, .. 2021. 5. 12.

[Vue] v-model 을 잘 사용하는 방법

Vue.js에서 폼 입력 바인딩으로 많이 사용하는 v-model 유용한 기능을 살펴보려고 합니다. 값 바인딩 : 체크박스 v-model과 함께 사용하기 true-value와 false-value를 사용해서 toggle 데이터에 입력되는 값을 true나 false가 아니라 유연하게 개발자가 원하는 값으로 입력받을 수 있습니다. 위의 코드대로라면, toggle의 초기 값은 'no'입니다. checkbox를 체크하게 되면 toggle은 'yes'가 됩니다. 수식어 v-model.lazy input이 아니라 change 이벤트 후에 데이터가 연동되도록 하는 수식어입니다. ex) v-model.number input으로 받는 숫자는 문자열이 아닌, int type으로 데이터가 들어가게 하는 수식어입니다. ex) .. 2021. 4. 19.

[vue.js] vue-router 튜토리얼 -1

개요 jquery나 pure js로 개발된 페이지는 사용자가 매 번 요청하는 경로가 달라지면, 서버에서 페이지 자원을 다시 받아오게 됩니다. 받아오는 동안에도 시간이 걸리기 때문에 화면이 번쩍하면서 랜더링이 됩니다. 반면어 spa는 사용자가 처음 애플리케이션에 접속할 때 보내는 서버 요처으로 애플리케이션에 필요한 자원을 모두 받아옵니다. 사용자가 경로를 다르게 요청하면, 서버에 다시 페이지 자원을 요청하지 않습니다. 처음에 받아온 script 파일로 동적으로 페이지를 변환합니다. 덕분에 서버는 해당 경로에 페이지에 필요한 데이터만 브라우저에 전송해 주면되므로, 서버에 부담이 덜 하게 됩니다. 그럼, 브라우저에서는 어떻게 동적으로 경로에 맞는 페이지를 랜더링해주는 걸까요? vue에서는 사용자가 요청한 경로.. 2021. 4. 13.

티스토리툴바