안녕하세요. 이번 주제는 앞서 포스팅했던 Vue 소개 및 프로젝트 생성 편에 이어 실제 프로젝트에서 Vue를 사용하는데 많이 도움되었던 Navigation Guard, Pinia의 활용 경험과 장점을 공유해드리고자 합니다. 목차 네비게이션 가드 (Navigation Guard) 피니아 (Pinia) ※ 시작하기에 앞서 해당 글에서 제공하는 코드는 실제 코드가 아니며 예제를 위해 유사하게 만든 샘플 코드이니 참고바랍니다. 1. 네비게이션 가드 (Navigation Guard) (1) 네비게이션 가드란? 네비게이션 가드는 Vue Router 라이브러리에서 제공하는 라우터로 페이지를 이동하는 동안 특정 조건에 따라 화면 이동을 제어하거나 변경하는 기능입니다. 다시 말해 특정 URL로 접근할 때 조건에 따라 접..

안녕하세요. 이번 글에서는 웹 개발에서 중요한 역할을 하는 프론트엔드 프레임워크 Vue.js를 설명드리겠습니다. 우선 Vue.js에 대해 알아보고 프로젝트를 생성하며 간단한 예제를 만들어보고, 다음 편에선 자사 수행 프로젝트(현대차증권 ‘모바일리빌딩’)에서 Vue를 활용하며 느꼈던 개발 경험을 공유드리도록 하겠습니다. 1. Vue란 먼저 Vue를 알아보기 전 프론트엔드 프레임워크를 사용하는 이유와 SPA(Single Page Application)가 등장한 배경에 대해 설명드리겠습니다. SPA 방식 등장 전 웹 애플리케이션은 사용자가 화면을 이동할 때 마다 새로운 HTML 페이지를 서버에 요청합니다. 반면, SPA는 한 페이지 안에서 모든 기능이 동작되도록 설계되어 HTML 페이지 전체를 불러오지 않고 ..

1. Flutter란? Flutter는 Google에서 만든 Cross-Platform Framework입니다. 하나의 코드로 Android / IOS, Desktop App까지 개발할 수 있습니다. 언어는 구글이 개발한 Dart를 사용합니다. 2. Widget Flutter에서는 모든 것이 Widget으로 시작합니다. Image, Icon, Text, Row, Column, Padding도 모두 Widget입니다. Flutter는 크게 Material Widget과 Cupertino Widget을 자체적으로 제공하기 때문에 look&feel, 빠른 속도, 커스터마이즈, 확장 가능성 등을 지원받습니다. Flutter은 Widget과 Renderer들을 플랫폼 영역에서 앱의 영역으로 옮겨서 위젯들의 커스터..

웹차트 만들기 1편에 이어 응용 편으로 파이그래프를 그려보도록 하겠습니다~! 파이그래프 그리기 먼저, 파이그래프의 전체적 윤곽을 잡는 코드와 설명입니다. [line6] D3 라이브러리를 사용하기 위해서 해당 스크립트 링크 주소를 넣어줍니다. [line11 ~ 15] 파이차트를 그려내기 위해서 고정적으로 사용할 변수들을 선언합니다. - 파이차트를 그려내기 위한 바깥쪽반지름(outerRadius), 안쪽반지름(innerRadius) - d3.scale.category20() 으로 d3 표준색상을 지정합니다. [line17 ~ 22] 파이차트에서 사용할 데이터를 dataset변수에 할당합니다. [line24 ~ 30] 해당라인의 코드는 아래와 같은 구조로 후에 그리게 될 파이차트를 감싸는 태그를 만듭니다. s..

D3.js란? 안녕하세요. 자바스크립트 라이브러리 중 하나인 D3.js에 대해서 소개해드리려고 합니다. D3.js란 자바스크립트 라이브러리를 처음 들어보신 분도 또는 자주 사용해보셨던 분들도 계시겠지만, 이번에는 처음 접해보시는 분들을 위해 조금 자세하고 쉽게 설명해드리도록 하겠습니다. (이미 자주 사용하시고 저보다 더 많은 지식을 알고 계시는 분들에게 미리 양해 말씀드립니다^^) 우선 D3는(D3.js를 줄여서 D3라고 함) 완전히 오픈소스이며, Data-Driven-Documents의 약자로 D가 연속으로 3번 들어가서 일명 D3라는 명칭으로 부르며, 웹브라우저상에서 동적이고 인터렉티브한 정보시각화를 구현하기 위한 자바스크립트 라이브러리입니다. D3의 장점은 새로운 언어 형태가 아니라 자바스크립트 문..

약 1년 전쯤 사내 인트라넷의 모바일 웹을 만드는 프로젝트를 진행하였습니다. 당시 기존의 소스를 그대로 활용하여 모바일 화면에 맞춘 웹 퍼블리싱만 작업하면 쉽게 포팅이 가능하였지만, 개인적으로 Angular 를 학습해보고 싶었던 때였습니다. 그래서 Angular를 사용하여 만들기를 건의하여 컨펌받고 작업에 착수하였습니다. 지금까지 Java, JSP를 다뤄오고 JavaScript라고 해봤자 ES5 기반의 문법과 jQuery 라이브러리 정도만 사용하다가 처음으로 Node.js, Angular, ES6, TypeScript 등의 JavaScript 신문물들을 접하게 되니 대체 어떤 것부터 진행해야 할지 막막했었지만 필요한 부분들을 서적과 가이드 문서를 참고하여 차근차근 학습해가다 보니 결국 완성하긴 했습니다...

앞서 Electron 개념을 정리해보았는데요. 오늘은 Electron 개발환경 구축에 대해 정리해보았습니다. Electron 개념에 대한 내용은 아래 링크에서 확인해 볼 수 있습니다. [Electron 개념정리 클릭] Electron 애플리케이션은 근본적으로 Node.js 애플리케이션이라고 할 수 있습니다. 그렇기에 사용자의 데스크톱에 Node.js 와 git이 기본적으로 설치되어 있다는 가정 하에 일렉트론 개발하기를 진행하겠습니다. 일렉트론 설치하기 간단한 프로젝트 생성을 위해 먼저 electron_test라는 폴더를 생성 후 깃헙을 통해 일렉트론 프로젝트를 생성합니다. 프로젝트가 생성이 된다면 생성된 프로젝트 디렉터리로 이동하여 의존성 설치와 애플리케이션 실행을 실행시켜 줍니다. 설치와 실행이 다 되..

안녕하세요 데스크톱 애플리케이션을 개발하기 위해 공부한 일렉트론이라는 프레임 워크에 대해서 정리해 보겠습니다. Electron은 2013년 GitHub이 텍스트 편집기인 Atom을 만들기 위해 개발한 프레임 워크입니다. 2014년 Atom과 Electron이 오픈 소스로 공개가 되면서, 지금은 많은 개발자들과, 회사들에게 사랑 받는 인기 있는 도구가 되었습니다. 기본적인 웹 지식만 있다면 누구든 데스크톱 애플리케이션 개발자로 만들어주는 일렉트론에 대해서 지금부터 설명하겠습니다. 1. 일렉트론(Electron)이란? Electron은 Native애플리케이션이며 Chromium과 Node.js를 1개의 런타임으로 통합하여 JavaScript, HTML, CSS만 가지고도 데스크톱 애플리케이션을 만들 수 있도..

Vue.js를 이용한 Todo리스트 예제 만들기(2) 저번 포스트에 이어서 카테고리, 검색어 입력을 통한 검색 기능/보기 방식 변경/정렬 방식 변경/완료한 항목 체크 기능을 구현하면서 사용한 vue 기능을 정리해보려고 합니다. 3. 카테고리, 검색어 입력을 통한 검색 기능 * 결과 화면 * html(form부분만) All {{ c }} * js(데이터&사용한 함수 부분만) var app = new Vue({ el: "#app", data: { option: 'all', search: '', categories: [], todos: [], viewType: 'list', sortType: 'sort-numeric-up', buttons: { 'view': [ {'class':'list', 'title':'..

Vue.js를 이용한 Todo리스트 예제 만들기(1) 프론트엔드 개발에 관심이 있으시다면 Vue.js를 한 번 쯤은 들어보거나 이미 프로젝트에서 사용하신 경험이 있으시리라 생각합니다. 저는 실무에서 Vue.js를 사용해볼 경험이 없어서, 'Vue.js라는 javascript 프레임워크가 있다.' 정도만 알고, 공식 사이트에 가서 대충 내용만 훑어본 적이 있습니다. 그런데 최근에 주위에서 실시간 데이터 바인딩이 필요한 프로젝트에서 Vue.js를 사용한다는 이야기를 들었습니다. 저도 머지않아 실무에서 사용할 일이 있을 것이라는 생각이 들어, 개인적으로 공부를 해보기로 하였습니다. 가이드 문서가 아주 잘 정리되어 있어서, 가이드 문서만 쭉 읽어내려가다보니 이론적으로만 접근하는 것은 무언가 부족한 느낌이 들었습..