Javascript Date 와 Moment 활용

작업을 하다보면 늘 Date의 형식이 얽혀서, 헤깔리게 된다. Date 를 일관성있게 잘 정리해서 활용해야할 것 같다. Date 에 관한 문서 => mdn date Date 을 타임으로 변환하여 사용. Jan 1st 1970 00:00:00 am 을 0점으로 하여, 1 초를 1000으로 계산한다. 예를 들어, new Date().getTime() => 현재 시간을 타임으로 변환한다. Month var date = new Date(); …

Angular MEAN Stack 설정 다시 정리 : 서버 사이드 랜더링 미루자.

Angular의 SEO 문제 때문에, 최근 일주일 Angular Universal 이나 SSR (Server Side Rendering) 에 관한 starter 들을 들여다보고 있었다. starter 들을 분석하고 이해가 가능해야 사용해볼 수 있는데, 웹프로그래밍 공부를시작한지 겨우 6개월된 나로써는 역부족이라는 판단을 했다. 억지로 따라하면, 작동이야 시키겠지만 자유롭게 활용할 수 없다면 차라리 워드프레스가 나으리라. 그래서 훗날을 기약한다. 6개월즈음 더 지나면 왠만큼 이해하고 활용할 …

[memo] AOT Don’ts

AOT Don’ts The following are some things that will make AOT compile fail. Don’t use require statements for your templates or styles, use styleUrls and templateUrls, the angular2-template-loader plugin will change it to require at build time. Don’t use default exports. Don’t use form.controls.controlName, use form.get(‘controlName’) Don’t use control.errors?.someError, use control.hasError(‘someError’) Don’t use functions in …

Angular Universal (앵귤라 유니버살) – 서버사이드 렌더링 SEO 구현

[경고] 이 포스트는 Server Side Rendering 을 구현하려고 시도하는 중에 개인적인 노트로 작성된 것 입니다. 완성도가 있는 것도 아니고 바로 프로덕션에 쓸 수도 없습니다. 참고하세요. angular4 만으로는 아직 검색 엔진에 대응하는 seo 를 구현하기 어렵다. rendering 이 client side 에서 실행되기 때문에, 검색엔진이 해당 페이지를 접속하면, 내용이 입력되지 않은 간단한 html  프레임만 건지게 된다. 이런 …

세로 점 세 개 css 로 만들기

세로 점 세 개를 웹페이지에 넣으려고 특수문자표를 찾아봐도 도통찾을 수가 없다. 여기 저기 검색을 해보니 일목요연하게 정리된 곳이 있어 블로그에 복사해 놓는다 유니코드를 사용해서 만들기 .test:after { content: ‘\2807’; font-size: 100px; }   <div class=”test”></div> background 를 사용해서 만들기 div { width: 100px; height: 300px; background-image: radial-gradient(circle at center, black 10px, transparent 10px); background-size: 100px …

강화권 낚시터

낚시에 취미를 좀 붙여볼까? 어디로가지? 하고 돌아보면, 서울에서 접근 가능한 왠만한 저수지는 유료낚시터로 바뀌어있다. 산천이 모두 누군가의 이익 사업으로 독점되고 있으니, 참 팍팍한 세상이다. 무릇 어머니같은 자연은 개인이 소유할 수 있는 것이 아니다. 그런데, 실상은 물도 돈을 내고 먹어야하고 수렵채집 조차 돈을 내고 해야하는 세상이 되어버렸다. 앞으로는 공기도 돈을 주고 숨을 쉬어야하는 세상이되어버리면 어떻하지? 생각만해도 …

[ Angular2 : Renderer ] View Control 예제

Angular2 에서 View Control 은 처음 공부하는 입장에서 상당히 헤깔릴 수 있다. JQuery 나 Javascript 에서 Dom에 접근하는 방법이 Angular2 에서는 통하지 않는 경우가 있다. 혹자는 jquery를 angular2 에서 사용할 경우에 angular2 자체 해결책을 사용하는 것보다 심하게는 수십배의 속도차이가 난다고도 하더라. 그러니, 과거의 습관은 버리고 Angular2 에서 자체적으로 어떻게 View Control 을 하는 지 익혀둘 …

[ Angular2 ] 이미지 파일 Input 및 preview

file input 필드에 이미지를 선택하여 입력하면, 이미지 preview 를 출력하는 방법을 간략히 적어본다. 바로 해보자. //Angular Cli 를 이용하여 새 프로젝트를 생성한다. $ ng new img-input   src/app/app.component.html <h1> {{title}} </h1> <input type=’file’ accept=”image/*” (change)=”readUrl($event)” multiple> <img *ngFor=”let u of dataUrl” [src]=”u” width=”300px”>   src/app/app.component.ts import { Component } from ‘@angular/core’; @Component({ selector: ‘app-root’, templateUrl: …

Angular cli 에서 scss sass 사용하는 법

angular cli 프로젝트를 생성하면 기본 style 형식이 css 로 설정된다. scss 나 sass 를 사용하려면, 프로젝트 생성단계에서 style옵션을 추가해주어야한다. 기존 프로젝트에서 scss 또는 sass를 사용하려면 node-sass 를 설치하고 angular-cli.json 파일을 수정해주면 된다. 새 프로젝트 생성 //SASS 사용시 $ ng new project –style=sass //SCSS 사용시 $ ng new project –style=scss   기존프로젝트에 sass / scss 추가하기 …

[ Angular2 Tips ] jquery-datetimepicker 를 사용해보자.

angular2 datetimepicker 를 검색해보면 ng2-datetime-picker ng2-eonasdan-datetimepicker 등 여러가지 모듈을 찾을 수 있다. 링크된 페이지에 설명된 대로 설정하면 Angular2에서 쉽게 사용할 수 있지만, 왠지 부족하게 느껴진다. 디자인이나 사용성이 내가 원하는 것과는 거리가 있다. jquery datetimepicker 가 사용성이 가장 좋다고 생각했는데, 이건 angular2 에서 바로 npm install, import 해서 사용할 수 있게 만들어져있지가 않다. angular cli 에서 …