IT
ISSUE14 :: AXIOS(vue.js, node.js-bigQuery) CORS 해결방법
ISSUE14 :: AXIOS(vue.js, node.js-bigQuery) CORS 해결방법
2020.08.26ㅡ. 도입 google bigQuery 데이터를 node.js에서 fetch해서 vue.js 로 데이터를 뿌려주는 워크플로우 ㅡ. 문제 CORS 문제 node.js에서 express 를 사용하고 있었기 때문에 아래와 같이 cors 패키지를 설치했음에도 $ npm install --save cors const cors = require('cors'); //app.js app.use(cors()); //app.js Same-origin policy 라는 에러를 뿜어냈습니다. 호스트는 ip + port 를 의미하는데, port 가 달라지면서 (vue.js:8090, node.js:3000) 동일 호스트에서 호출받는 정책이 깨지면서 에러가 발생하였습니다. 즉, 호스트와 오리진이 서로 다른것입니다. 여기서 의미하..
SQLD02 :: 동적SQL
SQLD02 :: 동적SQL
2020.08.26ㅡ. 동적쿼리 실행시에 쿼리문장이 생성되는것을 의미합니다. 문자열로 쿼리문을 들고있다가 실행할 때마다 문자열 쿼리 문장을 바꿔서 실행하는 방식을 의미합니다. ㅡ. 사용 컴파일 시에 SQL문장을 실행시킬 경우, 보통은 쿼리문에서 WHERE절에 조건으로 인자를 전달하게 됩니다. ㅡ. 예제 const query = "SELECT * FROM `fluid-crane-284202.prototyping_dataset.category_basic` WHERE category="+"'"+category+"'"; 위 코드는 bigQuery table에 접근해서 함수의 인자로 전달되는 값들을 동적으로 처리할 때 사용하는 SQL문장입니다.
IT07 :: 프록시 서버란?
IT07 :: 프록시 서버란?
2020.08.26금일 vue.js 상에서 google cloud bigQuery SDK 를 바로 사용하려 했었는데 잘안되서 서버를 하나 더 두었습니다.. 그런데 그게 proxy 서버가 아니냐는 되물음에 proxy 서버가 뭐였나 생각이 들어 정리해봅니다. ㅡ. proxy 서버 프록시 서버란, 컴퓨터 네트워크에서 다른 서버 상의 자우너을 찾는 클라이언트 요청을 받아 중계하는 서버를 말한다고 합니다. proxy 서버 = 중계하는 서버 입니다. proxy서버는 웹 프록시를 의미한다고 합니다. 특히, 분산 시스템의 구조를 단순화 하는데 이점이 있다고 합니다. 클라이언트가 서버로부터 필요한 파일, 웹 페이지 등과 같은 자원을 프록시 서버에 요청하면 프록시 서버가 클라이언트와 사이에서 통신을 수행한다고 합니다. 추가적으로 보안기능을..
node.js restful api 서버 만들기 (with bigQuery)
node.js restful api 서버 만들기 (with bigQuery)
2020.08.25GET : 서버 자원 가져오기 POST : 서버 자원 등록하기 PUT : 서버 자원 치환 (업데이트 같은...) PATCH : 서버 자원 일부 치환 DELETE : 서버 자원 삭제 ㅡ. Express 서버 $ sudo npm i express-generator -g express PROJECT_NAME --view=pug cd PROJECT_NAME 후 npm i 로 모듈 설치를 진행합니다. 모듈 설치가 완료되면 ㅡ. app.js app.js 에서 app.use('/users', usersRouter) 부분이 localhost:3000/users 로 접속하면 usersRouter 의 페이지를 띄워주게 됩니다. users.js 코드를 아래와 같이 구성한다면 var express = require('expr..
JS04 :: webpack
JS04 :: webpack
2020.08.25Vue.js 와 같이 애플리케이션을 CLI로 사용하여 프로젝트 생성하면 자연스럽게 설치되는 모듈 번들러 입니다. ㅡ. 모듈 번들러란? 여러개의 파일을 하나의 파일로 묶어주는 라이브러리를 말합니다. 종속성을 파악해서 서로 엮어 있는 파일을 하나의 파일로 묶어주는 역할을 수행합니다. ㅡ. webpack을 사용하는 이유 1. 네트워크 병목현상 해결 2. 모듈 단위로 개발 가능 3. es6 버전 이상의 스크립트를 사용할 수 있습니다. ㅡ. 오래된 브라우저에서도 es6버전 이상의 자바스크립트 문법 사용이 가능해집니다. ㅡ. webpack 컨셉 1. Entry ㅡ. 종속성 그래프의 시작점을 의미합니다. 2. Output ㅡ. 번들을 저장할 위치를 지정할 수 있습니다. 3. Loader ㅡ. webpack이 이해할 ..
JS03 :: node.js 버전 관리
JS03 :: node.js 버전 관리
2020.08.25n 은 Node.js 버전을 관리해주는 플러그인입니다. $node -v 우선적으로 node 버전을 확인합니다. $ sudo npm install -g n n모듈을 설치합니다. node버전에 따라서 다음 3가지로 분류합니다. 1. 최신버전, 2. 안정버전, 3.LTS버전 1. 최신버전 $ n latest 2. 안정버전 $ n stable 3. LTS버전 $ n lts
GCP26 :: DNS 등록하기, Google Cloud Platform
GCP26 :: DNS 등록하기, Google Cloud Platform
2020.08.24개요 해당 포스팅에서는 AWS 에서 구매한 도메인을 서버와 연결하여 도메인으로 애플리케이션에 접속하는 과정을 보여 줍니다. 서버는 Google Cloud Platform의 VM 인스턴스에 Web Application을 배포한 상태입니다. 보통의 경우 http://외부IP:Port 로 접근할 수 있지만, 이 경우 보안에 취약할 수 있기 때문에 DNS를 등록하여 사용하도록 하겠습니다. AWS 사전에 미리 구입해둔 도메인에 정보를 확인합니다. https://cloud.google.com/dns/docs/quickstart?hl=ko 확인하고시작했습니다. Google DNS Google Cloud Platform에서 DNS 영역을 생성할 수 있습니다. 구입한 도메인을 사전에 배포한 Web Application으..
ISSUE13 :: Load Balancer 에러 처리하기
ISSUE13 :: Load Balancer 에러 처리하기
2020.08.24netstat -tnlp #현재 열려있는 포트를 모두 확인할 수 있습니다. 외부로 통하는 80포트가 열려있지 않았습니다. 그래서 sudo iptables -I INPUT 1 -p tcp --dport 80 -j ACCEPT 위 명령어를 실행해줘도, 80번 포트를 열리지 않았습니다. apache --version 실행보니까 No command 'apache' found, did you mean: 또, apache2 --version The program 'apache2' is currently not installed. 여서 sudo apt-get install apache2 여서 우선 apache2를 설치했습니다.
GCP25 :: dataflow 코드 작성하기 3
GCP25 :: dataflow 코드 작성하기 3
2020.08.24batch 처리에 대한 apache-beam 코드 수행으로 마지막입니다. 1,2 와 크게 다르지 않은 형태이지만 example 수준에서 봐주시면 감사하겠습니다. 2020/08/24 - [Cloud] - dataflow 코드작성하기 2020/08/24 - [Cloud/Cloud.Dataflow] - dataflow 코드 작성하기 2 #apache_beam from apache_beam.options.pipeline_options import PipelineOptions import apache_beam as beam pipeline_options = PipelineOptions( project='project-id', runner='dataflow', temp_location='bucket-location..
GCP24 :: dataflow 코드 작성하기 2
GCP24 :: dataflow 코드 작성하기 2
2020.08.24이전과 비슷한 로직으로 코드를 작성하겠습니다. 다만 조금 더 다양한 Apache-beam 함수를 써서 파이프라인을 구축해보겠습니다. 기본 셋팅은 이전 포스팅을 참고해주세요! 2020/08/24 - [Cloud] - dataflow 코드작성하기 Local환경에서 테스팅 하기 위해서 기본 Data Set을 생성하였습니다. with beam.Pipeline() as pipeline: results = ( pipeline | 'Gardening plants' >> beam.Create([ 'Iot,c c++ python,2015', 'Web,java spring,2016', 'Iot,c c++ spring,2017', 'Iot,c c++ spring,2017', ]) 이 데이터 셋을 가지고 트랜스폼 할것은 어떤..
GCP23 :: dataflow 코드작성하기
GCP23 :: dataflow 코드작성하기
2020.08.24위와 같은 데이터가 있습니다. react 안에서 feature 별 횟수를 묶을 생각입니다. from apache_beam.options.pipeline_options import PipelineOptions import apache_beam as beam 파이프 라인 환경설정을 구성하기 위해서 PipelineOptions 를 사용합니다. pipeline_options = PipelineOptions( project=[project-id], runner='dataflow', temp_location=[bucket-location] ) 기본 설정들을 셋팅 합니다. python 으로 코드를 작성하였습니다. main function 을 pcollection_dofn_methods_basic 으로 만들었습니다. ..
Vue.js01 :: vuetify, chip
Vue.js01 :: vuetify, chip
2020.08.24기존 코드를 위와같이 작성하였는데, chip 을 넣어서 작성하고 싶었다. 그래서 우선 테스트 파일을 작성하였고 내 프로젝트에서 사용할 카테고리는 Web, Iot, Cloud, Data, Server, Client, App, Firmware, AI, Network, BlockChain, Game, DB, security 이다. Vuetify 참고했다. https://vuetifyjs.com/ko/components/chips/ https://vuetifyjs.com/ko/components/combobox/ ㅡ. Template 카테고리 종류 Web Iot Cloud Data Server Client App Firmmware AI Network BlockChain Game DB security ㅡ. Jav..