프로젝트/프로그래밍
SMS 전송 웹 서비스(Web APP) 개발 완성 + Vue.js 로 개발한 후기
안녕하세요 파일입니다. 오늘은 저번에 시작한 프로젝트인 SMS 전송 웹 서비스를 완성하게 되어 최종적으로 남기는 후기 입니다. 서비스 자체도 지인들에게 일부 공개할 예정이기에 본 글은 서비스의 홍보 목적이 아닌 개발 후기 및 자랑 목적(?) 이 되겠습니다. (누구한테 알려줄 목적이 아니니 어렵게 쓸거에요!! ) 개요 우선 본 프로젝트의 시작 계기가 된 SMS 전송기 입니다. 사실 이 프로그램을 만든 계기는 본질적으로 아버지 업무에 도움을 드리기 위해 제작하였고 이와 같은 형태의 프로그램을 이번까지 2번이나 만들었습니다. * 이번에 비슷한걸 또 만들게 됐으니 총 3번이 되겠네요. 처음에는 Python 코드로 만든 CLI (No GUI) 형태, 동생한테 이렇게 도스창에서 메세지 전송하는게 불편하다고 피드백이..
일상
웹 프로젝트 진척 90%?
거창하게 시작한 웹 프로젝트 완성이 머지 않았습니다 ㅠㅠ 이제 SMS 예약 전송 기능 프론트 화면만 잘 만들면 거의 끝... 위 화면은 Node.js Express 백엔드단 API 서버 리팩토링한 결과물입니다. 라우터를 파일 별로 분리해서 (모듈화) 코드를 깔끔하게 정리했습니다. 사실 일반적으론 백엔드가 할 일이 더 많고 힘들다지만, 이번에 Vue.js 기초만 떼고 프론트 들이박기 시도해본 결과 프론트도 만만치 않은 거 같습니다. 지금 제대로 완성이 안되는 것도 프론트 코드를 다 못짜서.. (V-dialog 같은거 일일히 만드는거 너무 귀찮네요) 현재 프론트, 백, 데브 옵스 혼자 다 해야해서 정신이 나갈거 같지만 이번에 웹 개발을 어떻게 할 지 확실히 감이 온 거 같네요. 그리고 간단한거 아니면 앞으로..
웹/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창 대신에 대안으로 쓸 수 있는 알림창 컴포넌트들을 모아놓은 사이트입니다..
리뷰
신한카드 Global + 체크카드 발급 간단 후기
서론 스카이림 통팩(모드팩)만 돌려가면서 300시간쯤.. 항상 똑같은 퀘스트들만 하다보니 질려서 다른 할 게임을 찾아보던 중 같은 베데스다 게임 스튜디오에서 개발한 폴아웃 4가 눈에 띄었습니다. 역시나 스카이림 만든 회사 아니랄까봐 모딩툴이 훌륭하게 잘 갖춰져 있어서 통팩을 찾을 수 있었죠. 베데스다 게임들이 그렇듯 게임 하나 만들 수 있는 수준의 모딩툴 주고 게임은 버그덩어리가 대부분 입니다. (주관적임) 스카이림은 비공식 버그 패치부터 시작해서 통팩을 깔면 거의 새로운 게임이 하나 나오는 수준으로 바뀌는데 과연 폴아웃 4도 그럴까..? 해서 우선 게임부터 구매하기로 했습니다. 스팀에 정가주고 사기엔 너무 비싸고 돈도 아깝기에 키를 싸게 파는 곳을 찾아봤습니다. 결론적으로 제가 게임키를 구매한 곳은 H..
리뷰
마이크론 Crucial P5 M.2 NVMe 2TB 간단 리뷰
스카이림 통팩들로 인해 지독한 용량 부족으로 시달리다가 이번에 돈이 좀 생겨서 SSD를 하나 사왔습니다. 마이크론 Crucial P5 M.2 NVMe 2TB 입니다. 퀘이사존 특가 게시판을 돌다가 아쉽게도 P5의 상위 모델인 P5 Plus (NVME PCIE 4.0) 를 11마존에서 놓쳐서 P5를 18만원대에 구매해왔습니다. 옛날엔 NVME SSD 는 커녕 일반 SATA SSD만 해도 가격이 엄청 비쌌는데.. 이제는 NVME SSD가 싸게 팔면 오히려 SATA SSD 보다 가성비가 더 좋은 수준입니다. 일반적으로 컴퓨터에서 체감 성능은 4K 읽기/쓰기 속도가 대부분을 차지하기 때문에 (짜잘 짜잘한 파일을 읽는 속도) 하드와 SSD는 4K 성능차가 커서 속도 체감도 정말 크지만 NVME SSD와 일반 SA..
이모티콘창 닫기
울음
안녕
감사
당황
춤
피폐
