본문 바로가기

반응형

javascript

[JavaScript] # Electron, 일렉트론 Electron은 HTML, CSS, JavaScript를 사용해 크로스 플랫폼 데스크탑 애플리케이셔을 만들기 위한 오픈 소스라이브러리 크로스 플랫폼을 지원하기 위해 Chromium과 Node.js를 1개의 런타임으로 통합하였고, Mac, Window, 리눅스용으로 패키지 할 수 있습니다. 원래는 텍스트 편집기인 아톰을 만들기 위해 Electron 프레임워크를 개발하였습니다. 아래 히스토리에 나온 것 처럼 Atom Shell이라는 이름으로 프로젝트를 시작하였지만, 이후 Electron이라는 이름으로 변경 되었다고 합니다. 어떤 앱들이 만들어 졌나 카테고리 별로 보면 대충 500~600개 정도에 앱들이 있는걸 알수 있습니다. 옆에 실제 앱들을 보면 잘 알려진 앱들이 많습니다. 스카이프, 깃헙 데스크탑, 디.. 더보기
[JavaScript] # WebAssembly, 웹 어셈블리 웹 어셈블리에 대한 관심 먼저 웹 어셈블리가 뭔지 알아보기 전에 얼마나 브라우저사 또는 IT관련 회사들에서 웹 어셈블리에 관심을 가지고 있는지 찾아봤습니다. 기사 제목들만 봐도 많은 관심이 있고, 현재도 계속 진행중인것을 알수 있습니다. 그럼 웹 어셈블리가 뭔지 알아보도록 하겠습니다. 웹 어셈블리란? 일단 이름에서도 알수 있듯이 Web과 Assembly에 합성어로 WebAssembly로 불립니다. 웹 브라우저에서 실행 할수 있는 코드 형식이고 성능적인 부분에서 상당한 이점을 가지고 있다고 합니다. 직접 코드를 작성하는 것이 아니고 C/C++,Rust(모질라 리서치에서 개발한 인터넷에서 사용되는 서버와 클라이언트에 적합한 프로그래밍 언어, C/C++과 유사한 모양) 같은 로우레벨 언어를 컴파일 타겟이 되어.. 더보기
# Polyfill(폴리필) / Transpiler(트랜스파일러) Polyfill(폴리필) 자바스크립트 엔진에 없는 코드의 기능을 지원하기 위해 삽입하는 코드.예를들어서 ES6에만 있는 기능을 ES6를 지원하지 않는 브라우저에서 사용하고 싶을 때폴리필을 사용하여 호환성을 맞춰줄수 있음.폴리필 목록을 보고 참고하면 된다.참고https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#ecmascript-6-harmony Transpiler(트랜스파일러) ES6 트랜스 파일러다. 라는 의미는 ES6 소스코드를 ES5 소스 코드로 변환하여 거의 모든 자바스크립트 엔진에서 사용할 수 있게 해주는 것.폴리필과 비교해서 비슷한 의미지만, 폴리필은 파일 단위 / 기능 단위로 할수 있다고 생각하면 트랜스파일러는 .. 더보기
[JavaScript] #5, JavaScript Array JavaScript Array 배열 자주 사용되는 거 모음 생성생성은 new보다는 [] 사용이 좋다. var array = new Arrary() // X 쓰지 말기 var array = []; // O 이렇게 선언해야지 더 최적화. shift()맨앞에 하나 제거 var arr = [1,2,3,4]; var temp = arr.shift(); // arr -> [2,3,4] // temp -> 1 unshift(value)맨앞에 하나 추가 var arr = [2,3,4]; arr.unshitf(1); //arr -> [1,2,3,4] pop()맨 뒤에 하나 제거 var arr = [1,2,3,4]; var temp = arr.pop(); //arr -> [1,2,3] //temp -> 4; push(va.. 더보기
[JavaScript] #4, Module Pattern 모듈 패턴 Javascript Module Pattern 모듈 패턴 모듈화 / 네임스페이스 JavaScript 모듈화가 필요한 이유는 객체명이 겹치는 상황을 방지전역 공간을 어지럽히지 않기 위함정보 은닉(information hiding)을 하기 위해Javasciprt는 별도의 public / private 를 제공하지 않기 때문에, 클로져를 사용하여 구현 할수 있음.Javascript는 function 레벨로 Scope가 제공되어 변수는 외부에 참조 될수 없음. Javascript 모듈화를 위해 기본적으로 클로저를 사용클로저 개념을 알아야 좀더 이해하기 쉬움 쉽게 클로저는 private를 구현하기 위한 방법이라고 생각 아무튼 모듈화를 하기 위해 몇가지만 기억하고 하면 된다. 익명 함수 사용변수 접근 제한함수 접근.. 더보기
[Media] # MP4 파일을 Fragmented MP4로 변환 Convert MP4 to Fragmented MP4MP4 파일을 Fragemented MP4로 변환하기My MP4Box GUI 사용하여 mp4파일을 Fragment mp4로 변환https://gpac.wp.mines-telecom.fr/mp4box/ 에서 다운로드영상/음성 중에서 영상만 분리해서 진행 Demux MP4 Box GUI 실행 후 MP4 파일을 첨부Video만 선택 후 Demux 영상만 MuxDemux된 영상을 Mux 탭으로 이동하여 Demux 된 h.264 파일만 선택하여 AddAdd된 H.264 파일을 Mux Commnad를 이용하여 쪼개기 명령어 > MP4Box -dash 1000(ms초) -segment-name 쪼개질파일명 대상mp4파일명 예) > MP4Box -dash 1000 -.. 더보기
[JavaScript] #3, Function 함수 JavaScript Function 함수 자바스크립트 함수는 일급 객체 일급 객체 조건변수나, 데이터를 구조 안에 담을 수 있음파라미터 전달 가능return 가능동적으로 프로퍼티 할당 가능무명 가능 함수명을 생략하여 익명함수(anonymous function) 가능익명 함수는 람다식 / 람다 함수라고도 함. // 기명 함수표현식(named function expression) var foo = function multiply(a, b) { return a * b; }; // 익명 함수표현식(anonymous function expression) var bar = function(a, b) { return a * b; }; 함수 선언 3가지 방법 함수 선언식 → function 함수명(인자값) { retu.. 더보기
[JavaScript] #2, Data Type 데이터 타입 JavaScript Data Type 데이터 타입 JavaScript에 Data Type은 총 7가지이다. 그중 6가지는 Primitives data type이라고 불린다. Boolean, null, undefined, Number, String, Symbol 나머지 1가지는 Object 이다. 아는 거라고 얕보면 안 됨. Boolean은 2가지 값을 가질 수 있다. true 또는 false. 조건문으로 판단할 때, false로 판단되는 경우. 빈 문자열, null, undefined 는 false 그 외는 true. function main() { var test1 = ""; var test2 = "1"; var test3 = null; var test4 = undefined; console.log(c.. 더보기
[Tip] #티스토리 소스 코드 스타일 적용해서 넣기 #티스토리 소스 코드 스타일 적용해서 넣기정리하면서 소스를 넣어려고 메뉴를 찾아보니. 소스 코드 넣는 메뉴가 없었다.... 다른 블로그는 스타일이 적용되어 잘 올라가던데... 찾아보니 따로 설정을 해야되었던 것이다. 파일 다운로드 부터 설정까지 한개 블로그만 참고해서는 안되어서 혼자 정리를 좀 해 보았다. Tistroy에서는 직접 html과 css파일을 올릴 수 있도록 친절하게 만들어 놓았다. 필요한 파일만 압축해서 올려둠. 아래 파일 다운로드 ㄱㄱ. 하나씩 이미지 보면서 따라하면 끝. 1. 압축 풀면 이렇게. 2. 블로그 관리 메뉴로 들어가서 HTML/CSS 편집 선택 3. 파일 업로드 선택. 4. 추가 선택. 5. styles 폴더 들어가서 파일 전부 선택 후 열기 6. scripts도 전부 선택해서.. 더보기
[JavaScript] #1, JavaScript JavaScript JavaScript를 처음 접했을 때, 얄팍한 지식으로 어느 정도 필요한 기능이 구현되었다. 오픈 소스나 구글링 하면서 소스를 보면 내가 구현하는 것과 매우 다른 형태 소스들을 보게 된다. 역시 고수들...이러면서 대수롭지 않게 그냥 지나쳤다. 왜 그랬을까.. JavaScript를 진입 장벽이 낮다고 하는 사람들이 있다. 체감적으로 다른 언어들에 비해 유연한 덕분에 쉽게 느껴지는 부분이 있다. 하지만 깊이 들어갈수록 어떤 언어보다 복잡하고, 알아둬야 할 개념들이 많다. 계속 알아가는 중.. 애초에 탄생 자체가 HTML DOM을 동적으로 제어하고 싶어서 만든 보조적인 언어라 그런 걸까. 아무튼 기본 개념 없이 접근했다가 된통 당하고 조금씩 알게 되는 것을 메모해 둠. 컴퓨터 관련 비전공.. 더보기

반응형