ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 20140324 HTML5
      WEB 2014. 3. 24. 23:22
      반응형

      오늘은 간략히 이론을 다지는 시간을 가졌다.

      코딩만 해오던 것들의 개념을 파악하니 좀 더 명확해지는 기분이 들었다.


      글구 같이 공부하는 사람들 다 좋은 사람들 같다 ^-^

      배부 받은 유인물대로 나가는게 아니라서 필기가 좀 두서 없을 수도 있습니다ㅠㅠ


       - 박성백 선생님(blog.naver.com/sungback)

       

      1. 공부 TIPS

       - 신기술 : 미리 배워놔야 남들과 똑같은 선상에서 시작가능

       - IT 공부는 미리미리 해놔야된다. 뒤쳐지면 따라잡기 힘듬.

       - 소스를 오픈해야 발전이 있음. 주위 고수들의 피드백이 중요함.

       - 프로젝트 : 기획->디자인->서버->클라이언트 개발 순이 가장 좋음

         프로토콜정의서 제작함 : 기능 넘겨준다->~들어올때 데이터 넘겨준다, 클라이언트에서 ??을 했을 때 가상데이터 처리 후 서버 먼저 끝내고 어떤 처리를 할지 정하는 문서

         안드로이드 = jquery mobile + 폰갭(폰에 올라가는 공식)

       - 구글 트렌즈 : 검색어를 쉼표로 넣어주면 통계치를 나타내줌 (검색수)


      2. IT 지식

       - 페이팔 : 개인정보 등록 후 원클릭 결제. NodeJS로 갈아탐. 효율/능률 UP!

       - 클라이언트에게 기간 말할 때 부풀려서 말하는게 좋음. 

       - Java 8버전, 람다 : 다른 언어 가져가 쓸 수 있음

       - 반응형 웹디자인 : 기기에 따라서 다르게 표시되는 것

       - 액티브X를 버려야 함. 전세계에서 뒤쳐지는 것. -> 페이팔같은 것을 써야함

       - 빅데이터 : RDB로 할 수 없음. EX) 구글검색 : 빅테이블로 만들어서 가져옴

         RDB(로그정보 다 버린 것) / NOSQL(이젠 로그정보 다 저장)

        NOSQL 장점 : 1초에 2만개 까지 저장 가능. 대기업 등은 저장해서 데이터를 활용함, 이게 서비스로 직결됨(단골고객관리) 

        NOSQL 단점 : Transaction이 안됨. 인서트하다가 하나하나 없애야함. 

         그래서 RDB와 NOSQL을 혼용해서 사용함

       - 크롬이 빠른 이유 : 자바스크립트를 기계어로 빠르게 돌려줌 (NODEJS에도 있는 V8엔진)  

       - 마크주커버그 HTML5버림(느리다고) -> 네이티브로 갈아탐 -> 생차에서 html5쓰는 fastbook 만듬

       - c언어 처음엔 홀대 -> c만쓰다가 -> java 강세 : c보다 100배 느리지만 한 번 만들면 계속 쓸 수 있다

       - Font-End 개발 : 눈에 보이는 앞단

         Back-End 개발 : ASP, JSP, PHP

       * 웹표준을 지켜야하는 이유 : 모든 사람이 웹에서 평등해야한다.

          사회적 약자들이 웹브라우저를 사용할 때 웹 표준에 따라서 제작해야 보조적 기능을 제공 받을 수 있음 ex)시각장애인 - 음성가이드


      3. NodeJS

       - NodeJS는 제공되는 프레임워크를 가져다쓰면 코드 몇 천 줄 절약가능.

       - [nosql]-><-[Ajax/노드] 응답-><-요청 [스마트폰]

       - 요청 시 맞는 json을 던져줌

       - 웹소캣(노드js가 지원) ex) 실시간 자리 예매, 채팅

       - 서버사이드 : 노드js로 제작 / 클라이언트 사이드 : 안드로이드 등으로 제작


      4. JSON

       - MongoDB 에서 사용


      5. 모바일웹앱

       - 다름 : 네이티브앱 - 안드로이드, Objective-C 언어로 개발한 것, 고정형, ex)회원가입폼

                   모바일웹 - HTML5, CSS3, 웹페이지, 동적, ex) 도움말, 공지 등 변경적용 가능하도록 함

       - 안드로이드/아이폰 등 모든 플랫폼을 수용하기 힘듬.

       - HTML5면, 어떤 플랫폼이든 사용할 수 있음. 에디터만 있으면 만들 수 있음.

       ex) 네이버, 다음 -> 네이티브 같이만 네이티브가 아님

       - 구글 : 안드로이드 < 크롬OS

       - 폰갭(어도비) : HTML, CSS3를 폰갭으로 감쌈 => .apk, .ipa 가 만들어짐

        ex) 위치정보, 주소록, 사진올리기 (하드기능) => 이런 하드 기능을 많이 쓴다면 네이티브앱이 딱임.

       - 하이브리드앱 = 모바일 + 웹 / 네이티브 + 웹뷰 / 네이티브 + 모바일웹앱 + 웹뷰


      6. 웹 구조

       - HTML(M) + CSS3(V) + Javascript(C)

       - MVC = Model + View + Controller

       - Model(데이터, 값, 정보)

       - View(Presentation, 어떤 모습으로 보일까?, 왼/오정렬)

       - HTML: 알몸 / CSS : 옷 / Controller : 행동


      7. HTML5

       - 화면에 보이는 모습이 아니라 태그가 의미하는 바

       - <H1> 제목 </H1> : 큰글씨X, 대제목/강조의 의미

       - <B> XXX </B> : 굵게X->CSS, 강조-> HTML

       - <I> XXX </X> : 이텔릭X

       - 웹 : SGML -> HTML : 링크타고 전 세계 HTML 문서들이 연결되는 것

       - SGML->HTML(Hypertext Markup Lang, 덜엄격, 브라우저마다 보여지는 모습이 다름 ex)<br >)

                   ->XML(Extensible Markup Lang, 엄격, 50개 이상의 HTML을 만들어쓰자.)

                   ->HTML+XML => XHTML 더 엄격한 HTML EX)<BR />

       - 공식HTML 관리기관 : W3C : World WideWeb Consortium)
       - IE6 ->7년만에 IE7 / 크롬, 파폭 등 신예들의 등장과 웹표준을 지키지 않아 엉망진창인 IE의 점유율 하락
          IE9 : HTML5, CSS3 잘 적용 됨.
       * DOM(Document Object Model) : HTML에서 문서를 다른 프로그램 방식에서 객체로 관리한다. 트리형태. 웹브라우저가 HTML을 해석하는 방법.
         ROOT HTML 태그
                   |
          BODY / HEAD
             |          |
           ....        .....
       - HTML4/HTML5 와 차이

       <div id="head"></div>

      <div id="section">

        <div id="article1"></div>

        <div id="article2"></div>

      </div>

      <div id="footer"></div>

       - 직관적, 간소함

       
      <head></head>

      <aside></aside>

      <section>

        <article></article>

        <article></article>

      </section>

      <footer></footer>

       - 스토리지(200mb) vs 쿠키(4mb) : 구글 메일은 offline web app으로 스토리지(offline)에 저장했다가 온라인으로 전송함, 인터넷 끊어져도 전송 가능. db부하를 줄일 수 있다.


      8. Client Side/Server Side

       - 옛날엔 메인프레임, 오직 서버와 단말기가 이어져 있었음

       - PC -> 서버/디비만 있음, 단말기는 서버의 디비 사용이 안 됨

       - 웹 -> 서버/디비 있고, 단말기는 서버의 디비를 꺼내서 씀 (웹브라우저로)

       - 모바일 -> 서버에 있는 것 갖다가 사용

       - 웹의 시대가 다시 돌아올 것


       9. Ajax

       - 서버 간 통신. 서버의 데이터를 Json 방식으로 가져옴

       - ex) 자동완성, nodejs, 모바일웹앱

       - 통신 : 요청(Request)/응답(Response)가 핵심. 예전엔 페이지/요새는 Json

      ex) 메일 읽을 때 상단/본문/하단 => 메일본문은 서버에서 가져옴


      10. 프레임워크

       - 라이브러리와 차이 : 라이브러리는 망치, 톱 등의 공구(원래목적+내목적 변형가능)

         프레임워크는 포크레인 (시동-> 운전, 정해진 방향대로만 써야 됨)

       - JQuery Mobile : M+V+C vs  샌차 : javascript만 씀

       - JQuery Mobile 장점 : html5, css, javascript만 알면 쓸 수 있음

          단 : 많은 걸 표현할 수 없음

       - 샌차 : 장점 : 다양한 걸 표현할 수 있음 -> fastbook

                   단점 : 많이 공부해야됨. 

       - ex) 프레임워크 :  jquery, 앵귤러JS(구글), Underscore, 센챠 / 라이브러리 : backbone...

       <대세를 따르라> : jquery mobile, angularjs, jquery => activex 사라지면 자바스크립트가 모든 사이트에서 사용되어야 함




      반응형

      'WEB' 카테고리의 다른 글

      14.03.28 쓰레드 & 자바 & 폰갭  (0) 2014.03.28
      140326 Jquery Mobile 실습  (0) 2014.03.26
      140325 Jquery Mobile, CSS  (0) 2014.03.25

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바