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

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..

2018.04.24 수정 ajax 라이브러리 sendRequest-ajax.js 작년 어느땐가 만들었던 sendRequest ( http://serpiko.tistory.com/515 ) 에서 버전업 된 라이브러리이다. 실무에서 편하게 쓰려고 계속 이리저리 손대다가 다루기 편하고 적절해져서 공개한다. data타입은 xml을 제외한 text, json, jsons 를 타겟으로 하며, xml로드와 파싱은 여기 ( http://serpiko.tistory.com/489 )를 참고한다. /************************************************************************************ sendRequest-ajax author : 허정진 http://tist..

Free & Public HLS Example Test Streams 테스트용 HLS .m3u8 스트림 HTTP Live Streaming 은 Apple에서 구현한 HTTP 기반 프로토콜이다. MPEG-DASH와 같은 공개 표준이 아니므로 일반 커뮤니티에서 생성할 수 있는 많은 컨텐츠와 리소스가 없다. 그러나 아래의 Bitmovin 에서 스트림목록은 자막 + 다중 언어 옵션기능이 포함된 인코딩으로 테스트 스트림 URL 을 제공한다. https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8https://bitdash-a.akamaihd.net/content/sintel/hls/p..