본문으로 바로가기
웹
해당되는 글 33건
웹/JS
웹 프로젝트 리팩토링 -> TS(타입 스크립트) 도입했습니다
기존에 Node.js Express 로 짜여진 백엔드단 코드가 일반 JS였는데 TS(타입 스크립트) 를 도입해서 리팩토링 과정을 거쳤습니다. Vue 코드도 언젠가 타입 스크립트로 바꿔줘야 하는데.. Vue 3는 공식적으로 TS를 지원하지만 제 프로젝트 환경의 경우 Vuetify 를 사용하기 위해 부득이하게 Vue 2 버전을 사용해서 (Vuetify 가 Vue 3를 공식[Release]으로 지원하지 않고 있습니다.) Vue 2는 각종 플러그인을 이용해야 TS를 사용할 수 있습니다. 쉽게 말해서 귀찮아서 나중에 한다 이말입니다. 이렇게 전부 js에 CommonJS require("...") 로 가득한 코드를.. ts 파일로 바꿔주고 ES6 import 구문으로 바꿔줬습니다. TS 의 장점인 자동 완성, 잘못..
웹/Node.js
[Node.js] 시놀로지 Docker + Node.js 서버 [Error: ENOENT: no such file or directory, open '***'] 오류 해결
Node.js + Vue.js 로 만든 프로젝트 완성 후 제대로 작동하는걸 확인해 시놀로지 NAS로 서버를 옮기는 작업을 했습니다. 첫번째로 한 작업은 Node.js 와 Vue.js 프로젝트를 코드 하나로 통합하는 작업이였습니다. 프론트엔드단 Vue Cli로 생성한 Vue.js 코드는 웹 서버가 내장되어 있어서 8080 포트로 따로 돌아가고, 백엔드단 Node.js는 Express 프레임워크를 이용해서 API 서버를 제작했는데 3000번 포트로 돌아가게 됩니다. 프론트엔드단과 백엔드단이 깔끔하게 분리되어 제작된 바람직한 코드지만 웹 서버도 실제로 2개나 돌아가서 배포할때는 비효율적인 구조입니다. 그래서 Vue.js 에서 WebPack 을 이용해 빌드 과정을 거쳐서 HTML CSS JS 로 통합 파일을 생..
웹/Vue, React, Angular
[Vue.js] <v-data-table> Rows per page 텍스트 및 내용 수정 + 바닥글 수정 방법
* 다음 글은 Vue.js 2.0 버전 + Vuetify 환경을 기준으로 작성되었습니다. Vuetify의 컴포넌트 태그를 이용하면 간단하게 데이터 테이블을 구현할 수 있습니다. 저는 엑셀 파일을 서버에 업로드 하면 미리 보기 하는데 굉장히 유용하게 사용하고 있구요. 기본적으로 표의 열(Column) 이름이나 아이템 요소들은 그냥 객체가 여러개 들어있는 배열을 주면 간단하게 수정이 가능하나 저기 빨간색 부분으로 표시된 Rows per page, 1-5 of 10 과 같은 텍스트 들은 Vuetify 공식 문서에서도 따로 바꾸는 방법을 명시해서 알려주고 있진 않습니다. Vuetify 로 사이트 만드는 사람들이 전부 영어권 사람들은 아닐꺼니깐.. 당연히 바꾸는 방법이 존재합니다! 오늘은 저 아래에 있는 바닥글의..
웹/Node.js
[Node.js] winston custom level 추가하기
Node.js의 라이브러리인 winston 을 이용하면 로그를 저장하는걸 간편하게 구현할 수 있습니다. winston 은 level 이라는 개념으로 로그 우선순위를 관리하는데 로그 level은 아래와 같습니다. { error: 0 , warn: 1 , info: 2 , http: 3 , verbose: 4 , debug: 5 , silly: 6 } 숫자가 낮을 수록 우선순위가 높으며, error이 가장 위험한 로그라고 보시면 됩니다. winston 은 이러한 level로 로그를 저장하며 특정 level 을 설정해놓고 그 level에 맞춰서 로그를 저장하라고 파일에 지시해주면 그 로그만을 저장하는게 아니라 숫자가 같거나 낮은 로그까지 한꺼번에 저장하게 됩니다. 예를 들어서 level : info 로 설정하..
웹/Vue, React, Angular
[Vue.js] Vuetify + Node.js Express로 웹앱(SPA)을 제작중 입니다
안녕하세요 파일입니다~ 요새 얼마 남지 않은 방학 오랜만에 프로젝트 진행으로 Vue.js, Node.js 를 통해서 웹앱을 하나 제작중입니다. 완전히 새로 만드는건 아니고 예전에 C#으로 SMS 전송기를 구현한적이 있는데 이걸 웹 버전으로 바꾸는 작업중입니다. 이 SMS 전송기는 저희 아버지 업무 자동화에 큰 도움을 드리고 있는 프로그램인데 현재도 잘 작동합니다만 우선 자체적인 서버가 없어서 예약 메세지가 안되는게 가장 불편한 점이였고, 서버에서 연동되지 않는 단순히 클라이언트기 때문에 여러 컴퓨터에서 메세지를 보낼때 그 내용이 서로 연동되지 않는다는 불편함이 있었습니다. 이 SMS 전송기를 웹으로 만들면 모든 애로사항을 해결할 수 있습니다. 제 서비스를 사용하는 몇 명한테만 제한적으로 오픈할 것이기 때..
웹/Vue, React, Angular
[Vue.js] 전체 화면 드래그 앤 드롭 구현 (FullScreen Drag and Drop)
Vue 2 + Vuetify 로 프론트엔드단 작업을 하다가 위 사진 처럼 풀스크린 드래그 앤 드롭을 구현해야 하는 상황이 생겼습니다. 아마 사이트를 쓰시다보면 파일 업로드 할 때 저런 전체화면 형태의 드래그 드롭 화면을 한번쯤 만나보셨을 겁니다. Vue 를 안썼으면 그냥 바닐라 JS로 body전체 DOM에 드래그 이벤트 리스너를 걸었을 거 같은데 Vue 에서는 더 쉬운 방법으로 구현할 수 있지 않을까 싶어서 관련 라이브러리를 찾아보았습니다. 우선 Vue 자체에서도 @Event 형식을 통해서 쉽게 드래그 드롭을 구현할 수 있어 보였는데 제가 Vue 지식은 초보 강좌 하나 본게 다라서 ㅎㅎㅎ 구글링을 열심히 해도 방법을 못찾겠더라구요.. vuedraggable 이란 나름 유명한 라이브러리가 있었는데 이것도 ..
웹/Vue, React, Angular
[Vue.js] Notification(알림)을 구현하는 25가지 방법
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창 대신에 대안으로 쓸 수 있는 알림창 컴포넌트들을 모아놓은 사이트입니다..
웹/Vue, React, Angular
[Vue] Vue 2 버전에서 최신 Vue.js devtools 이 제대로 동작하지 않을 때
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 버전에서 학습할 때 데이터나 컴포넌트들이 일부 제대로 표시되지 않는 경우가 있었습니다. 이를 해결하고 싶..
