개발/Web (27) 썸네일형 리스트형 이미지 파일 업로드 확장자, 사이즈 체크 document.getElementById('cover_file').onchange = function(evt) { var file = this.files[0]; var _URL = window.URL || window.webkitURL; var img = new Image(); var imglimitwidth = 3000; var imglimitheight = 3000; // 확장자 체크 if ($("#cover_file").val() != "") { var ext = $('#cover_file').val().split('.').pop().toLowerCase(.. 로딩 애니메이션 See the Pen loading-animation-1 by LEE SENGWOO (@sengwoolee) on CodePen. ES6(ECMAScript6) const/let - const/let 은 block 스코프이다. Arrows - 화살표 함수는 문법을 사용하는 축약형 함수이다. - 표현식의 결과 값을 반환하는 표현식 본문과 상태 블럭 본문을 지원. - 일반 함수의 자신을 호출하는 객체를 가리키는 dynamic this 와 달리 arrows 함수는 코드의 상위 스코프를 가리키는 lexical this 를 가짐. Classes - ES6 클래스는 프로토타입 기반 객체지향 패턴을 더 쉽게 사용할 수 있는 대체재. - 클래스 패턴 생성을 더 쉽고 단순하게 생성할 수 있음 Enhanced Object Literals - ES6에서 객체 리터럴은 선언문에서 프로토타입 설정. - 단축 표기법, 메서드 정의 클래스 호출 및 동적 속성명 지원. - 객체 리터럴 및 .. CSS 플러스, 마이너스 아이콘 CSS +- 아이콘 애니메이션 HTML5 구조 태그 SECTION 요소는 연관된 내용을 하나의 영역으로 만드는 태그 NAV 매뉴 구성 ASIDE 는 주된 본문 콘텐츠 흐름과 관련없는 인접한 콘텐츠에 사용 ARTICLE 은 독립적으로 구성할 수 있는 컴포넌트로 별도로 배포하거나 재사용하기 위한 구조 article은 완전히 떼어내 다른 사이트에 붙여도 그 의미를 사용자가 이해할 수 있는 콘텐츠 HEADER 는 소개나 내비게이션 기능들의 묶음 한 섹션의 목차나 검색폼, 관련 로고등을 감싸는 용도로도 사용 FOOTER 이 요소는 가장 가까운 선행하는 섹션의 푸터를 의미 TypeScript 정적 타이핑 1. 타입 선언 TypeScript는 아래와 같이 변수명 뒤에 타입을 명시하는 것으로 타입을 선언할 수 있다. // 변수 hello는 string 타입이다. let hello: string = 'hello'; 선언한 타입에 맞지 않는 값을 할당하면 컴파일 시점에 에러가 발생한다. let num1: number = true; // error TS2322: Type 'true' is not assignable to type 'number'. 타입 선언은 개발자가 코드를 예측할 수 있도록 돕는다. 타입 선언은 강력한 타입 체크를 가능하게 하여 문법 에러나 타입과 일치하지 않는 값의 할당 등 기본적인 오류를 런타임 이전에 검출한다. 함수의 매개변수와 반환값에 대한 타입 선언 방법은 아래와 같다. 일반 변수와 마.. TypeScript 환경구축 TypeScript 또한 자바스크립트 대체 언어의 하나로써 자바스크립트(ES5)의 Superset(상위확장)이다. C#의 창시자인 덴마크 출신 소프트웨어 엔지니어 Anders Hejlsberg(아네르스 하일스베르)가 개발을 주도한 TypeScript는 Microsoft에서 2012년 발표한 오픈소스로, 정적 타이핑을 지원하며 ES6(ECMAScript 2015)의 클래스, 모듈 등과 ES7의 Decorator 등을 지원한다. TypeScript는 ES5의 Superset이므로 기존의 자바스크립트(ES5) 문법을 그대로 사용할 수 있다. 또한, ES6의 새로운 기능들을 사용하기 위해 Babel과 같은 별도 트랜스파일러(Transpiler)를 사용하지 않아도 ES6의 새로운 기능을 기존의 자바스크립트 엔진(.. [Node.js] 프레임워크 Express, Koa, Hapi 1. Express Node.js 프레임워크 중 커뮤니티가 가장 크다. StrongLoop에 의해 관리되고 있다. 내장 라우터로 코드를 쉽게 재사용할 수 있다. 내장된 에러 핸들링이 없다. 다른 프레임워크에 비해 메모리를 많이 차지한다. 2. Koa 다른 프레임워크에 비해 미들웨어 작성이 쉽다. 기본적으로 뼈대 프레임워크라서 개발자가 필요한 미들웨어만 구성해 사용할 수 있다. ES6 제너레이터를 사용할 수 있다. 아직 불안정하며 많은 개발이 진행중이다. 미들웨어를 직접 작성할 수 있는게 장점이자 단점이다. 3. Hapi 코드보다 설정을 더 많이 해야 한다. 견고함과 재사용성을 요구하는 큰 규모 팀에서 흔하게 사용된다. 월마트랩에서 만들고 이름있는 회사에서 많이 쓰고 있어서 검증되었다고 보는 편이다. 크고.. 이전 1 2 3 4 다음