잡다구리

❕이 글을 통해... CRUD : Create Read Update Delete CRUD 쿼리를 예제를 이해하고 사용할 수 있다. 쿼리의 다양한 조건(WHERE)과 정렬를 이해하고 사용할 수 있다. ❔주석 실행되지는 않으며, 설명을 작성하는 글 -- 앞에 '--'를 붙이면 뒤에 쓰는 글자는 인식하지 않습니다. ❔대소문자 구분 SQL은 대소문자를 구분하지 않습니다. 아무거나 사용해도 됩니다. 이 글에서는 가시성을 혼합했지만 구분 안 하고 사용해도 됩니다. 🚀기본 CRUD 쿼리 예제를 통해 기본 CRUD 쿼리인 Insert, Select, Update, Delete에 대해 알아보자. CREATE, INSERT ➡ 추가 (CRUD의 Create) DB 생성 -- 포맷: CREATE DATABASE [Datab..

이 글은 기본적으로 HTML/CSS/Javascript의 기본은 알고 있다는 전제하에 작성되어 있습니다. 잘은 몰라도 되지만 어느 정도 기본 개념은 알고는 있어야 이해하기 쉽습니다. 💾node js 설치 React를 사용하기 위해서는 npm이 필요하다. npm을 설치하기 위해 node.js 공식 홈페이지(nodejs.org)에 접속해서 설치 파일을 받아주자. LTS가 붙어 있는 버전과 Current 버전이 있는데 특별한 목적이 있지 않는 한 둘 중 아무거나 받아준다. (LTS는 안정적인 버전이고 Current는 가장 최신 버전이지만 LTS에 비해 안정적이진 않다.) IDE 설치 통합 개발 환경(Integrated Development Environment, IDE)의 뜻으로 개발 시 사용되는 툴을 말한다..

👓크롤링한 데이터 시각화 이번 글은 크롤링 기능 자체랑은 연관이 없지만 하면 좋은 데이터 시각화 만들기이다. 크롤링해서 얻은 데이터도 좋지만, 이를 시각화하는 게 사용자에게 내용을 전달하고자 할 때 효과가 좋다. 시각화를 위해서 d3-cloud 라이브러리를 사용할 것이다. 시각화 라이브러리 d3-cloud : https://github.com/jasondavies/d3-cloud 🛠데이터 가공(포맷 수정) d3-cloud 라이브러리에 데이터를 넣기 위해 csv 형식으로 데이터를 가공해줄 것이다. 이전 글에서는 최종 데이터를 Object형식의 문자열로 저장했다. 이 데이터들을 csv형식에 맞게 바꿔주자. const fs = require('fs'); const path = require('path'); c..

📢이 글에서 구현할 내용 우리는 먼저 특정 URL을 Seed(시작 위치)로 입력받는다. 해당 URL의 HTML을 긁어온다. 긁어온 페이지에 있는 URL들을 수집한다.(URL은 중복 제거한다.) 깊이 우선 탐색 또는 넓이 우선 탐색 방법으로 "2."와 "3."을 반복한다. 시작 위치와 연관되지 않는다고 판단되면 더는 진행하지 않는다. 기어 다니는(크롤링) 행위를 다하고 나서 정리한 URL 테이블을 하나씩 방문해서 HTML 정보를 받아온다. 형태소 분석기를 사용해서 HTML에서 단어들을 추출하여 정리한다. 위 순서는 "웹 크롤러 만들기 0"에서 정리한 내용이다. 파란색으로 칠한 부분을 이번 글에서 구현해보자. 🎤형태소 분석(mecab-ya) mecab은 리눅스, 맥 환경에서는 문제없이 설치/사용할 수 있지만..

📢이 글에서 구현할 내용 우리는 먼저 특정 URL을 Seed(시작 위치)로 입력받는다. 해당 URL의 HTML을 긁어온다. 긁어온 페이지에 있는 URL들을 수집한다.(URL은 중복 제거한다.) 깊이 우선 탐색 또는 넓이 우선 탐색 방법으로 "2."와 "3."을 반복한다. 시작 위치와 연관되지 않는다고 판단되면 더는 진행하지 않는다. 기어 다니는(크롤링) 행위를 다하고 나서 정리한 URL 테이블을 하나씩 방문해서 HTML 정보를 받아온다. 형태소 분석기를 사용해서 HTML에서 단어들을 추출하여 정리한다. 위 순서는 "웹 크롤러 만들기 0"에서 정리한 내용이다. 파란색으로 칠한 부분을 이번 글에서 구현해보자. 🧨프로젝트 초기 생성 $ mkdir crawler $ cd crawler $ npm init 모듈 ..

🕸웹 크롤러란? 만들기 전에 무엇을 만들지 알고 가기 위해서 의미에 대해서 먼저 정리를 해보자. 흔히들 크롤러(Crawler), 스크래퍼(Scraper), 파서(Parser) 3가지에 대해서 다르게 의미 생각하고 이야기하는 경우가 있다. 사전적인 의미로만 간단히 생각해보면 무엇을 하는지 유추할 수 있다. Crawl : 기어가다. Scrape : 긁어내다. Parse : 분석하다. 크롤러는 웹을 기어 다니는 놈, 웹 페이지를 스크래퍼는 긁어 오는 놈, 파서는 웹 페이지를 분석하는 놈을 의미 한다. 하지만 웹 크롤러는 단순히 기어 다니는 행위만 하는 프로그램을 말하는 건 아니고, 웹을 돌아다니면서 웹 페이지(html/css/js)를 긁어오고 거기에 무슨 내용들이 있는지 분석을 하는 놈을 의미한다. 스크래퍼와..

📝코드설명 파일로 저장 및 읽기 위해 fs 모듈을 사용했고, 윈도우 또는 리눅스에서 모두 경로 구분 토큰('/', '\')이 자동으로 구분 되도록 path 모듈을 사용했다. fs 모듈의 함수는 모두 동기 방식으로 동작하도록 ~Sync 함수들을 사용했으며, 저장하려는 파일의 경로 폴더들이 있는지 existsSync함수로 확인하고 없다면 생성 되도록 mkdirSync함수에 {recursive:true} 옵션을 줬다. 저장할때는 객체 또는 배열이 문자열로 변환되서 저장하도록 JSON.stringfy 함수를 사용했으며, 반대로 읽을때는 저장한 문자열을 다시 JSON 형태로 변경 되도록 JSON.parse 함수를 사용했다. const fs = require('fs'); const path = require('pa..

🎓윈도우 터미널에서 eslint 명령어 사용시 에러 발생하는 경우 npx 명령어를 사용하자 $ npx eslint --init

🎈includes 배열이 특정 element를 포함하고 있는지 판별한다. return 값은 있으면 true, 없으면 false를 반환 한다. const arr = [1, 2, 3, 4, 5]; console.log(arr.includes(3));// true console.log(arr.includes(10));// false const startIndex = 6; console.log(arr.includes(3, startIndex));// false (시작위치를 정할 수 있다.) 🎈indexOf 특정 element를 첫번째 인덱스 값을 return한다. 존재하지 않으면 -1을 return 한다. const arr = [1, 2, 3, 4, 5]; console.log(arr.indexOf(3));//..

💡목표 자바스크립트에는 반복문을 사용하기 위한 방법이 여러가지가 있다. 사용방법을 예시 코드를 보며 이해해보자. 각 특징을 이해하고, 어느 상황에 사용하는지에 대해서 알아보자. 🎈일반 for loop 일반적인 반복문 방법으로 단순하고 속도가 가장 빠르다. const arr = [1, 2, 3]; for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } 🎈for in object의 key의 이름을 알 수 있으며, object같이 index로 되어 있지 않아 일반 반복문을 사용할 수 없을때 key의 이름을 이용하여 사용한다. let obj = { name: "이름", age: 10, address: "서울" }; for (let key in obj) { ..