서제떼의블로그

회사에서 타입스크립트를 사용한게 1년정도 되었는데 

쓰긴 쓰는데 아는 것이 없어서 기록.. +_+

1. 시작 

 - 설치   및 튜토리얼 

     https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html (영문)

    국문 : https://typescript-kr.github.io/pages/tutorials/TypeScript%20in%205%20minutes.html 

2. 설치

      -g는 글로벌 

3. 확인

버전확인 

4.  간단하게 아래와 같이 코드를 짜고

터미널에서 tsc를 돌려준다. 

그러면 test.js 생성 

 5. tsconfig 셋팅하기

- typescript 는 tsconfig.json을 통해 다양한 옵션을 셋팅할 수 있다. 

아래처럼 예제가 나와있긴 하지만  회사에서쓰는 걸보니 typescript 에서 컴파일러 옵션좀 읽어보고 기본  셋팅값에서 조금씩 바꿔보는게 좋을듯! 

- 한글로 설명 잘 된곳  

https://typescript-kr.github.io/pages/tsconfig.json.html

https://vomvoru.github.io/blog/tsconfig-compiler-options-kr/

1. html.raw("@~~~") 하는 방법과

2. @@하는 방법 있음. 

그냥 css animation을 선언하게 되면 @를 사용하게 되는데, 그러면 파서 오류남.. -_ - 

맥쓰다가 데탑에서 작업하려니...

루비 설치 : http://rubyinstaller.org/downloads/

요기서 인스톨러 다운받고 체크박스에 모두 체크

그리고 바로 sass설치하면 오류남...

아래처럼 빨간 밑줄 처럼 해주면

설치 끝.

openlayers3을 이용해서 지하철 지도 페이지를 구현중임.

몇가지 문제가 있었는데

openlayers3에 레이어 올리기

coords맞추기.

좌표찍기

레이어 duration주기 ㅎ ㅏ이건 담에 소스를 올려야겠다.

이미지를 자르는 문제.

 256*256을 기준으로  6000(이미지의 가로 사이즈) / 256을 하게 되면 그것이 줌 레벨이 된다.

6000, 3000, 1500, 750, 375, 

  5         4       3        2     1

큰이미지는 imagemagick라는 nodejs를 이용해서 잘랐음.

물론 문제가 있다. 6000*5040의 이미지일 경우.. 메모리 뻑이남

이것은 추후 rxjs를 이용해서 promise를 이용해서 자를 예정.

블로그에도 적어야지. 

어찌저찌하여 최종 인앱에 지하철을 넣는것 까지 완료.

그런데  6000*5040이미지, 등을 모두 돌리니 무겁다.

ㅎ ㅏ~_~

회사 nova님이 android build를 알려주심

클린

proj_root$ ./gradlew clean

APK 생성

proj_root$ ./gradlew assemble

클랜 & 빌드

proj_proot$ ./gradlew clean && ./gradlew assemble

Release APK 만 빌드(company-app-android)

proj_proot$ ./gradlew clean && ./gradlew assembleRelease

플레이스토어 Release APK 만 빌드(company-app-android)

proj_proot$ ./gradlew clean && ./gradlew assemblePlayRelease

adb 를 이용한 설치

$ adb install app/build/outputs/apk/****.apk

$adb install -r app/build/outputs/apk/****.apk

gradlew를 보면서 음 프론트엔드에서의 프로젝트 관리 툴들이 쫓아가는 매커니즘들을 이해할 수 있을 것 같다.  

localstorage :  

만료시점이 없음.

영구적으로 보관, 

도메인마다 별도로 로컬스토리지 생성. 

window.localStorage라는 컬렉션을 통해 저장되고 조회됨. 

sessionStorage :

 window.localStroage와 유사. 하지만 페이지 세션이 종료 되면 바로 제거됨, 

브라우져별로 다르면 서로 다른영역. 브라우져가 다르면, 

webstorage는 클라이언트에서 값을 수정할 수 있다.

cookie 

한사이트에 max 20개, 쿠키 한개에 4kb, 만료일자 지정해야함. 

limit에 관한 이야기 

http://www.html5rocks.com/ko/tutorials/offline/quota-research/

http://stackoverflow.com/questions/2989284/what-is-the-max-size-of-localstorage-values

webstorage에 관한 글 

https://developer.mozilla.org/ko/docs/Web/API/Window/sessionStorage

http://youngwonjang.github.io/2015/03/08/web-storage-post.html

쿠키 :  http프로토콜의 헤더에 포함된다. 

고로 계속 통신이 됨. 

cookie와 localstorage에 대해검색하니 jwt이야기가 나옴. 

울팀 곽오나시님이 발표해주셨었는데 좀더 물어봐야겠다.

localstorage limit,  리밋확인가능 

http://demo.agektmr.com/storage/

브라우저별 localstorage limit 

mobile browser

desktop browser

(참고 : http://www.sitepoint.com/html5-local-storage-revisited/)

10mb인듯

음.

nodejs가 여기저기 글로벌하게 설치 된것 sudo를 통해서 강제로 설치 된것

모르겠다.

일단 삭제

http://stackoverflow.com/questions/9044788/how-do-i-uninstall-nodejs-installed-from-pkg-mac-os-x

lsbom -f -l -s -pf /var/db/receipts/org.nodejs.pkg.bom \
| while read i; do
  sudo rm /usr/local/${i}
done
sudo rm -rf /usr/local/lib/node \
     /usr/local/lib/node_modules \
     /var/db/receipts/org.nodejs.*

npm삭제 

https://docs.npmjs.com/misc/removing-npm

sudo npm uninstall npm -g
sudo make uninstall

reactjs 

just the ui

virtual dom

data flow

jsx : xml과 비슷한 js확장문법. react를 위해 꼭 사용할 필요는 없지만 추천. attr를 가진 트리구조로 정의가능한 익숙한 문법이기 때문. 

flux : facebook에서 client-side-web-application을 만들기 위해 사용하는 어플리케이션 아키텍쳐.

핵심 세가지 : dispatcher(흐름관리), stores, view

dispatcher : 데이터 흐름관리, store의 콜백 등록하고 action과 store에 배분해주는 간단한 작동. 

stores : 어플리케이션의 상태와 로직 포함, 전통 mvc모델과 비슷하지만, 어플리케이션내의 개별적인 도메인에서 어플리케이션의 상태를 관리 

view :  읽어봤는데 잘 모르겠음 sencha touch가 생각남. (관련글 : http://funnygangstar.tistory.com/entry/%ED%95%98%EC%9D%B4%EB%B8%8C%EB%A6%AC%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%A0%84%EB%9E%B5-%E2%80%93-%EB%91%90-%EB%B2%88%EC%A7%B8-%EC%9D%B4%EC%95%BC%EA%B8%B0-React-Backbone)

http://haruair.github.io/flux/docs/todo-list.html(번역본 : http://haruair.github.io/flux/docs/overview.html#content)