99 perspiration @seojeee - Tumblr Blog

[coursera] Programming Mobile Applications for Android Handheld Systems

아아 작년 이맘 때? 아닌가 훨씬 더 전이였나?

coursera에서 startup engineering을 시작햇는데 후후후후후후후후후. 끝까지 못들었었지. 요즘 대세가 안드로이드니까 나도 공부해봐야징ㅋ

https://www.coursera.org/course/android?from_restricted_preview=1&course_id=971246&r=https%3A%2F%2Fclass.coursera.org%2Fandroid-001

#android #programmingMobileApplicationForAndroidHandheldSystems

[node-webkit] 노드 웹킷으로 네이티브 앱 만들어보기 2

기본구성.

이전 글에서도 이야기 했듯이, nodejs를 기반으로 하고 있다. node-webkit 역시 비슷한 방식으로 구동되기 때문에 node-module을 만드는 방식이 비슷하다. 즉, 만들려고 하는 js파일 그리고 메타정보를 담고있는 package.json만 있으면 된다! 아니 js 없이 화면을 보여줄 html 과 package.json만 있어도 된다. 일단 코드부터 보자.

Quick Start from node-webkit github

index.html

<!DOCTYPE html> <html> <head> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> We are using node.js <script>document.write(process.version)</script>. </body> </html>

package.json

{ "name": "nw-demo", "main": "index.html" }

index.html과 package.json 압축!

$ zip app.nw index.html package.json

실행해보기!

$ nw app.nw // 이전 글에서 alias 해줘야 합니다.

다음과 같은 화면이 보일 것이다.

저번보다 훨씬 커스터마이즈 된 듯한 느낌의 브라우저다!

만들어본 앱의 structure를 보면..

app.nw |-- package.json `-- index.html

이런느낌!

- 웹 개발하듯이 뷰를 만들면 - node-webkit이 package.json을 보고 .nw 로 실행!

기본적인 이야기는 이정도로 마무리 하고 본격적인 예제앱을 만들어보겠다.

#node-webkit #노드웹킷 #nodewebkit

[node-webkit] 노드 웹킷으로 네이티브 앱 만들어보기 1

시작.

DevFest2014 에서 재밌게 본 세션 중 하나였던 "크롬을 활용한 어플리케이션 개발". node-webkit을 이용해 SQLGate를 만드신 개발 이야기였는데. 네이티브 라고는 모바일 앱 밖에 안만들어본 나에게는 신선한 충격! javascript로 그것도 서버사이드라고만 생각했던 nodejs로 네이티브라니.

그래서 nodewebkit이란 무엇인가?

node-webkit은 크로미움과 node.js를 기반으로 돌아가는 “앱”

HTML과 자바스크립트로 네이티브 앱을 만들 수 있다.

즉, Node.js 모듈을 그대로 사용할 수 있고 web 기술을 네이티브 앱을 만드는데 사용할 수 있다.

Intel Open Source Technology Center 에서 만들었다.

설치.

시작이 반이라고 우선 설치를 해보자. http://github.com/rogerwang/node-webkit/ 다운로드 후 node-webkit.app을 Applications 디렉토리로 옮겨준다.

Quick Start.

방법1. $ /Applications/node-webkit.app/Contents/MacOS/node-webkit

방법2. $ sudo vi ~/.bash_profile

# alias to nw

alias nw="/Applications/node-webkit.app/Contents/MacOS/node-webkit"

$ nw

우오오오오오! 브라우저같은게 이게 앱인가 ;;; 스럽겠지만 어째뜬 시작하기는 성공!!

#노드웹킷 #node-webkit #nodewebkit

2장 HTML 속의 자바스크립트

- 자바스크립트가 처음 나왔을 때 HTML에 종속되었다.

- HTML과 분리되면서 공존하는 길을 찾아보게 되었고 이를 통해 HTML명세서가 만들어 졌다.

1. <script>

- 속성 1. async : [옵션] 자원을 받거나 다른 스크립트 불러오기 등 페이지 작업 방해하는 것을 막음. (외부 자원을 받을 때)

- 속성 2. charset : [옵션] 코드의 문자셋 지정. 잘 안 씀.

- 속성 3. defer : [옵션] 콘텐츠 완벽 파싱 후 스크립트 실행해도 안전함을 나타냄.(외부 자원 받을 때) ; IE7이하에서는 인라인 스크립트에서도 이 속성 O

- 속성 4. language : [폐기] 'JavaScript', 'JavaScript1.2', 'VBScript' 등등 하려 했으나 브라우저에서 무시함.

- 속성 5. src : [옵션] 실행할 외부 파일의 위치

- 속성 6. type : [옵션] 'text/javascript'이 기본값.

- 인라인 자바스크립트 코드 : <script> 요소 안에 직접 작성된 코드

- 인라인 자바스크립트 코드 내에서는 </script>를 쓸 수 없다. >> 에러

- '/' 때문인데 '\\'를 이용해 이스케이프 해서 해결 할 수 있다.

- 외부js는 <script type="text/javascript" src="example.js"></script> 요롷게

- example.js 안에는 오직 자바스크립트만 있어야 한다.

- example.js 안에는 <script> </script>는 생략

- <script ~~~~~ /> 도 가능하다. 하지만 HTML 문법에 맞지않고 IE에서는 제대로 처리 되지 않으므로 이렇게 쓰지 않는게 좋다.

- 다른 도메인에 있는 자바스크립트도 불러올 수 있다.

- <script type="text/javascript" src="http://www.somewhere.com/afile.js"></scrpit>

1.1 태그 위치

- <haed> : 자바스크립트 코드 내려받고 > 파싱 > 해석 > 페이지 렌더링 시작 : 스크립트 불러오는 동안 렌더링이 안되 빈 페이지 노출.. GG..

- <body> 마지막 : 페이지 렌더링 > 자바스크립트 시작 : 우선 페이지가 뜨므로 사용자에게 편리

- defer 설정 : 해당 요소를 만나면 코드를 즉시 받지만 실행은 </html> 이후.

<!DOCTYPE html> <html> <head> <title>Example HTML Page</title> <script type="text/javascript" defer src="example1.js"> </script> <script type="text/javascript" defer src="example2.js"> </script> </head> <body>  </body> </html>

- defer로 지연시킨 스크립트가 순서대로 실행 된다는 보장 없음.

- 외부 스크립트 파일 불러올때만 유효.

- defer 속성은 IE4, firefox 3.5, safari 5, chrome 7 부터 지원

- 그러므로....... 여전히 </body>직전에 놓는게 좋다.

- async 설정 : defer와 비슷, 스크립트가 마크업 순서대로 실행 ㄴㄴ

<!DOCTYPE html> <html> <head> <title>Example HTML Page</title> <script type="text/javascript" async src="example1.js"> </script> <script type="text/javascript" async src="example2.js"> </script> </head> <body>  </body> </html>

- example1.js와 example2.js가 서로 의존성이 있으면 망가질수 있음.

- 스크립트 실행이 DOMContentLoaded 이 전일수도, 이 후일수도 있음.

- firefox 3.6, safari 5, chrome 7 부터 지원.

1.2 XHTML : HTML에 XML을 적용한 것. 코드 규칙이 매우 엄격.

- ex. 비교연산자 '<'를 태그로 인식 >> CDATA로 감싸줘야 함.

<![CDATA[ ~~ ]]>

- XHTML비호환 브러우저의 경우

//<![CDATA[ ~~ ]]>

- type = "application/xhtml+xml" 도 가능 but 브라우저를 탄다.

2. 인라인 코드와 외부 파일

외부파일로 쓰면 좋은점!

1. 관리하기가 쉽다.

2. 캐싱 : 한번 파일을 사용하면 페이지 불러오는 시간이 짧아진다.

3. 안전 : 앞 서 본 CDATA 같은거 안써도 됨. HTML, XHTML 모두 똑같이 불러옴

3. 문서 모드

- doctype을 설정하지 않으면 쿽스 모드( :비표준 기능을 사용, 브라우저마다 다름)

- 표준모드

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html>

4. <noscript>

- 브라우저가 자바스크립트를 지원 하지 않을 때

- 브라우저의 스프립트 지원이 꺼져 있을 때

- 위 두 상황이 아니라면 <noscript> 내 컨텐츠는 노출되지 않는다.

요약

- 외부 자바스크립트 파일은 <script src="~~"> </script>

- 랜더링 순서 때문에 </body> 바로 앞에 두는게 좋다.

#learnjsproperly

[study] Backbone.js

책도 좋아하지만 요즘 유투브 영상 공부에 푹빠졌다. 아래는 내가 본 backbonejs 영상 강의들.

1. Thomas Davis - beginner : https://github.com/thomasdavis/backbonetutorialshttps://www.youtube.com/watch?v=FZSjvWtUxYk 2.Introduction backbone : https://github.com/yagudaev/backbone-twitter-part1 part1 : http://www.youtube.com/watch?v=2BDGBJUtAmo part2 : https://www.youtube.com/watch?v=hHlqisQeERk

#backbonejs

1장 자바스크립트란 무엇인가

역사

- 1995년 입력 유효성 검사를 위해 처음 등장. ( 모뎀시절 서버 왕복 비용때문)

- 네스케이프와 선 마이크로시스템즈가 함께 1.0을 만듬.

- 마이크로소프트도 IE3와 함께 JScript라는걸 만듬.

- 표준을 위해 ECMAScript라는 이름의 스크립트 언어를 정의.

- 지금은 클로저, 익명함수, 메타프로그래밍 까지 가능한 프로그래밍 언어로 자리잡음.

Javascript = ECMAScript + DOM + BOM

ECMAScript

- 기반언어, 호스트 환경

- 인터페이스 구실용. 확장 제공

- 문법/타입/선언문/키워드/예약어/연산자/객체 정의

- 버전은 '판' 이라 불리우며 최근판은 2009년 12월 3일에 발표된 '5판'

- 5판의 새로운 기능 : JSON데이터 파싱, 네이티브 JSON 객체, 상속/프로퍼티 정의를 위한 메서드 등

DOM

- 문서 객체 모델 : XML을 html에서 사용할수 있도록 확장한 API

- 페이지를 노드의 계층 구조로 변환

- 문서를 노트의 계층 구조인 트리로 생성.

BOM

- 브라우저 객체 모델 : 브라우저 창에 접근하고 조작할 수 있게 하는 인터페이스

- HTML5가 BOM을 일부로 표준화 하여 많이 개선됨.

- 새창띄우기, 창 크기 조절, 닫기, 네비게이션 객체, 로케이션 객체, 스크린 객체, 쿠키 지원, ActiveX와 같은 커스텀 객체

요약

자바스크립트는 웹 페이지와 상호작용하도록 만들어진 스크립트 언어이다.

ECMA-262에 정의된 핵심 기능들은 브라우저마다 지원이 다르다.

#learnjsproperly

How did you realize that programming was your passion?

http://www.quora.com/How-did-you-realize-that-programming-was-your-passion/answer/Aaron-Boodman

This isn't to say I've never been burnt out, or questioned whether I'm in the right job; I definitely have. But after a few weeks or a month away, I always came back. And after a few burnout/return cycles, I came to accept that I'm doing what I should be.

처음 프로그래밍 시작할 때 떨리고 내가 개발을 한다는 것에 자부심을 느꼈던 (잘하지도 못하면서 ㅋㅋㅋㅋ 괜한 허세) 그 때가 생각남. 요즘 번아웃됫었으니 다시 돌아갈 차례다.

#프로그래밍

이상한 설명

자바스크립트 책 읽고 있는데 (입문자 책 짱좋아함)

"length 프로퍼티는 배열 내에 가장 큰 인덱스에 1을 더한 값이다."

... 라기 보다는 "배열 인덱스가 [0] 부터 시작이다." 라고 설명하는게 낫지 않을가?? 둘 다 맞는 말이긴 한데...

매우 수학 공식같은 설명이라 맘에 안듬.....

#배열의시작

페이스북 접속후 크롬 개발자모드에서

#페이스북개발자모드

[spring] scope

provided - 컴파일 할 때 필요하지만, 실제 런타임 때에는 컨테이너 같은 것에서 기본으로 제공되는 모듈임을 의미한다. 예를 들어, 서블릿이나 JSP API 등이 이에 해당한다. 배포시 제외된다.

#spring scope #잘못하면에러

[javascript] null == undefined?

두 값의 타입이 다른경우라도 값이 같을수 있다.

null == undefined 는 true!

#null==undefined

[javascript] NaN == NaN? NaN === NaN?

NaN은 어느 값과도 일치하지 않는다.

심지어 NaN 자체와도! 고로, NaN==NaN 은 false, NaN === NaN 은 당연히 false.

그러므로 isNaN()을 사용해야한다.

#NaN #isNaN

[springMVC] 파일 업로드 처리시 multipartResolver 에러 처리

multipartResolver 사용시 빈 이름역시 multipartResolver로 해야하는 것은 상식일 것이고. 제대로 해도 에러가 날 때가 있다.

"Error creating bean with name 'multipartResolver' defined in class..... nested exception is java.lang.NoClassDefFoundError: org/apache/commons/fileupload/FileItemFactory....."

위와 같은 에러가 날 때 아래를 pom.xml에 추가해주면 된다.

<dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.2.1</version>  </dependency>

이유는 내일 찾아야지. 우선 졸ㅋ려ㅋ.

#multipartresolver #multipartresolvererror #commonsfileupload

[javascript] var 변수선언

var 문으로 선언/생성된 변수는 영구적이다

그러므로, delete을 사용해 변수를 삭제하려고 하면 에러가 난다.

#var

[javascript] 문자열은 by value vs. by reference

var s1 = "hello"; var s2 = "hell"+"o";

if(s1 == s2) console.log("by value") else console.log("by reference")

답은 by value!

대부분 언어에서 문자열은 참조 타입. by reference. 따라서 두 값을 비교하려면 equal과 같은 메서드를 써야한다. 하지만 자바스크립트에서는 값으로 비교! == 이던 ===이던 true!

올해 무모한도전 #1 - 자바스크립트 완벽가이드 완독 작년 울며겨자먹기로 토비의 스프링 1,2권 완독했엇다. (한 주에 한 챕터 읽고 세미나까지... )But 자바도 모르는 나한테 남는건 크게는 없엇지만 그래도 스프링이 뭐더라는 알게 되었으니 나쁘지 않은 경험이였다. 올해의 시작도 주변에서는 "굳이 그걸 완독할 필요가 있나..." 라고 하는 책부터 도전!! 보상이 겨우 "소정의 보람" 일지라도 ㅋ.ㅋ

"개발"을 시작한지 이제 딱 2년이 되었다.(비전공자ㅠㅠ) 개발은 그냥 C라는 언어 C++이라는 괴상한 언어로 scratch 정도로만 할 줄 알고 (어깨넘어로 본ㅋㅋ) 개발이 밥줄이 될줄도 몰랐던 2011년 12월. 졸업하고 한국에 들어와서 우연찮게 듣게된 국비지원프로그램을 알게되어 2012년1월2일부터 java를 배우고 안드로이드를 배우면서 이걸 평생 하면서 살면 재밌겠다 라는 생각이 들었다. 그리고 2014년 1월. 아직 배울게 너무 많음에도 불구하고 벌써 살짝 사춘기가 온것 같은 시기. 너무 부족한 실력에 비해 너무 뛰어난 사람들과 나를 비교하고 혼자 자괴감에 빠지고. 노력은 제대로 한건지 의문이 끊이지 않고. 다시.. 2012년 1월에 느꼇던 그 즐거움. 능동적인 자세. 그리고 나를 사랑하는 마음.

Trending Blogs

Recently Viewed Blogs

99 perspiration