삼바의 성장 블로그

인프런에서 견고한 JS 소프트웨어 만들기를 수강하며 적은 강의노트입니다.보다 자세한 내용은 강의를 통해 확인하실 수 있습니다. 아리송한 상황들자바스크립트는 빌드과정이 없기때문에 실행하기전 코드의 에러를 검출할 수 없습니다.console.log = 4console.log('4');// ERROR또한 타입이 헷갈릴 때도 있습니다.xxxxxxxxxxlet f = '1' + 1// '11'let s = '2' * 3// 6let t = 1 + '2' + 3 * 4// '1212'컴파일러가 없으니 테스트가 최선이다.이러한 문제를 극복할 방법으로 테스트주도개발(TDD)에 대해 알아보자!JS 소프트웨어를 견고하게 만드는 것이 이 강의의 목표. 몇 가지 테스트 개념들단위 테스트단위(Unit): Input에 따라 계산한..

JS에서 Blob 객체는 Binary Large Objects의 약자입니.단순 텍스트가 아닌 이미지, 사운드, 동영상 등 대용량 바이너리 데이터를 담을 수 있습니다.주로 데이터의 크기(Blob.size) 및 MIME 타입(Blob.type)을 알아내거나, 데이터 송수신 작업에 사용됩니다. Contstuctorvar mBlob = new Blob(array, options);위의 코드와 같이 Blob 생성자는 두 개의 매개변수를 받습니다.첫 번째 array는 ArrayBuffer, ArrayBufferView, Blob, DOMStrring중의 하나로 데이터의 배열을 전달합니다.두 번째 options는 {type: ..., endings: ...} 형태를 가지고 있으며,type은 contents의 MIME..

async속성이 있는 스크립트는 비동기적으로 실행됩니다. 기존에 defer속성이 있는 는 순서대로 실행합니다. (hello1.js → hello2.js) async와 마찬가지로 HTML 파싱을 중지시키지는 않습니다. 하지만 async와 다르게 파싱이 종료된 후, 실행됩니다. caniuse의 script-defer 에 따르면 대부분의 브라우저에서 사용이 가능합니다.

BootBox.js 버튼 포커싱하기 Alert 창 띄우기 var dialog = bootbox.dialog({ title: "Hello, BootBox!", message: msg, buttons: { ok: { label: "닫기", className: 'btn-danger', callback: function(){ } } } }); 버튼에 포커스 dialog.on('shown.bs.modal', function() { dialog.find(".btn-danger:first").focus(); });

Hello, BootStrap! Bootstrap CDN 가져오기 Google에 "bootstrap cdn" 검색 [시작하기 · 부트스트랩]클릭 CDN을 복사 Hello, BootStrap! 기존 Hello, Vue!에 BootStrap CDN 추가 * [ https://sambalim.tistory.com/22 ] 참고 (앞으로의 예제에서는 BootStrap의 CSS만 사용예정) body 태그 내 전체에 해당하는 div 영역에 반응형 고정너비 class="container"를 적어줍니다. (전체 너비를 사용하는 경우, ".container-fluid"를 사용합니다.) {{ message }} 실행결과

BootStrap BootStrap? 트위터에서 시작된 jQuery 기반 오픈 소스(MIT라이센스) 웹 프레임워크 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 놓은 것으로, 프론트엔드 개발에 있어서 일관성을 유지할 수 있게 해주었다. 시작하기 http://bootstrapk.com/getting-started/ CDN

[Vue.js] Vue 시작하기 VS Code 설치 https://code.visualstudio.com/ Extension : HTML Preview 우측 메뉴에서 Extension 실행 "Live HTML Previewer" 입력 후, 설치 → 다시로드 (F1) 클릭 후, Preview를 입력 Side Preview 실행 Hello, HTML! HTML Hyper Text Markup Language Hyper : 초월한 Text : 문서 Markup : 마크로 둘러쌓여있는 Language : 언어 HTML 기본형식 Hello World! — doctype : 아주 오래전 HTML 이 막 나왔을 때 (1991년 2월쯤), doctype은 (자동 오류 확인이나 다른 유용한 것을 의미하는) good HT..

데이터를 정렬/필터/색인할 수 있게 도와주는 오픈소스 Javascript Utility Library 사용방법 https://lodash.com/ 에서 [CDN copies]를 통해 CDN을 가져오거나 파일 다운로드 (https://github.com/lodash/lodash/releases) 기능 https://lodash.com/docs/4.17.11 을 참조하여 사용 대표예시 _.orderby

Vue.js란? Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크 입니다. Vue.js를 추천하는 이유 배우기 쉽다! Vue.js의 철학은 "누구나 쉽게 시작할 수 있는 프레임워크"이다. 복잡한 빌드과정이 없고 React와 같이 Webpack 같은 빌드 툴을 따로 공부할 필요가 없다. 최소한의 기능을 제공하고, 필요한 도구는 별도로 제공한다. 결합이 잘된다! 다른 라이브러리나 기존 프로젝트와 통합하기 매우 쉽다. 소스코드에 단 한줄을 추가하는 것 만으로 Vue.js를 사용할 수 있다. 인기가 좋다! https://risingstars.js.org/2018/en 위 사이트를 보면 알 수 있듯이 Vue.js는 2018년 most popular..

[HTTP] GET과 POST의 차이 HTTP Hyper Text Transfer Protocol으로 주로 HTML 문서를 주고받는데 사용된다. HTTP는 클라이언트와 서버사이에 이루어지는 Request와 Response 프로토콜이다. 사용자가 브라우저를 통해 Request를 하면 서버는 이 요청에 응답하여 사용자에게 정보를 전달한다. Get /test/demo_form.php?name1=value1&name2=value2 GET은 Data Request에 주로 사용됩니다. 특징 GET Request는 요청을 캐싱할 수 있습니다. GET Request는 브라우저 기록에 남아있습니다. GET Request는 북마크에 추가 가능합니다. GET Request는 중요한 데이터를 다룰때는 적합하지 않습니다. GE..