본문 바로가기

토이 프로젝트

 (12)
electron 프로그램 자동 업데이트 진행 시키기 (auto-updater), amazon s3 일렉트론으로 프로그램을 만들 후에 계속해서 업데이트 작업을 진행하는데 그 때마다 새로 설치파일을 사용자에게 주는 것은 너무나도 비효율적이라고 할 수 있습니다. 또한 잘못 코딩한 프로그램이 배포되면 보안적인 문제를 겪는데 그 설치파일을 이용해서 계속해서 잘 못 작성된 코드를 활용할 수도 있을 것입니다. 그래서 electron에서는 auto-updater라는 것을 제공합니다. www.electronjs.org/docs/api/auto-updater autoUpdater | Electron Enable apps to automatically update themselves. www.electronjs.org electron 공식 문서에서도 나와있는 내용이지만 조금 한국인이 알아듣기 쉽게 정리를 해보겠습니다. ..
[자바스크립트] 네이버 검색광고 API 이용하기 (Node.js) - 네이버 검색량 조회 예제 (/keywordstool API) 네이버에서는 여러가지 API 서비스를 제공한다. 대표적으로 developers.naver.com/products/intro/plan/ API 소개 네이버 오픈 API 목록 네이버 오픈API 목록 및 안내입니다. 네이버 오픈 API 목록 API명 설명 호출제한 검색 네이버 블로그, 이미지, 웹, 뉴스, 백과사전, 책, 카페, 지식iN 등 검색 25,000회/일 네이버 developers.naver.com 위와 같이 네이버 오픈 API 서비스와 아래 링크 네이버 검색광고 API 서비스이다. naver.github.io/searchad-apidoc/#/guides searchad-apidoc naver.github.io 위에 오픈 API 서비스는 node.js를 이용한 사용방법이 자세히 나와있지만 네이버 검색..
GraphQL, Sequelize, MySql, React (apollo server, apollo client) - CRUD 구현 우선 내가 생각하는 GraphQL의 장점은 1. rest api로 작성할때 각 url 마다 api 를 만들어줄 필요없이 하나의 end-point로 데이터를 주고받는 것이 가능하는 것이다. 2. 내가 만들어 놓은 query나 mutation을 이용하여 필요한 값들만 정확하게 가져와 데이터 낭비를 줄일 수 있다. 더 많은 장점들이 있지만 우선 생각나는 것들이 이것들 뿐이다. 그리고 단점은 file전송 같은 것을 할 때 복잡하다. 이 포스팅을 하는 이유는 주로 Sequelize와 MySQL을 같이 쓰는데 이렇게 GraphQL, Sequelize, MySQL 세 가지를 같이 활용해서 만든 예제들이 충분하지 않아, 만들기 어려웠기 때문이다. 그리고 서버는 아폴로 서버를 이용하여 만들 것이고 프론트는 리액트에 아폴..
[자바스크립트 ] 매크로 만들기 - puppeteer (간단한 자동 로그인) 보통 매크로나 웹 크롤링은 python으로 많이들 만든다는 것을 알고 있었다. 하지만 자바스크립트로도 가능하다고 하여 이번 프로젝트는 웹 매크로 만들어보려고 한다. *매크로 사용으로 인한 불이익은 어떠한 경우에도 책임지지 않습니다. 우선 npm을 이용하여 puppeteer를 자신의 프로젝트 폴더에서 다운로드 한다. npm install puppeteer 이후 자신의 .js 파일을 만들어 코드를 넣는데 저는 index.js로 만들었습니다. 자세한 설명은 주석을 달아놓았습니다. const puppeteer = require('puppeteer'); const sanitizeHtml = require('sanitize-html'); (async () => { // launch 메서드는 chrome을 실행시킴...
로또 추점기, 로또 번호 생성기 (로또 추첨 사이트) 사용 방법 1. 돌리고 싶은 경우의 수를 입력한다. (100000 이하의 수) 2. 가장 많이 나온 숫자 6가지를 확인한다. 3. 그 숫자를 가지고 로또점에가서 로또를 산다. 4. 부자가 된다. See the Pen ZEOrNBP by ukcasso (@ukcasso) on CodePen. 예시
[자바스크립트] 작은 도서관 프로그램 만들기 (MySQL, Express, Fetch API, Node.js) - Mysql, express, fetch api crud example (2) 2020/10/13 - [토이 프로젝트] - [자바스크립트] 작은 도서관 프로그램 만들기 (MySQL, Express, Fetch API, Node.js) - Mysql, express, fetch api crud example (1) [자바스크립트] 작은 도서관 프로그램 만들기 (MySQL, Express, Fetch API, Node.js) - Mysql, express, fetch api cr 2020/10/08 - [토이 프로젝트] - [자바스크립트] 작은 도서관 프로그램 만들기 (MySQL, Express, ejs, Node.js) - Mysql, express, ejs crud example [자바스크립트] 작은 도서관 프로그램 만들기 (MySQL, Express.. ukcasso.tistor..
[자바스크립트] 작은 도서관 프로그램 만들기 (MySQL, Express, Fetch API, Node.js) - Mysql, express, fetch api crud example (1) 2020/10/08 - [토이 프로젝트] - [자바스크립트] 작은 도서관 프로그램 만들기 (MySQL, Express, ejs, Node.js) - Mysql, express, ejs crud example [자바스크립트] 작은 도서관 프로그램 만들기 (MySQL, Express, ejs, Node.js) - Mysql, express, ejs crud example 2020/09/03 - [토이 프로젝트] - [자바스크립트] 작은 도서관 프로그램 만들기 (쿠키, 로컬, 세션 스토리지의 개념 포함) [자바스크립트] 작은 도서관 프로그램 만들기 (쿠키, 로컬, 세션 스토리지의 �� ukcasso.tistory.com 지난 시간엔 ejs를 활용해서 ejs 문법을 넣고 crud를 구현해보았다. 이번에는 fet..
[자바스크립트] 작은 도서관 프로그램 만들기 (MySQL, Express, ejs, Node.js) - Mysql, express, ejs crud example 2020/09/03 - [토이 프로젝트] - [자바스크립트] 작은 도서관 프로그램 만들기 (쿠키, 로컬, 세션 스토리지의 개념 포함) [자바스크립트] 작은 도서관 프로그램 만들기 (쿠키, 로컬, 세션 스토리지의 개념 포함) 회사에서 내준 작은 프로젝트 과제이다. 힘들었던 부분은 외부 라이브러리를 일절 사용하지 않아야 한다는 점이었다. 아래는 개발 제약 사항과 화면 요구 사항이다. // 개발 제약 사항 // 책의 추 ukcasso.tistory.com 지난번에 만들었던 작은 도서관 프로그램이다. 그 당시에는 LocalStorage라는 것을 이용해 데이터를 해당 ip주소에 맞게 저장하는 개념을 사용하였다. 하지만 이번에는 조금더 제대로 된 사이트를 만들어보고자 MySQL과 ejs그리고 Node.js를 활용하..
[자바스크립트] 로또 번호 분석기 (Lotto Analysis) 사용 방법 1. 돌리고 싶은 경우의 수를 입력한다. (100000 이하의 수) 2. 가장 많이 나온 숫자 6가지를 확인한다. 3. 그 숫자를 가지고 로또점에가서 로또를 산다. 4. 부자가 된다. See the Pen ZEOrNBP by ukcasso (@ukcasso) on CodePen. 지난 토이 프로젝트에서 로또 번호 추첨기를 만들어 봤다. 로또 번호 추첨기는 너무 간단한 느낌이여서 기능을 더 추가하여 로또 번호 분석기를 만들었다. 로또 번호를 입력한 수에 맞게 생성하고 생성한 로또 번호의 해당 번호마다 얼마나 많이 도출되었는지 그래프로 나타내고 많이 가장 많이 나온 6가지 번호를 추출하여 추천 번호까지 만들어주는 프로그램이다. 1. 6가지 로또 번호를 추첨해주는 코드이다. function anal..
[자바스크립트] 로또 번호 추첨기 (Lotto Raffle) 이번 토이 프로젝트는 로또 번호 추첨기이다. 부자가 되는 가장 확률이 없지만 빠른 길은 로또라고 생각한다. 그래서 한번 만들어 보았다. 로또 번호 추첨기는 만드는데 필요한 몇 가지 포인트들이 있다. 아래 소스 코드를 보면서 살펴보자. 1. 무작위 번호를 뽑는 로직이다. 여기서 중요한 점은 중복된 수가 들어가서는 안된다는 것이다. 중복되는 수를 없애고자 includes 메서드를 활용하였다. temp안에 1부터 45까지의 무작위 수를 넣은 후 if문을 이용하여 lotto라는 배열 안에 무작위 수 temp가 들어있으면 아무런 일을 하지 않고 temp가 없다면 push 메서드를 통해 lotto안에 넣는다. while문을 이용하여 조건을 lotto의 length가 6 아래일 때까지 돌려서 마지막에 6번째가 들어가..
[CSS] 구글 검색창 따라만들기(Gukgle 구욱글) with Bootstrap 구글 검색창을 따라해보려고 한다. 먼저 소스 코드이다. Gukgle 코드에서 분석할 4가지 1. 우선 부트스트랩에 접속하여 link태그를 head태그 안에 넣어준다. 2. 부모 tag 자식 tag:nth-child(요소 번호)는 부모 태그 내의 자식 태그의 몇 번째 요소인 자식 태그를 바꿔줄 수 있는 코드이다. 3. 구글 검색창의 각 색은 각종 툴의 스포이드 기능을 이용해서 추출한다. 4. input태그의 위치는 부트스트랩에서 class요소로 넣었다. 정말 손쉽다. 5. form 태그의 action은 어디를 향할 것인지 정하는 것이고 method는 데이터 전송 방식을 나타낸다. 그리고 input 태그의 name q는 q로 시작하는 것을 말해준다. 구글에 검색을 해보면 주소창에 google.com/sear..
[자바스크립트] 작은 도서관 프로그램 만들기 (쿠키, 로컬, 세션 스토리지의 개념 포함) - Localstorage crud example 회사에서 내준 작은 프로젝트 과제이다. 힘들었던 부분은 외부 라이브러리를 일절 사용하지 않아야 한다는 점이었다. 아래는 개발 제약 사항과 화면 요구 사항이다. // 개발 제약 사항 // 책의 추가, 수정, 삭제, 조회(검색)이 모두 가능하여야 함. // 페이지는 단일 페이지로만 만들 것 (화면 요구사항의 화면 구성을 철저히 따를 것) // 외부 라이브러리 일체(jQuery, bootstrap 등 포함)를 사용하지 않을 것 // index.html과 library.js 파일만 사용할 것 // 자료는 localStorage에 저장해서 새로고침 해도 유지할 것 // 검색시 검색 조건은 제목 검색, 내용 검색, 저자 검색, 날짜 범위 검색 까지로 함 // 검색 혹은 어떤 액션시 새로고침 되는게 아니고 그 자리에..

티스토리툴바