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..
어떤 엘리먼트를 사용해서 웹을 만들어야 하나 HTML5가 2014년 10월 28일 표준안이 확정되고 나서 HTML4 와도 많은 차이점을 보였는데 시멘틱웹을 만들기위해서 개념적으로 분리된 좋은(유용한) 엘리먼트들이 많고 그 개수는 150여개에 다달하지만, 문득 궁금해진게 실제 웹페이지에서 HTML 엘리먼트 태그는 어떠한 것들이 제일 많이 사용되고있을까?.. 평균 25개 구글에서 리서치한 결과 실제로 웹페이지에서는 평균 25개의 태그로 구성된 페이지가 많았다. 자주 사용하는 태그개수가 실제로는 많지 않다라는 뜻인데 아래의 표를 보면, 개인적으로는 이 의외이긴 하지만 결과자료에 본인도 이견이 없다. 조금더 구체적인 자료(설명)은 아래를 참조하도록 하고 https://www.advancedwebranking.c..