본문 바로가기

자바스크립트

 (50)
[자바스크립트] 네이버 검색광고 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를 이용한 사용방법이 자세히 나와있지만 네이버 검색..
[자바스크립트 ] 매크로 만들기 - puppeteer (간단한 자동 로그인) 보통 매크로나 웹 크롤링은 python으로 많이들 만든다는 것을 알고 있었다. 하지만 자바스크립트로도 가능하다고 하여 이번 프로젝트는 웹 매크로 만들어보려고 한다. *매크로 사용으로 인한 불이익은 어떠한 경우에도 책임지지 않습니다. 우선 npm을 이용하여 puppeteer를 자신의 프로젝트 폴더에서 다운로드 한다. npm install puppeteer 이후 자신의 .js 파일을 만들어 코드를 넣는데 저는 index.js로 만들었습니다. 자세한 설명은 주석을 달아놓았습니다. const puppeteer = require('puppeteer'); const sanitizeHtml = require('sanitize-html'); (async () => { // launch 메서드는 chrome을 실행시킴...
[자바스크립트] 작은 도서관 프로그램 만들기 (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..
[React] (1) React란 무엇인가, React 개발 환경 조성 이번 카테고리에서는 React라는 것이 무엇인지 알아보고 React개발 환경 조성과 사용방법을 차례대로 포스팅할 예정이다. React란? 간단하게 정의해서 프론트엔드 라이브러리이다. Angular, Vue.js와 같은 역할을 한다고 보면 된다. React는 페이스북에서 제공하고있다. 그리고 React로 만든 웹사이트는 html 태그가 있지만 내용물은 다른 저장소에 있어서 사용자들에게는 소스코드를 보이지 않게 할 수도있다. React는 기본적으로 Component기반이다. 이 뜻는 각 Component를 만들어 놓고 조립하듯 웹 페이지를 구성할 수 있다는 뜻인데 포스팅 뒤로 가면 그 뜻을 이해할 수 있을 것이다. React 개발 환경 조성 1. Node.js 설치 우선 node.js는 기본적으로 설치되어 ..
[자바스크립트] 작은 도서관 프로그램 만들기 (MySQL, Express, ejs, Node.js) - Mysql, express, ejs crud example 2020/09/03 - [토이 프로젝트] - [자바스크립트] 작은 도서관 프로그램 만들기 (쿠키, 로컬, 세션 스토리지의 개념 포함) [자바스크립트] 작은 도서관 프로그램 만들기 (쿠키, 로컬, 세션 스토리지의 개념 포함) 회사에서 내준 작은 프로젝트 과제이다. 힘들었던 부분은 외부 라이브러리를 일절 사용하지 않아야 한다는 점이었다. 아래는 개발 제약 사항과 화면 요구 사항이다. // 개발 제약 사항 // 책의 추 ukcasso.tistory.com 지난번에 만들었던 작은 도서관 프로그램이다. 그 당시에는 LocalStorage라는 것을 이용해 데이터를 해당 ip주소에 맞게 저장하는 개념을 사용하였다. 하지만 이번에는 조금더 제대로 된 사이트를 만들어보고자 MySQL과 ejs그리고 Node.js를 활용하..
[MySQL] 관계형 데이터베이스 왜 관계형 데이터베이스가 필요한가. 중복이 되면 개선할 것이 있다고 본다. 그래서 중복 가능이 있는 데이터를 테이블로 다시 만들어서 관리한다. 그럼 유지 보수할 때에 만들어 놓은 테이블을 바꾸면 다 바뀐다. MySQL은 데이터를 분산해서 저장하고 보여줄 땐 합쳐서 보여준다. 우선, 만들어놨던 테이블은 이름을 바꿔준다. RENAME TABLE 테이블명 TO 바꿀이름; 1. 테이블 분리하기 CREATE TABLE article ( `id` int(11) NOT NULL AUTO_INCREMENT, `title` varchar(30) NOT NULL, `description` text, `created` datetime NOT NULL, `author_id` int(11) DEFAULT NULL, PRIMAR..
[자바스크립트] 로또 번호 분석기 (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번째가 들어가..
[프로그래머스] 위장 - 자바스크립트 문제 설명 문제 풀이 function solution(clothes) { let clothesType = []; let uniqueClothesType = []; let temp = []; let temptemp = []; // clothesType에 옷 각 옷의 종류만 넣어준다. clothes.forEach(function(element) { clothesType.push(element[1]) }); // 옷 종류의 중복 값을 제거해준다. uniqueClothesType = Array.from(new Set(clothesType)); // 중복 값을 제거한 옷 종류와 제거하지 않은 옷 종류를 대조하여 temp에 값을 넣어 준다. for(let i = 0; i a * b) - 1; } 경우의 수를 보는 ..
[프로그래머스] 기능개발 - 자바스크립트 문제 설명 문제풀이 1. 내가 분 문제 풀이다. 설명은 주석으로 남겨 놓았다. function solution(progresses, speeds) { let answer = []; let finalCount = []; // 배열 answer에 남은 기간을 나타내는 값을 넣어준다. for(let i = 0; i = 100) { answer.push(j); } j++; } } // 남은 기간 answer 배열을 이용하여 뒷 부분에 값을 보고 temp에 개수를 체크해주는 로직이다. let temp = 1; let prev = answer[0]; for(let i = 1; i = curr) { temp += 1;..
[JavaScript] Quick Sort(퀵 정렬) Quick Sort(퀵 정렬)의 개념 Quick Sort(퀵 정렬) 구현 소스 코드 function quickSort(arr) { // arr의 요소가 하나이면 arr 자체를 그대로 반환 if(arr.length ..
[자바스크립트] 작은 도서관 프로그램 만들기 (쿠키, 로컬, 세션 스토리지의 개념 포함) - Localstorage crud example 회사에서 내준 작은 프로젝트 과제이다. 힘들었던 부분은 외부 라이브러리를 일절 사용하지 않아야 한다는 점이었다. 아래는 개발 제약 사항과 화면 요구 사항이다. // 개발 제약 사항 // 책의 추가, 수정, 삭제, 조회(검색)이 모두 가능하여야 함. // 페이지는 단일 페이지로만 만들 것 (화면 요구사항의 화면 구성을 철저히 따를 것) // 외부 라이브러리 일체(jQuery, bootstrap 등 포함)를 사용하지 않을 것 // index.html과 library.js 파일만 사용할 것 // 자료는 localStorage에 저장해서 새로고침 해도 유지할 것 // 검색시 검색 조건은 제목 검색, 내용 검색, 저자 검색, 날짜 범위 검색 까지로 함 // 검색 혹은 어떤 액션시 새로고침 되는게 아니고 그 자리에..

티스토리툴바