머리가 나뻐서 삽질 SAP(Study And Programming)

01. openshift 기본개념 - Docker + kubernetes : Paas ( Platform as a Service ) - 오픈시프트 v3 기준 개발 타깃은 웹 어플리케이션이 주요 타겟 - 개발소스 github 올리면 빌드, 배포를 자동화 해준다. - 빌드하는 플랫폼은 톰캣, 프레임워크 등이 될 수 있다 [ 결론 : 개발자가 개발만 하면 운영환경에 알아서 적용된다. ] 내용 참조 : http://blog.naver.com/PostView.nhn?blogId=alice_k106&logNo=220676501669&parentCategoryNo=7&categoryNo=&viewDate=&isShowPopularPosts=true&from=search

vue-axiosA small wrapper for integrating axios to VuejsHow to install:CommonJS:npm install --save axios vue-axios And in your entry file:import Vue from 'vue' import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios) Script:Just add 3 scripts in order: vue, axios and vue-axios to your document.Usage:This wrapper bind axios to Vue or this if you're using single file comp..

vue-lodashA small wrapper for integrating lodash to Vuejs (Inspired by vue-axios plugin by imcvampire)When to use it and when not to:Use it when using lodash extensively in lots of file.Don't use it if just want some simple functions from lodash. (My recommendation is to install individual small function from lodash.)For vue-lodash 2.xnpm install --save vue-lodash And in your entry file:import V..

node-sass Installnpm install node-sass Command Line InterfaceThe interface for command-line usage is fairly simplistic at this stage, as seen in the following usage section.Output will be sent to stdout if the --output flag is omitted.Usagenode-sass [options] [output] Or: cat | node-sass > outputExample:node-sass src/style.scss dest/style.cssOptions: -w, --watch Watch a directory or file -r, --r..

concat 설치npm i concat UsageUsage: concat [options] concatenate multiple files Options: -h, --help output usage information -V, --version output the version number -o, --output output fileexamples:concat -o output.css ./1.css ./2.css ./3.cssYou can also use it from node:const concat = require('concat'); concat([file1, file2, file3]).then(result => console.log(result)) // orconcat([file1, file2, f..

API 규격 Query String http://www.fems.mbz.kr:80/fems.php?api=1&func=GetFailSummary&rqCOMPANY_ID=1&rqDSID=all&rqIsOpen=all&rqFromYMD=2017-02-24&rqFromHMS=01:10:00&rqToYMD=2017-04-25&rqToHMS=22:10:00&api_debug=1 Input Name Value parameter comment [GET] api 1 [GET] func GetFailSummary [GET] rqCOMPANY_ID 1 [GET] rqDSID all [GET] rqIsOpen all [GET] rqFromYMD 2017-02-24 [GET] rqFromHMS 01:10:00 [GET] rq..

09. php 와 작업 포스팅 작성중.... > parcel index.html 으로 번들링하면 ;;;;; 그러므로 번들링 이후에 dist 폴더에서 php 작업해야 하는데, 문제는 php 소스가dist에만 붙여서 작업할수 있는것도 아니고.. 결국엔 번들링 전의 php소스를dist>index.html 으로 가서 php 구문을 수동으로 옮겨 심어야 한다. 장점 : scss 를 css로 바로 사용가능 의문 : concat은 어차피 parcel 과 상관없이 파일을 하나로 합쳐줄꺼고.. scss 사용하려고 번들링 하는거 매우 번거로워 보인다.. 추가로, vuejs 까지 사용할때 번들링 된거 dist > index.html 에서 php 작업해야 하나?... --- 여기까지 테스트 완료

08. concat 으로 파일 합치기 - parcel의 build 명령어를 통해서 minify 는 지원하는데 - 파일을 하나로 합쳐주지는 않으므로 - concat 을 설치하여 사용해보자 01. 설치 npm install -g concat 02. index.html 파일에 concat 결과물로 연결해 놓기 - src 내용에 미리 './src/concat.js' 를 기입해놓고.. 03. 분할되어있는 js 파일들 src/concat_1.js src/concat_2.js src/concat_3.js 준비 - 아래와 같이 각각의 js파일을 만들어보자 src/concat_1.jsconsole.log('concat_1'); src/concat_2.jsconsole.log('concat_2'); src/concat_3..

07. scss 연동하기 - PostCSS 설치한다 : plugin 사용하여 css 변환 도구, autoprefixer, cssnext, CSS Modules 와 비슷- SCSS 설치한다 : preprocessor 로 LESS, SASS, Stylus 와 같은 컴파일 to CSS 중 SCSS 사용. 01. postcss, scss 설치 npm install postcss-modules --save-devnpm install -g node-sass 02. .postcssrc 파일 셋팅 - .postcssrc 파일 만들고 아래와 같이 입력{ "modules": true, } 03. styles.scss 파일 만들고 내용작성 - styles.scss - App.vue 04. 실행 05. 만약 vuejs 가 아..

06. vuejs 사용해보기 - 아래와 같이 파일 구성해서 vuejs 사용해보자- Git_parcel-vue/index.html- Git_parcel-vue/src\main.js- Git_parcel-vue/src\App.vue 01. index.html 02. APP.vue {{ msg }} export default { name: 'app', data () { return { msg: 'Welcome to Your Vue.js App!' } } } #app{ color: #56b983; } 03. main.js import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', render: h => h(App) }); 04. 만약 아래..

05. vue, babel 설치 .babelrc 셋팅 하고 출력하기 - Vue 사용을 위해서 의존성 설치 : vuejs 사용을 위해서 라이브러리 설치하고, package.json 에 이제 사용하겠다는 의미를 선언한다고 이해하면 된다. - Babel 사용을 위해서 플러그인과 프리셋 설치, .babelrc 셋팅 : babel은 javascript 트랜스파일러이다. 브라우저마다 JS코드를 실행하는 인터프리터 버전과 지원이 서로 다른데 이러한 것들 (ES2016 문법 등) 을 ES2015로 안전하게 바꾸어 줄 것이다. - .babelrc 파일은 babel의 구성파일이다. 사실 Babel 구성하는 방법에는 packge.json에 다음과 같이 플러그인 및 사전 설정을 할수는 있다. // package.json{ "..

04. npm init - 본격적으로 npm init 을 통해 package.json 만들어보자 01. 터미널에서 npm init npm init - 아래와 같은 화면이 뜰 것이다. - 쭉쭉 엔터로 넘어가고 - description 에서 Github 적었던 설명 입력 정도 해주고 - 완성되었으면 yes 를 타이핑해서 마무리 02. 완료 모습 03. scripts 에 run 명령어를 통해서 실행할 것 추가하기 "scripts":{ "start": "parcel index.html" } 이렇게 등록하고 나면 터미널에서 아래와 같이 사용한다. npm run start npm run start = parcel index.html 과 같다 [ 참고 링크 ] - parcel 설치~ React 연동하고 Typescr..

03. md 파일작성 - md 파일작성 부분은 패스해도 된다 - 마크다운이라고 부르며 - 아래 이미지와 같이 Github 등에서 간략하게 정보를 나타내기 위해 많이 사용한다. - HTML 태그와 같은 개념을 쉽고 빠르게 표현한다. 01. 파일 생성 - 새 파일 > README.md 파일 생성한다. 02. VSC 에서는 마크다운 문서를 실시간으로 볼 수 있다. - 보기 > 명령 팔레트 - Markdown: Open Preview 선택 03. 편집기 분할 - 왼쪽에는 RE..

02. VSC 터미널 Nodejs's npm 이용하여서 parcel 설치 - Visual Studio Code(이하 VSC) 에서 터미널 실행되기 때문에 작업하기가 편하다 터미널 종류는 Nodejs와 Window Power Shell 등 을 사용할 수 있다. - Node.js 설치는 필수이다. - 여기서는 Window Power Shell 사용한다. 01. 파일 > 폴더열기로 아까 생성한 Git_parcel-vue 폴더 지정해서 Open. 02. 터미널 실행 - 보기 > 통합 터미널 - 기본 터미널은 power shell 이므로 별다른 지정 필요없다. 03. npm 최신 버전으로 업데이트 - nodejs의 NPM 사용하여 패키지 관리 할 것이다. 제일먼저 npm 먼저 업데이트 하자 NPM 개념은 여기서 ..

01. 원격저장소 만들고 Clone 하기 - 원격에서 저장소를 만들고 Clone을 시작으로 Visual Studio Code 연동한다. 원격 저장소와 Clone 순서를 잘 모르겠으면 이 글을 참조 - Git, SourceTree 에 대한 경험이 처음이면 이 글을 순서대로 참조 01. Github에서 새로운 저장소 생성한다. - Add .gitignore 에 Node 추가한다 02. URL 입력하고 로컬에 폴더 만들어서 지정해준다. - 로컬 폴더 이름은 Git_parcel-vue 로 정하였다 [ 참고 링크 ] - parcel 설치~ React 연동하고 Typescript 강좌 : 작성 내용의 상당부분 이 강좌에서 도움받았다 강좌에서 React 로 가는걸 나는 Vuejs로 노선을 바꾸었을뿐https://ac..