본문 바로가기

전체 글

 (143)
node.js 웹서버 프로젝트 실시간 데이터 dashboard 만들기 3(ejs & Ajax) ejs? ejs란 Embedded JavaScript의 약자로 쉽게 말하자면 자바스크립트가 내장 되어 있는 html 파일을 의미한다 html 에서 코딩을 해본 사람들은 알겠지만 html 문서 자체에서도 javascript 문장은 를 통해 삽입이 가능합니다. 그렇지만 내장되어 있다는 것과 분리가 되어 있다는 것은 다른 의미이다 ejs에서는 자바스크립트를 내장시킬 수 있는 두가지의 테그가 있습니다. 테그가 가장기본이 되며 저 테크 사이에 원하는 자바스크립트 내용을 넣으면 된는데, 해당코드를 통해 정적은 문서에서 동적으로 처리를 해야하는 부분에 대한 편의성이 높아지고 서버에서 보낸 변수를 그대로 가져와서 사용할 수 있다는 것에서 유연한 코드 작성이 가능합니다. JSP 에서 자바 테그를 삽입 할 수 있은 것과 ..
node.js 웹서버 프로젝트 실시간 데이터 dashboard 만들기 2(express 모듈) web에서 사용하는 모듈 http 모듈로 웹 서버를 생성하면 일을 직접 처리해야 하므로 기존에 서버 생성 개념에 익숙하지 않다면 어렵습니다. 이런 상황에서 http 모듈에 여러가지 기능을 추가해 여러 기능을 쉽게 사용할 수 있도록 만든 모듈을 express모듈이라 합니다 아래는 node.js 웹 개발에서 많이 사용하는 각각의 모듈에 대한 간단한 description입니다. 개념 설명 express 모듈 http 모듈처럼 사용할 수 있지만 더 많은 기능을 내장한 내부 모듈 미들웨어 expres 모듈 user() 메서드의 매개변수에 입력하는 함수를 의미 router 페이지 라우팅을 지원하는 미들웨어 static 지정한 폴더에 있는 내용을 모두 웹서버 루트 폴더에 올릴떄 사용 cookie patser 용청한 ..
node.js 웹서버 프로젝트 실시간 데이터 dashboard 만들기 1(Bootstrap4) Bootstrap4 웹 페이지의 개발이 진행 될 때 트위터에서 사용하는 각종 레이아웃, 버튼 , 입력창 등의 디자인을 css와 javascript를 통해 만들어 놓은 것입니다. 웹 디자이너나 개발자 사이에서는 웹 디자인의 혁명이라고 불릴 정도로 반응이 좋은 프레임워크입니다. BootStrap을 간혹 어떤 언어 혹은, 프로임워크 등으로 오해하는 경우들이 있는데 간단하게 설명하자면 우리가 파워포인트 발표 차료를 만들 때 ppt를 물론 자신이 직접 디자인해서 사용하는 경우도 있지만, 남이 만들어 놓은 템플릿을 가져다 ppt 제작시간을 줄이고 원하는 디자인을 적용하듯 일종의 WEB 템플릿이라고 생각하면 됩니다. 글자, 인용문, 목록, 표, 입력폼, 버튼, 이미지 등의 자잘한 것 뿐만이 아니라 드롭다운, 메뉴, ..
node.js & npm 노드 JS WEB의 초창기 시작은 정적인 체계였습니다. 단순히 웹이라는 것은 조회 즉 읽는 기능만을 제공했습니다. 하지만 nescape 라는 웹브라우저가 등장하고 javascript를 통해 웹에 동적인 체계를 탑제하게 되면서 사용자와 상호작용이 가능해 지게 되면서 지금의 동적인 WEB이라는 것이 생겨났습니다. 그렇지만 javascript는 반대로 말해 web 브라우저라는 울타리에 갇힌 언어라고 볼 수 있었고 성능의 한계 떄문에 frot-end 엔지니어 들에게만 사용되는 언어라 여겨 졌지만 2009년 자바스크립트 언어로 구성된 서버 사이드 언어 Node.Js가 개발이 되면서 2008년 구글 개발자들이 chrome의 성능향상을 위해 javascript engine v8을 개발하면서 javascript를 통해..
pm2 pm2? pm2 는 javascript 런타임 노드js의 프로세스 관리자입니다. pm2는 개발자가 node.js 응용 프로그램을 관리하도록 돕는 오픈 소스 프로덕션 프로세스 관리자라고 볼 수 있습니다. 대표적인 기능으로는 자동 애플리케이션 로드 밸런싱, 어플리케이션 구성 배치 시 모니터링 등이 있습니다. 위와 같이 start [실행하고자 하는 js 파일] 을입력하면 pm2를 통해 자바스크립트 파일을 pm2 에서 동작시킬 수 있게됩니다. 위와 같이 pm2 start [실행하고자 하는 js 파일] --watch를 입력하면 해당 자바스크립트 파일의 모니터링이 가능하다 위와 같이 pm2 list를 입력하면 현제 실행중인 프로세스들에 대한 조회가 가능하다
csv 파일 데이터 셋 받아오기 및 시각화 csv? csv 는 몇가지 필드를 쉼표(,)로 구분한 텍스트 데이터 및 텍스트 파일이며 확장자는 .csv입니다 쉼표로 필드를 구분하기 때문에 데이터베이서 칼럼을 구별하는 식별자로 사용할 수 있어 데이터베이스에서 많이 사용됩니다. 데이터 공공포털 같은 사이트에서 데이터셋을 csv파일로 가져와 확인 할 수 있습니다. https://www.data.go.kr/ 공공데이터포털 국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Dataset)와 Open API로 제공하는 사이트입니다. www.data.go.kr Dataset 가져오기 해당 사이트에 접속을 해 필요한 데이터셋을 검색하..
pandas를 이용한 데이터 시각화 pandas? pandas 파이썬에서 사용하는 데이터분석 라이브러리로 행과 열로 이루어진 데이터 객체를 만들어 다를 수 있고 안정적으로 데이터를 처리하는데 편리한 모듈입니다. 우리가 크롤링을 통해 데이터를 얻었다면 이것을 눈으로 시각화 할 수 있는 것도 중요합니다. 이에는 많은 방법이 있을 수 있겠지만 해당 포스트에서는 pandas를 통한 시각화를 알아보겠습니다. pandas는 해당 명령어를 통해 설치가 가능합니다. pip install pandas pandas 모듈의 여러 내장함수를 사용 하면 data 프레임을 정의할 때 또는 데이터를 시각화 하여 나타낼 떄 효울적으로 사용할 수 있습니다. ex) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 import pandas as pd import..
selenium(셀레늄) selenium(셀레늄)? selenium 은 웹을 테스트 하는데 사용하는 프레임워크로 webdriver라는 API를 통해 운영체제의 설치된 chrome 브라우저를 제어합니다. 즉 브라우저를 직접 동작시칼 수 있기 때문에 JavaScript를 이용해 비동기적으로 혹은 뒤늦게 불러와 지는 컨텐츠를 가져올 수 있습니다. 우리가 앞서 진행했던 크롤링은 동적인 HTML 이나 network 분석을 통해 전달되는 JSON 데이터를 parsing한 크롤링 이였습니다. 물론 개발자들이 많이 사용하는 API들이나 공공데이터 포털등에서는 이러한 자료를 쉽게 구할 수 있지만 그 외 동적으로 구조가 바뀌는 사이트나 정적 사이트가 아닐경우의 크롤링은 제한적인 요소를 많이 포합합니다. 이에 selenuim은 해답을 제시합니다. ..

티스토리툴바