140326 Jquery Mobile 실습

 1. CSS, HTML 태그 속성

 * <meta name="viewport" content="width=device-width, initial-scale=1">

 - viewport : width=device-width <-> 가로크기

 * div css

 - margin: 0 auto; div 가운데 정렬

 - max-width: 화면 늘어나도 최대 크기 고정

 - 시계방향으로 왼쪽부터 여백 margin: 15px 0 5px 0;

 - 폰트 사이즈 : px/pt/em 단위 : px(화면크기에따라 잘 적용안댐)/em 단위가 좋음(배수로 됨. 0.5 /1기본/1.5)

 - a 태그 : text-decoration: none; //태그가 안보임

 - margin : 바깥테두리 / padding margin 안에

 2. 개발 팁

 - utf8 : 최근 기본 언어, 유니코드

 * css -> jquery -> jquerymobile 불러오는 순서 : css를 먼저 깔아야 js가 인식함

 ex) listview 를 쓰면 검색도 가능 (css 와 jquery를 사용한 것)

 * 음성브라우저 듣는 사람들 이미지를 볼 수 없으니까 <img> 태그에서 alt를 읽어줌 *alt꼭쓰기*

 - SAP 언어 쓰면 개발봉급 1~1.5배 더 받음

 - '=='/'=== ' ? 공통점 : 같니? / 차이점 : 등호3개는 자료형까지 같아야함 ==> 등호3개쓰는것 권장

   

 3. 개발 상식

 * CRUD : Create : insert, Read : select, Update : update, Delete : delete 

 * RESTful 방식 

 - 모바일은 post 주로 사용 : 약식

 - list.jsp       => /list

 - write.jsp      => /write

 - read.jsp?no=17 => read/17

 - update.jsp     => /update

 - delete.jsp     => /delete

 * CoffeeScript : 자바스크립트를 편하게 쓸 수 있는 언어.

 * src = source의 약자

 * jsonp(JSON with Padding, json 으로 둘러 싸는 것 의미) => js호출을 javascript 페이지로 해주는 것, 이를 json 형식으로 가져옴

 * nodejs

 - paypal이 java를 버리고 nodejs로 간 이유

 - http://okjsp.tistory.com/1165644217

 - 장점 : 짧은 코드로 효율적인 처리.

 - 단점 : 한 페이지 에러 나면 다른 페이지도 에러남(서버가 죽음) -> forever 모듈로 죽을 것 방지할 수 있음

 * 스칼라 : 넥스트 자바?

 * T자형 인재

 - java나 c 하나 잘하는게 있어야되고 다른 언어도 전반적으로 알아야함(다방면에 관심갖기)

 - 여러 언어들의 장점을 가져다 쓸 수 있어야 함

 4. open api

 - html5, javascript, jquery 필요함 => 내가 필요하다고 느끼는 것 정리해나가기

 - 공짜 or 유료 도 있지만, 서버 사이드에 있는 내용물을 가져올 수 있도록 해줌(json형식으로)

 ex) 다음 : http://200.200.200.200/login

 - 입력:아래 get방식으로 / 출력 : json으로 돌아옴 => DB에 CRUD를 잘 해주면 됨.

 - JsonViewer 로 보기 쉽게 보면 잘 보임.

 - 클라이언트가 아래와 같이 url 보내면(요청) 서버에서 DB검색 후 응답

 * url 접근 -> callback 함수로 접근 -> 함수 호출

 * 글목록 가져오기

 - listposts라는 함수 안에 json이 들어있는 것. jsonp -> callback으로 listposts 호출하는 것.

 => https://apis.daum.net/blog/post/list.do?blogName=androidsam&output=json&callback=listPosts

 - XML로 만들 때??

   channel:{

status:"200",

totalCount:3,

   }

   <channel>

     <status>200</status>

     <totalCount>3</totalCount>

   </channel>

  => json에 비해서 닫는 태그가 많아서 트래픽이 많이 발생함

 - index.html에 쓰는 법

 <script src="https://apis.daum.net/blog/post/list.do?blogName=androidsam&output=json&callback=listPosts"></script>

 </body>

 - 접근방법 : js파일에서 

function listPosts(data){

//console.log('data', data);

var items = data.channel.item;

console.log('items', items);

}

 * JSON(Javascript Object Notation)

 - json.org

 - json의 창시자가 만든 사이트, json을 가장 잘 보여주는 사이트

 * 글 내용 가져오기 (글하나)

 - xml 방식으로 가져오기

 - https://apis.daum.net/blog/post/read.do?blogName=androidsam&postId=3

 + output=json 방식으로 가져오기

 - https://apis.daum.net/blog/post/read.do?blogName=androidsam&postId=3&output=json

 + callback=?으로 가져오기

 - ?의 의미는 익명함수 : 아무것도 호출 안하는게 아니라 개발자가 알아서 호출하도록 함 / 함수 이름이 없는 함수를 호출함

 - https://apis.daum.net/blog/post/read.do?blogName=androidsam&postId=3&output=json&callback=?

 * youtube에 동영상 올린 것 가져오기

 - http://gdata.youtube.com/feeds/api/users/GoogleDevelopers/uploads?alt=json-in-script&callback=listVideos

 5. Mobile Web

 - HTML5/CSS3/Javascript => <= Nodejs, MongoDB(JSON으로 저장, Javascript)

 6. Java / JS

 * Java

 - 명시적 자료형

 - int a=10;

 - a = "hello"; (빨간줄생김)

 * JS

 - ONLY var!!

 - var i = 10;

 - i = "hello"; (빨간줄안생김)

 => 변수 선언 시 형식 상관없이 다 넣을 수 있음.

 * sublime text

 - ctrl+/ = 주석

 - ctrl+화살표 = 줄이동 = ctrl+x => ctrl+v

 * 2번 이상 반복되면 변수에 넣는게 좋음