블로그 이미지
윤영식
Frontend Application Architecter, Full Stacker, KnowHow Dispenser and Bike Rider

Publication

Statistics Graph

Recent Comment

AngularJS는 구글이 후원하고 있고 2013년 구글I/O에서도 2개의 세션에서 소개가 될 정도로 관심이 높은 차기 웹 클라이언트단의 애플리케이션 개발을 위한 프레임워크이다. MVC -Model View Controller - 기반으로 역할을 나누고, SoC (separate of concer)이라는 관심의 분리를 위하여 모듈에 대한 DI (Dependency Injection)을 사용한다. 




1. AngularJS 어떻게 배워야 하지?

  - AngularJS에 대한 개념적 이해와 익히는 방법을 알아보자 

  - 전반적으로 다시 한번 복습해 보고

  - 이젠 AngularJS만의 길을 가보자 



2. AngularJS 스케폴딩 둘러보기 

  - SmartVisualization/app 폴더는 다음과 같다 

    + index.html : 최초 호출 페이지

    + bower_components : bower에 의해서 설치된 client에서 사용하는 library들. 

       bower 를 통해 install 하면 JavaScript 링크가 index.html에 자동 삽입된다 

    + scripts : angular javascript 파일 폴더들 

    + views : angular의 template 파일은 .html 확장자이다. 보통 partial 파일이라고 한다

       


  - index.html 가 메인 페이지이다 

    + ng-app 를 통하여 AngularJS 애플리케이션 명칭을 정의

    + ng-view 는 views 폴더의 partial html이 표현되는 영역이다. DOM을 보게 되면 해당 영역만 변경이 이루어 진다 

    + app.js 가 AngularJS의 메인 수행 파일이고 일반적으로 partial view에 대한 routing을 정의한다 

    + controller/main.js 은 AngularJS의 컨트롤러 파일이다. partial html 파일이 여러개 있더라도 동일한 controller를 사용할 수 있다. 

<!doctype html>

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->

<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->

<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->

<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title></title>

    <meta name="description" content="">

    <meta name="viewport" content="width=device-width">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->


        <!-- build:css(.tmp) styles/main.css , 부트스트랩의 RWD까지 적용되어 있다 -->

        <link rel="stylesheet" href="styles/bootstrap.css">

        <link rel="stylesheet" href="bower_components/bootstrap-sass/bootstrap-responsive-2.3.2.css">

        <link rel="stylesheet" href="styles/main.css">

        <!-- endbuild -->

</head>

  <!-- yo angular:app SmartVisualization 명령수행으로 App 접미어를 붙여서 프로젝트 명칭을 만들었다 --> 

  <body ng-app="SmartVisualizationApp">

    <!--[if lt IE 7]>

      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>

    <![endif]-->


    <!--[if lt IE 9]>

      <script src="bower_components/es5-shim/es5-shim.js"></script>

      <script src="bower_components/json3/lib/json3.min.js"></script>

    <![endif]-->


    <!-- Add your site or application content here : ng-view 영역이 실제 partial html 파일로 대체되는 영역 -->

    <div class="container" ng-view=""></div>


    <!-- angular.js 자체에 light jquery를 내장하고 있지만 정식버전 jquery를 사용하고 싶다면 

          하기와 같이 angular 위에 놓으면 된다 -->

    <script src="bower_components/jquery/jquery.js"></script>

    <script src="bower_components/angular/angular.js"></script>


        <!-- build:js scripts/plugins.js, 사용하지 않는 부트스트랩 자바스크립트는 제거한다 -->

        <script src="bower_components/bootstrap-sass/js/bootstrap-affix.js"></script>

        <script src="bower_components/bootstrap-sass/js/bootstrap-alert.js"></script>

        .. 중략 ..

        <script src="bower_components/bootstrap-sass/js/bootstrap-scrollspy.js"></script>

        <script src="bower_components/bootstrap-sass/js/bootstrap-collapse.js"></script>

        <script src="bower_components/bootstrap-sass/js/bootstrap-tab.js"></script>

        <!-- endbuild -->


        <!-- build:js scripts/modules.js -->

        <script src="bower_components/angular-resource/angular-resource.js"></script>

        <script src="bower_components/angular-cookies/angular-cookies.js"></script>

        <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>

        <!-- endbuild -->


        <!-- build:js({.tmp,app}) scripts/scripts.js, 업무적으로 추가되는 파일은 이곳에 넣는다

              단, yo 명령으로 controller 또는 service를 생성하면 자동으로 파일명이 추가된다  -->

        <script src="scripts/app.js"></script>

        <script src="scripts/controllers/main.js"></script>

        <!-- endbuild -->

</body>

</html>


  - AngularJS 메인 애플리케이션 파일인 app.js 을 보자 

    + module : ng-app에서 정의한 SmartVisualizationApp 명칭이 들어가고 

      [] 에는 별도로 파일을 구분하였다면 의존관계에 있는 모듈을 정의 한다 

    + templateUrl : index.html 위치에서 partial html 상대위치를 정의한다 

    + controller : main.html 안의 model 제어를 위한 controller명칭을 정의한다 (controller/main.js 소스에 정의된 컨토롤러 명칭)

    + redirectTo : http://localhost:9000/ 을 넣으면 무조건 views/main.html이 보여지도록 그외의 url에 대한 redirect를 정의한다 

'use strict';


angular.module('SmartVisualizationApp', [])

  .config(function ($routeProvider) {

    $routeProvider

      .when('/', {

        templateUrl: 'views/main.html',

        controller: 'MainCtrl'

      })

      .otherwise({

        redirectTo: '/'

      });

  });


  - main.html 은 partial html 파일이다   

    + 이곳에 이동평균에 관련된 view가 정의될 것이다 

<div class="hero-unit">

  <h1>'Allo, 'Allo!</h1>

  <p>You now have</p>

  <ul>

      <li ng-repeat="thing in awesomeThings">{{thing}}</li>

  </ul>

  <p>installed.</p>

  <h3>Enjoy coding! - Yeoman</h3>

</div>



3. index.html 메인 뷰페이지 RWD 수행

  - RWDResponsive Web Design의 약어로 반응형 웹 디자인이라고 한다. 

    RWD의 목적은 사용자에게 최적의 뷰 경험을 제공하는데 있다. 

    웹 서비스를 만들 때 중요한 요소로 검색엔진 최적화, 웹 접근성, 반응형 웹 디자인을 필수로 고려해야 한다. (참조

  - RWD는 시각화 표현에 대한 부분이고 웹에서는 CSS가 이를 담당하며, 가장 유명한 CSS Framework으로 Twitter Bootstrap이 있다

    하지만 Bootstrap 이외에 GroundWorks, Zurb Foundation, Amazing Web Library 들도 있으니 구미에 맞는 것을 선택한다.

  - Bootstrap을 사용하게 되면 몇가지 유용한 도구와 서비스들이 있다. 

    여기서는 Bootstrap 기반으로 화면의 Layout을 만들어 주는 Bootply를 사용한다 

 


  - 화면에서 가운데 메뉴 "Drag-and-Drop"을 선택하면 팝업창에서 3가지 Layout 옵션이 나온다. 여기선 "Simple"을 선택한다

  

  

  - Editing 화면에서 내역을 수정하고 상단의 "Run"을 클릭하면 변경 내역을 다양한 기기 해상도로 테스트해 볼 수 있다 

    + yo angular는 bootstrap 2.3* 기반이니 주의한다. Bootply는 boostrap v3.*도 지원한다 (default v2.3*)

  


  - Bootply의 html 내역중 메뉴 관련 내용을 copy하여 index.html에 추가한다

    ng-view 부분에 main.html 내역이 표시될 것이다 

// index.html 추가 부분

<body ng-app="SmartVisualizationApp">

    <!--[if lt IE 7]>

      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>

    <![endif]-->


    <!--[if lt IE 9]>

      <script src="bower_components/es5-shim/es5-shim.js"></script>

      <script src="bower_components/json3/lib/json3.min.js"></script>

    <![endif]-->


    <div class="navbar navbar-inverse navbar-fixed-top">

      <div class="navbar-inner">

        <div class="container">

          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

          </button>

          <a class="brand" href="#">Smart Visualization</a>

          <div class="nav-collapse collapse">

            <ul class="nav">

              <li class="active"><a href="#">Home</a></li>

              <li><a href="#about">MovingAverage</a></li>

            </ul>

          </div><!--/.nav-collapse -->

        </div>

      </div>

    </div>


    <!-- Add your site or application content here -->

    <div class="container" ng-view=""></div>


  - main.html 전체 내역을 다음과 같이 바꾼다. bootstrap의 container css class로 감싸준다. 

    app.js에서 루트 '/' 호출은 /views/main.html 로 라우팅되므로 index.html의 ng-view에서 main.html 보여지게 된다 

<div class="container">

  <h1>Smart Visualization Service</h1>

  <p>

    Job Less, Feel More - 인위적인 작업을 적게 하면 더 행복해 질 수 있다고 믿습니다.<br> 

    단순 파일 업로드만으로 데이터 통계를 미려한 차트로 표현해 드립니다.<br>

    .csv 파일에 시간과 수치값만 있다면 SVG Chart로 통계 변환 수치를 보여드립니다

  </p>

  

</div> <!-- /container -->


  - 변경 내역을 저장하고 확인해 보자 

$ grunt server


// 브라우져 사이즈를 줄여보면 RWD 경험을 제공한다 



<참조>

  - 견고한 Web Applicatoin을 만드는 방법 with AngularJS

  - Think in AngularJS Way : 접근 방법에 대한 조언

  - Bootstrap Layout 전문 서비스 Bootply

  - Boostrap기반의 유용한 도구와 서비스들

저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식
2013.05.09 23:19 HTML5, CSS3/CSS

RWD는 Responsive Web Design (반응형 웹 디자인)을 일컸는다. 어떻게 시작해야 할지 경험한 내용을 정리해 본다. 먼저 http://www.unitedpixelworkers.com 사이트를 들어가서 브라우져 사이즈를 모바일 기기 크기 - 스마트폰, 테블릿 - 로 변경하여 본다. 반응형 웹 디자인이 무엇인지 감상해 보시길...



1. 개념잡기 

  - RWD의 기초 개념이해

    + Fluid images  : img{ max-width: 100%, height: auto }

    + Fluid Grid : fluid-container안에서 움직임. 해상도에 따라 floating 

    + Media Queries : @media screen and {max-width: 980px} , 다양한 기기의 해상도에 따른 화면 사이즈 변경

  - Font Responsively : 폰트를 픽셀로 할지 %로할지 em으로 할지에 대한 반응형 폰트. %로 한다 

  - Fluid Layout : Fixed 에서 Fluid(Liquid) 로 변화 이젠 Hybrid layout으로 간다 

  - Custom Grid Layout : div[ float: left, width:200px }, header, content, sidebar, footer의 구분예

  - Responsive Imagery : 모바일 속도 향상을 위하여 이미지도 minify

  - Browser Compatibility : 브라우져 호환도 중요


  반응형 웹 디자인은 각 경우에 충족하는 디자인이 되었는지 살펴 보아야 한다. 



2. 반응형 패턴

  - 반응형으로 만들기 위한 패턴을 익힌다 : Responsive Patterns

    + Layout : 전체 위치 잡기

    + Navigation : 메뉴 구조화 하기 

    + Image : 이미지

    + Media : 비디오

    + Forms : 입력 제출

    + Modules : 기타 위젯들

  - Creating a Mobile-First Responsive Web Design : 실제 간단한 실습을 해본다  



3. 개발자가 사용할 도구 & 소스

  - Twitter Bootstrap

    + 가장 많이 사용하는 CSS, Widget 이면서 Responsive 지원 

    + 부트 스트랩 어떻게 사용하는지 프로토 타입핑해 본다  

    + Wrap Bootstrap 사이트에서 Bootstrap을 어떻게 확장했는지 보자 (상업용 구매 사이트) : 전부 반응형 웹 디자인 템플릿

       외국의 퍼블리셔는 그래픽 작업 및 RWD를 위한 HTML5 & CSS3 그리고 기본 jQuery 자바스크립트 코딩을 한다!!!

       솔루션 개발에 많이 참조하고 있는 사이트이다. 

    + Bootstrap 가지고 서비스를 만드는 회사들이 존재 : http://www.layoutit.com/

  - Zurb Foundation

    + 사이트 제작에 적합하다고 판단 됨

  - Gumby Framework 

    + RWD를 기반의 웹사이트 제작 프레임워크 

  - 그외 RWD를 위한 도구들 (필독)

  - 깃헙에서 rwd 또는 Responsive 로 검색하면 개발자들이 만들어 놓은 간혹 괜찮은 RWD들이 올라와 있다

    + Iacien Collapsible Menu

  - 15개의 신규 CSS Frameworks



<참조> 

  - 반응형 웹 디자인의 이슈 : 우리나라 어느 퍼블리셔 발표 자료 

  - 10 가지 쥑이는 RWD 예제 사이트

  - Responsive Design 프리젠테이션

  - ViewPort에 대한 이해

  - ViewPort와 Media Queries의 적용 예제 및 데모

  - RWD 연재 글 2편 : RWD 어디에 사용할까?

  - SpeckyBoy - RWD 웹사이트 만들기 with Gumby

저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식
prev 1 next