[Vue.js] Vuetify + Node.js Express로 웹앱(SPA)을 제작중 입니다

웹/Vue, React, Angular 2022. 8. 4. 04:20

안녕하세요 파일입니다~ 요새 얼마 남지 않은 방학 오랜만에 프로젝트 진행으로 Vue.js, Node.js 를 통해서 웹앱을 하나 제작중입니다. 완전히 새로 만드는건 아니고 예전에 C#으로 SMS 전송기를 구현한적이 있는데 이걸 웹 버전으로 바꾸는 작업중입니다. 이 SMS 전송기는 저희 아버지 업무 자동화에 큰 도움을 드리고 있는 프로그램인데 현재도 잘 작동합니다만 우선 자체적인 서버가 없어서 예약 메세지가 안되는게 가장 불편한 점이였고, 서버에서 연동되지 않는 단순히 클라이언트기 때문에 여러 컴퓨터에서 메세지를 보낼때 그 내용이 서로 연동되지 않는다는 불편함이 있었습니다. 이 SMS 전송기를 웹으로 만들면 모든 애로사항을 해결할 수 있습니다. 제 서비스를 사용하는 몇 명한테만 제한적으로 오픈할 것이기 때..

Article Thumbnail
[Vue.js] 전체 화면 드래그 앤 드롭 구현 (FullScreen Drag and Drop)

웹/Vue, React, Angular 2022. 8. 2. 17:56

Vue 2 + Vuetify 로 프론트엔드단 작업을 하다가 위 사진 처럼 풀스크린 드래그 앤 드롭을 구현해야 하는 상황이 생겼습니다. 아마 사이트를 쓰시다보면 파일 업로드 할 때 저런 전체화면 형태의 드래그 드롭 화면을 한번쯤 만나보셨을 겁니다. Vue 를 안썼으면 그냥 바닐라 JS로 body전체 DOM에 드래그 이벤트 리스너를 걸었을 거 같은데 Vue 에서는 더 쉬운 방법으로 구현할 수 있지 않을까 싶어서 관련 라이브러리를 찾아보았습니다. 우선 Vue 자체에서도 @Event 형식을 통해서 쉽게 드래그 드롭을 구현할 수 있어 보였는데 제가 Vue 지식은 초보 강좌 하나 본게 다라서 ㅎㅎㅎ 구글링을 열심히 해도 방법을 못찾겠더라구요.. vuedraggable 이란 나름 유명한 라이브러리가 있었는데 이것도 ..

Article Thumbnail
[Vue.js] Notification(알림)을 구현하는 25가지 방법

웹/Vue, React, Angular 2022. 8. 1. 05:17

https://morioh.com/p/858e16a92c59 25 Ways to Notification Vue.js Components 25 Ways to Notification Vue.js Components . Simple, extendable, dependency free notification plugin.Basic Vue toast service that uses Vuetify Snackbar component.The Notification vue plugin allow you to display notifications from all your app .A prompt comp morioh.com JS에서 못생긴 alert창 대신에 대안으로 쓸 수 있는 알림창 컴포넌트들을 모아놓은 사이트입니다..

Article Thumbnail
[Vue] Vue 2 버전에서 최신 Vue.js devtools 이 제대로 동작하지 않을 때

웹/Vue, React, Angular 2022. 7. 20. 02:52

https://www.inflearn.com/course/Age-of-Vuejs/ Vue.js 시작하기 - Age of Vue.js - 인프런 | 강의 Vue.js로 쉽게 웹 개발할 수 있도록 기본 개념과 핵심 기능에 대해서 학습하고 구현해봅니다. 강좌를 들으시고 나면 Vue.js로 프런트엔드 개발을 하시는게 재밌어질거에요., - 강의 소개 | 인프런... www.inflearn.com 현재 인프런에서 위 강의를 보면서 Vue.js를 학습중인데 강의가 이전 강의라 Vue 2 버전을 사용합니다. 최신 Vue.js devtools 는 (Vue 전용 개발자 도구) Vue 3 용으로 업데이트 되서 Vue 2 버전에서 학습할 때 데이터나 컴포넌트들이 일부 제대로 표시되지 않는 경우가 있었습니다. 이를 해결하고 싶..

Article Thumbnail
[JS] Promise란? (then, catch, ...) - 프로미스 쉽게 이해하기

웹/JS 2022. 7. 11. 02:33

안녕하세요 파일입니다. 오늘은 JS에서 일종의 진입장벽이라고 할 수 있는 Promise에 대해 알아보겠습니다. 본 글은 우선 콜백 함수에 대해 어느정도 알고있다는 걸 전제로 합니다. 콜백 함수에 대해 모르시면 이 글을 참고해주세요. 동기 vs 비동기 우선 Promise에 대해 알아보기 위해 선행지식이 몇 가지 필요합니다. 그 중 하나가 바로 동기와 비동기 입니다. 동기와 비동기는 꼭 JS에서만 국한되는 개념은 아닙니다. 프로그래밍 언어를 좀 깊게 공부하시다가 보면 한번쯤은 만나게 되는 개념입니다. 쉽게 설명해서 동기는 순서대로 실행하는 것이고, 비동기는 순서대로 실행되지 않는 것 입니다. JS의 경우에도 호이스팅 이후 순서대로 실행, 즉 동기적으로 작동합니다. 코드를 위에서 부터 아래대로 순차적으로 읽어..

Article Thumbnail
[Node.js] node-fetch와 cheerio 이용해서 웹 크롤링 하기

웹/Node.js 2022. 7. 8. 00:40

https://www.scrapingbee.com/blog/node-fetch/ Web Scraping with node-fetch In this tutorial we will see how to use the node-fetch package for web scraping. We will learn what the fetch API is and the different ways to use the package. www.scrapingbee.com 이번에 JS 의 비동기를 이용해서 빠르게 크롤링을 해보고 싶어졌습니다. 파이썬으로 크롤링 하는건 수도 없이 보이는데 Node.js 에서 웹 크롤링을 하는 예제가 많이 보이지 않아서 관련 링크를 첨부합니다. Node.js 에는 기본적으로 fetch() 가 없어..

Article Thumbnail
[JS] 콜백 함수(Callback Function)란? [콜백 함수를 쓰는 함수 직접 만들어보기]

웹/JS 2022. 7. 5. 00:23

안녕하세요. 오늘은 JS에서 자주 사용되는 개념은 콜백 함수(Callback Function) 에 대해 알아보겠습니다. const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; const result = words.filter(word => word.length > 6); console.log(result); // expected output: Array ["exuberant", "destruction", "present"] 위 코드는 developer.mozilla.org 란 곳에서 가져온 배열의 filter 메소드(함수) 를 사용하는 방법을 다루고 있습니다. JS에서 배열을 생성하면 그 배열은 .filter()라..

Article Thumbnail
[JS] 화살표 함수란? (Arrow Function)

웹/JS 2022. 7. 4. 03:04

adder = (a, b) => a + b; console.log(adder(2, 3)); >>> 5 JS로 작성된 코드들을 보면 위와 같이 () 와 화살표(=>) 를 이용한 표현들을 볼 수 있습니다. adder에 어떤 표현식을 대입할 수 있고 adder(2, 3) 를 호출하면 return a + b; 를 하는 함수처럼 동작합니다. 실제로 위 표현은 화살표 함수라고 해서 함수를 간결하게 쓸 수 있는 표현 방법입니다. adder = (a, b) => a + b; 사실 이 표현은 adder = function(a, b) { return a + b }; 이 표현과 같은 것입니다. 대충 function 키워드를 빼고 화살표를 추가한 거 같은데 return은 어디로 사라졌을까요? 오늘은 화살표 함수(Arrow F..

Article Thumbnail