본문으로 바로가기
2022/08
해당되는 글 13건
프로그래밍/Python
디시인사이드 간편 글 검색기(탐색기) v0.15
Python 으로 제작한 디시인사이드 글 검색기 입니다. 프로그램 설명 간단하게 설명드리자면 기존 디시인사이드 사이트의 문제점인 글 검색 시스템을 개선시켜주는 프로그램입니다. 첨부한 사진처럼 디시인사이드는 서버의 부하를 줄이기 위해 글을 10000개 단위로 끊어서 검색하는데 PC는 해당 페이지에서 원하는 데이터가 없으면 다음 검색, 모바일은 다음 글 찾기 버튼 등을 이용해서 노가다로 글을 찾아야 하는데 10000개 단위내에서 찾아낸 글을 페이지 단위로 정렬해서 보여주기 때문에 옛날 글을 찾는게 거의 불가능하고 보기도 매우 어렵습니다. 본 프로그램은 이 노가다를 조금이나마 해소해주는 프로그램으로써, 반복횟수 만큼 페이지, 다음 글 찾기를 자동으로 탐색하며 검색으로 옛날글을 찾는데 도움을 주는 프로그램입니다..
웹/JS
[JS] async & await란? - 제대로 알고 사용해보자!
본 글을 읽기 전에 Promise 에 대해 미리 알고 계셔야 합니다. 안녕하세요 파일입니다. 이전에 Promise를 통해 CallBack 지옥을 .then() 과 .catch() 를 이용해 개선시킬 수 있었습니다. 이제는 조금 더 나아가서 async await를 통해 Promise로 작성된 코드들을 한번 더 개선시켜 보겠습니다. * 여기서 개선되는 것은 대부분 가독성 입니다. Async & Await이란? async 와 await은 Promise를 조금 더 간편하게 사용 할 수 있도록 도와주며 동기적으로 실행되는 것 처럼 보이게 하는 문법입니다. async와 await은 새로운 것이 추가된 것이 아니며 기존에 존재하는 Promise를 쉽게 사용할 수 있게 해줄뿐인, 즉 Promise의 Syntatic s..
웹/JS
[JS] "==" 와 "===" 연산자의 차이점
프로그래밍을 하면서 값들의 같음을 비교하려면 == 연산자를 이용해서 같음을 비교할 수 있습니다. 대부분의 언어에서 사용하는 것이기도 하구요. 그런데 JS는 다른 프로그래밍 언어들과 다르게 "==" 도 있고 "==="도 있습니다. == 은 알겠는데 ===은 뭘까요? 인터넷에 관련글을 찾아보면 글이 빼곡히 쌓여있는데 그만큼 JS를 접한 개발자들을 당황시킨 내용이라고 할 수 있습니다 당연히 저도 당황을 해서 글을 쓰는것이구요 -.- 저는 난잡한 특성이 많은 JS를 싫어하는 편인데 웹 개발을 하면 현재로썬 대체제가 없어서 어쩔 수 없이 사용을 하고 있습니다. 잡담은 여기까지 하고 == 와 ===에 대해 알아봅시다. 용어 정리 연산자, 피연산자라는 용어를 잘 모르실 수 있으므로 미리 설명하고 넘어갑니다. 3 + ..
웹/NoSQL
[MongoDB] Connection String에 DB이름 적을시 접속안되는 문제 해결
이번에 Node.js로 예약 작업을 구현하기 위해서 Agenda 라는 라이브러리를 사용하게 되었습니다. Agenda는 다른 예약 라이브러리들과 다르게 예약 작업을 DB에 직접 저장해둬서 서버를 껐다 켜도 예약 작업 들이 날라가지 않습니다. 여기서 저장할때 사용하는 DB가 MongoDB라서 진행하는 프로젝트는 강제로 MongoDB를 사용하게 되었습니다. 어쨌던 MongoDB 연결을 위해서 MongoDB 연결주소(?) Connection String URI 란 것을 제공해줘야 MongoDB 서버에 접속 가능합니다. mongodb://your_id:password@server_ip:27017/ 다음과 같은 주소를 이용하면 쉽게 데이터베이스에 접속할 수 있었습니다. 그러나 저렇게 접속하는 것은 특정 DB에 접속..
웹/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 로 사이트 만드는 사람들이 전부 영어권 사람들은 아닐꺼니깐.. 당연히 바꾸는 방법이 존재합니다! 오늘은 저 아래에 있는 바닥글의..
프로젝트/프로그래밍
SMS 전송 웹 서비스(Web APP) 개발 완성 + Vue.js 로 개발한 후기
안녕하세요 파일입니다. 오늘은 저번에 시작한 프로젝트인 SMS 전송 웹 서비스를 완성하게 되어 최종적으로 남기는 후기 입니다. 서비스 자체도 지인들에게 일부 공개할 예정이기에 본 글은 서비스의 홍보 목적이 아닌 개발 후기 및 자랑 목적(?) 이 되겠습니다. (누구한테 알려줄 목적이 아니니 어렵게 쓸거에요!! ) 개요 우선 본 프로젝트의 시작 계기가 된 SMS 전송기 입니다. 사실 이 프로그램을 만든 계기는 본질적으로 아버지 업무에 도움을 드리기 위해 제작하였고 이와 같은 형태의 프로그램을 이번까지 2번이나 만들었습니다. * 이번에 비슷한걸 또 만들게 됐으니 총 3번이 되겠네요. 처음에는 Python 코드로 만든 CLI (No GUI) 형태, 동생한테 이렇게 도스창에서 메세지 전송하는게 불편하다고 피드백이..
