-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
103 lines (57 loc) · 36.1 KB
/
atom.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>날라랑 개발기록</title>
<subtitle>개발,기술트렌드,전자기기,기타 꿀정보 남기기</subtitle>
<link href="/atom.xml" rel="self"/>
<link href="http://nalrarang.github.io/"/>
<updated>2018-08-17T07:54:41.000Z</updated>
<id>http://nalrarang.github.io/</id>
<author>
<name>Nalrarang</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>Javascript의 자료형</title>
<link href="http://nalrarang.github.io/2018/06/10/javascript-data-type/"/>
<id>http://nalrarang.github.io/2018/06/10/javascript-data-type/</id>
<published>2018-06-09T15:00:00.000Z</published>
<updated>2018-08-17T07:54:41.000Z</updated>
<content type="html"><![CDATA[<h2 id="Javascript의-자료형"><a href="#Javascript의-자료형" class="headerlink" title="Javascript의 자료형"></a>Javascript의 자료형</h2><p><img src="https://s3-ap-northeast-1.amazonaws.com/media.buzzni.net/blog/js2.jpg" alt="alt_text"></p><p>Javascript는 6가지의 Primitive 데이터 타입과<br>Object 타입의 자료형을 사용한다.(총 7가지 Type)</p><p>Primitive 타입으로는</p><ul><li>Boolean Type</li><li>Null Type</li><li>Undefined Type</li><li>Number Type</li><li>String Type</li><li>Symbol Type<br>이 있고, 그외의 복합적인 자료형으로 Object Type이 따로 있다.</li></ul><h3 id="Primitive-Type"><a href="#Primitive-Type" class="headerlink" title="Primitive Type"></a>Primitive Type</h3><p><strong>Primitive타입은 원시 자료형</strong>이라고 하며<br>값이 유한하고 Immutable(불변함)을 따른다.<br>또한, 데이터간의 비교가 가능하다.</p><p><strong>Boolean</strong>은 논리요소로 true 와 false로 값을 표현한다.<br><strong>Null</strong>은 말 그대로 Null값으로 빈 값(없는 값)<br><strong>undefined</strong> 는 변수 선언 후 값이 없을 때의 값으로 null과 undefined는 다른것으로 취급해야 함<br><strong>Number</strong>는 다른 프로그래밍언어와 달리 정수, 소수가 다 포함된 숫자의 자료형으로 NaN과 +-Infinity라는 특별한 값을 가지기도 한다.<br><strong>String</strong>타입은 문자열 데이터를 나타내는데 사용하며 +연산자를 이용해 문자열끼리를 합칠 수 있다.<br><strong>Symbol</strong>타입은 ECMAScript 6 에서 새로 추가된 타입으로<br>고유한 특정 값을 말한다. Symbol을 생성하면 고유함을 보장하기 때문에 이름의 충돌과같은 문제를 막을 수 있다.</p><h3 id="Object-Type"><a href="#Object-Type" class="headerlink" title="Object Type"></a>Object Type</h3><p>Object타입은 Primitive 타입을 제외한 나머지 자료형을 말한다.<br><strong>Array, Date, Object, RegExp</strong> 등과 같은 자료형들은 모두 Object타입이며 <strong>Function</strong>도 마찬가지로 Object 타입이지만 typeof함수로 검사했을때 특이하게도 function으로 표시된다.(이유는 저도..모릅니다..ㅠㅠ)<br>모든 Object타입은 Key, Value값을 통해 나타낼수 있고,<br>데이터의 모양을 무한하게 만들 수 있다.<br>또한 같은 값의 배열, 오브젝트라도 각각의 저장된 메모리가 다르기 때문에 데이터 비교를 할 수 없다.</p><h4 id="Reference"><a href="#Reference" class="headerlink" title="Reference"></a>Reference</h4><ul><li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures" target="_blank" rel="noopener">MDN web docs</a></li><li><a href="https://blog.perfectacle.com/2017/04/16/es6-symbol/" target="_blank" rel="noopener">오늘도 끄적끄적님 Blog</a></li><li><a href="http://hacks.mozilla.or.kr/2015/09/es6-in-depth-symbols/" target="_blank" rel="noopener">Hacks-웹기술블로그</a></li></ul>]]></content>
<summary type="html">
<h2 id="Javascript의-자료형"><a href="#Javascript의-자료형" class="headerlink" title="Javascript의 자료형"></a>Javascript의 자료형</h2><p><img src="https://
</summary>
</entry>
<entry>
<title>버대리 React 개발기</title>
<link href="http://nalrarang.github.io/2018/05/23/buzznidaily-react-diary/"/>
<id>http://nalrarang.github.io/2018/05/23/buzznidaily-react-diary/</id>
<published>2018-05-22T15:00:00.000Z</published>
<updated>2018-05-23T08:40:57.000Z</updated>
<content type="html"><![CDATA[<h2 id="버대리-React-개발기"><a href="#버대리-React-개발기" class="headerlink" title="버대리 React 개발기"></a>버대리 React 개발기</h2><p>안녕하세요 버즈니에서 프론트엔드 개발을 하고 있는 에반입니다.<br>올해가 되면서 회사가 주 40시간 근무 할당제가 되면서(<del>버즈니 좋아요</del>)<br>직원들의 출,퇴근 관리 시스템이 필요하게 되어 사내 토이프로젝트 형식으로<br>사내 근태 관리 시스템을 만들게 되어 그 개발기를 한번 적어보고자 합니다.</p><h3 id="개발-스택"><a href="#개발-스택" class="headerlink" title="개발 스택?"></a>개발 스택?</h3><p>처음 프로젝트를 시작하게되면서 React는 무조건 사용해야겠다고 생각했습니다.<br>현재 서비스하고 있는 홈쇼핑모아에서는 사실상 적용하기에 무리가 있었고 백오피스 관리자쪽에서만 작년부터 조금씩 공부하여 일부 적용해보는 상태였는데 마침 이 프로젝트가 똭 나타나면서 그동안 공부했던 내용을 써먹어보자 생각하게 되면서 결정하게 되었습니다.</p><p>프로젝트는 직원들이 자신의 출근 및 퇴근,외출과같은 액션을 수행할수있는 Client,<br>인사관리자가 직원들의 출근기록을 볼 수 있고 수정 및 편집이 가능한 CMS,<br>그리고 이 모든 행동들을 기록하고 볼 수있도록 해주는 API<br>세분류로 나누어서 개발을 진행하게 되었습니다.</p><p>결정된 프로젝트의 개발스택은 이렇습니다.<br>Client - React, Typescript, Webpack, ES6<br>CMS - React, Redux, Webpack, ES6<br>API - Flask…어..음..</p><h3 id="어떤게-필요한가"><a href="#어떤게-필요한가" class="headerlink" title="어떤게 필요한가?"></a>어떤게 필요한가?</h3><p>먼저 필요로 하는게 무엇인지를 알고자 인사담당자에게 필요로하는 기능을 최대한 상세히 물었습니다.</p><ul><li>버즈니 구성원이 출근/퇴근/외출/복귀와 같은 액션을 할 수 있어야 한다.</li><li>클라이언트의 대시보드에는 해당 직원의 오늘 일한 시간, 주간 일한 시간을 볼 수있어야 한다.</li><li>클라이언트의 페이지에서 해당 직원의 출근시간을 볼 수 있어야 한다.</li><li>클라이언트 페이지에서 내 지각내역, 야근내역등을 확인할 수 있어야한다.</li></ul><p>이렇게 필요로하는 기능을 큼지막하게 물어본 후에 대충 어떤 모양이 좋을지 레이아웃을 짜고 디자이너의 손을 거쳐 이런 페이지가 나오게 되더군요 짜잔!</p><p><img src="https://s3.ap-northeast-1.amazonaws.com/media.buzzni.net/blog/evan-blog-1.png" alt="alt text"></p><h3 id="본격-React로-개발-삽질-시작하기"><a href="#본격-React로-개발-삽질-시작하기" class="headerlink" title="본격 React로 개발(삽질) 시작하기"></a>본격 React로 개발(<del>삽질</del>) 시작하기</h3><p>React로 개발하게 되면서 국내의 개발 블로그들의 도입기나 React강좌를 많이 보게 되었는데 거의 대부분(한 90%?)이 추천하는 글이 React Docs의 <a href="https://reactjs.org/docs/thinking-in-react.html" target="_blank" rel="noopener"><strong>Thinking in React</strong></a> 라는<br>글이었습니다. 저도 마찬가지로 React 페이지를 안되는 영어로 한번 정독하면서 보게 되었고 다른 블로그에서 강조하게되면서 다시 한번더 자세히 내용을 들여다 볼 수 있었습니다.</p><p>요는 리액트처럼 생각하라는 건데 기존의 개발해왔던 방식을 생각해 보자면(제방식입니다..)<br>먼저,<br>1) 전체적인 HTML 레이아웃을 작성한다.(CSS 작업 포함)<br>2) Javascript와 Jquery를 이용하여 페이지에 필요한 Data를 세팅해준다.<br>3) 페이지에서 일어나는 Action(Event?)에 대한 Listener함수를 만들어 jquery를 활용하여 적절하게 액션에 맞는 DOM조작을 해준다.</p><p>이렇게 3단계로 분류하여 보통 Frontend를 개발하는게 내 기존방식이었다면,</p><p>React같은경우는,<br>1) 화면을 작은 컴포넌트 단위로 나누기<br>2) Prop를 통한 단방향의 정적 버전 만들기<br>3) 작은 State부터시작해 전체 State의 적용<br>4) 역방향 데이터 흐름 추가</p><p>의 4단계방식으로의 개발 방식을 말해줍니다.<br>사실 사전 준비로 목업 데이터를 준비하라는 말이 있는데,<br>지금 하고있는 프로젝트가 딱히 목업용 데이터를 만들정도의 규모는 아니었기에 그냥 진행했습니다.</p><h4 id="Step1-화면을-작은-컴포넌트-단위로-나누기"><a href="#Step1-화면을-작은-컴포넌트-단위로-나누기" class="headerlink" title="Step1. 화면을 작은 컴포넌트 단위로 나누기"></a>Step1. 화면을 작은 컴포넌트 단위로 나누기</h4><p>역시 남들이 그러하듯 먼저 그림을보고 큰 화면에서부터 작은 단위까지 최대한 나눌수 있는 만큼 나누는 작업을 먼저 진행하였습니다.<br>그리고 나서 큰 기능으로 나뉘는 부분은 Container로 따로 만들어 두었습니다.</p><p><img src="https://s3-ap-northeast-1.amazonaws.com/media.buzzni.net/blog/evan-blog-2.png" alt="alt text"></p><p>그냥 디자인된 화면만 봤을땐 간단하네라는 생각이 들었는데 막상 나누고 보니 꽤 많았습니다. </p><h4 id="Step2-Prop을-통한-단방향의-정적-버전-만들기"><a href="#Step2-Prop을-통한-단방향의-정적-버전-만들기" class="headerlink" title="Step2. Prop을 통한 단방향의 정적 버전 만들기"></a>Step2. Prop을 통한 단방향의 정적 버전 만들기</h4><p>화면을 컴포넌트 단위로 쪼개고 나서 해야할 일은 바로 부모 컴포넌트로부터 해서 자식에게로 데이터를 넘겨주는 것입니다. (부모에서 자식으로만 데이터를 전달 하기 때문에 단방향입니다.)<br>이 과정을 Prop값을 넘겨준다고 하는데 예를 들자면,<br>위의 화면을 봤을 때 ‘임근화 정상출근’이라는 데이터가 오려면 서버에서 이 사람이 제대로 출근했는가를 판단해서 데이터를 API형태로 전달해주게 됩니다.<br>이런 데이터를 해당 컴포넌트(화면상 Status컴포넌트)에서 호출해서 가져오는 방법도 있겠지만 그렇게 되면 View에만 집중하던 Component의 영향이 Data쪽에도 신경쓰게되면서 복잡해지기에 보통은<br>상위에서 데이터를 처리한 후에 필요한 자식 Component로 Prop를 통해 전달하게 됩니다.<br>저는 MainContainer라는 Container를 하나 만들어서 API로 받는 데이터를 입맛에 맞도록 가공한 후 Prop으로 전달하는 방법을 썼습니다.</p><p>이전에 React로 개발했을때 가장 많이 겪었던 문제중 하나가 Props로 받은 데이터값을 착각해 나오는<br>TypeError였습니다. 이번에 그런 문제를 방지하고자 Typescript를 도입해봤는데 처음 interface를 미리 작성할때는 굉장히 귀찮고 이걸 왜쓰지라는 생각을 했었습니다.<br>그리고 그 이후에 cms버전을 할때는 redux를 사용하면서 Typescript랑 같이 사용하기가 너무 복잡하여<br>제외하고 개발했었는데 그때서야 왜 Typescript가 좋은지 체감이 되고 확실히 타입체킹만으로도 오류가 많이 발생 안하는것을 느낄수 있었습니다.<br>따로 깊게 Typescript를 공부해보거나 다뤄보지는 않았지만 이런 에러의 방지목적만으로도Typescript로의 개발선택은 좋은 것 같습니다. </p><h4 id="Step3-작은-State부터-시작해-전체-State를-적용하기"><a href="#Step3-작은-State부터-시작해-전체-State를-적용하기" class="headerlink" title="Step3. 작은 State부터 시작해 전체 State를 적용하기"></a>Step3. 작은 State부터 시작해 전체 State를 적용하기</h4><p> Component내에서 사용될 데이터를 저장하거나 데이터가 이벤트나 액션에 따라 바뀔때 이러한 상태를 state라는 곳에 저장하고 변경하고 갱신하도록 합니다.<br> 저는 props가 부모로부터 데이터를 받는거라면 state는 받은데이터 또는 생성된 데이터를 보관하는 거라고 생각했습니다.<br>버대리의 경우 액션이나 이벤트가 많지않아서 거의 대부분은 props로 받은 값을 보여주기만 하면되는 구조입니다.<br>따라서, 원래는 가장 작은 단위의 Component부터 State가 필요한가를 보고 작성하면서<br>가장 최상위까지 State를 적용하라고 되어있지만 실제로 State를 작성한 부분은 3~4군데 밖에 되지 않기에 저같은 경우는 그냥 필요한 부분만 State를 사용했습니다. </p><p><img src="https://s3-ap-northeast-1.amazonaws.com/media.buzzni.net/blog/evan-blog-3.png" alt="alt text"></p><p>문제는 얘가 달려야 된답니다..ㅠㅠ <del>나도 뛰쳐나가고싶다..</del><br>아무튼 쟤를 달리게하기 위해 처음에는 react-spirite-animation이나 image-animation 관련 라이브러리를 찾아봤는데.. 원하는 기능이 없거나 typescript가 지원되지 않아 직접 만들어야 되는 상황이<br>왔습니다.<br>(React 라이브러리인데 Typescript지원을 하지 않으면 어떻게 써야 하죠..?)<br>어차피 여러장의 이미지를 바꿔가면서 보여주기만 하면 되는 거였기 때문에 Runner라는 컴포넌트 내에<br>state를 만들고 FrameNo(현재 프레임 번호) , FrameTime(한 프레임당 시간값), animationState(애니메이션 상태)라는 상태를 만들었습니다.<br>그리고나서 props로 현재 유저의 상태를 받아와 ‘출근’ 상태가 되면 애니메이션의 상태를 run으로 바꿔주고 해당하는 프레임수나 시간값도 미리 지정해둔값으로 변경해줍니다.<br>그리고 setTimeout 함수를 이용해 프레임 시간값마다 frame번호를 하나씩 올리면서 이미지를 바꿔주면</p><p><img src="https://s3-ap-northeast-1.amazonaws.com/media.buzzni.net/blog/evan-blog-4.gif" alt="alt text"></p><p>짠 얘가 이렇게 달립니다..뭔가 뿌듯합니다..</p><h4 id="Step4-역방향-데이터-흐름을-추가"><a href="#Step4-역방향-데이터-흐름을-추가" class="headerlink" title="Step4. 역방향 데이터 흐름을 추가"></a>Step4. 역방향 데이터 흐름을 추가</h4><p>React는 단방향으로 데이터를 전달하는데 왜 이런 단계가 있지? 라는 생각을 처음에 했습니다.<br>그런데 만들다보니 이해가되는게 사용자의 input을 담당하는 컴포넌트에서 저장한 데이터를<br>또 다른 어딘가의 컴포넌트에서 사용되어야 한다면 하단부터 다시 위로 데이터를 전달하여<br>최상위까지 간다음 다시 필요로하는 컴포넌트로 받은 데이터를 props로 전달해야합니다.<br>버대리 프로젝트에선 아래 하단의 출근, 퇴근, 외출, 복귀 버튼을 눌렀을때 이런 상황이 나타났는데<br>아래 버튼 액션에 따라서 위의 그림과 상태값이 바뀌어야 합니다.</p><p><img src="https://s3-ap-northeast-1.amazonaws.com/media.buzzni.net/blog/evan-blog-5.png" alt="alt text"><br>데이터가 돌고돌고돌다보면 저도 돕니다..</p><p>가령 ‘’퇴근’’버튼을 누르면 ‘’퇴근’’이라는 상태값을 최상위로 보내고 최상위에서 다시 Runner 컴포넌트와 Status 컴포넌트로 보내 데이터의 변경을 알려주면 해당하는 애니메이션과 상태값으로 바뀌도록 합니다. 버대리같은 경우는 그렇게 복잡한 구조가 아니어서 어려움없이 처리하였지만,<br>규모가 큰 프로젝트나 컴포넌트간의 데이터를 사용하는게 많은 프로젝트라면 데이터의 흐름을 처리하는데 오히려 복잡하고 어려워질수 있다고 생각했고 이런 생각들이 다음 프로젝트인 cms 버전 에서는<br>Redux를 도입하는 계기가 되었습니다.</p><p>이렇게 단계별로 개발하면서 당시에는 무엇이 좋은지 전혀 느끼질 못했습니다.<br>그러나 완성 후 피드백 반영과 유지보수에서 많은 장점들이 드러나기 시작했습니다.</p><ul><li>코드가 깔금해지고 일원화됨</li><li>Component 단위로 쪼개져있어 문제가 있을때 해당하는 부분을 찾기가 쉽다.</li><li>ES6문법으로 외부 라이브러리 import의 편리함</li><li>타입스크립트의 도입으로 인한 생산성 향상 및 변수값의 예측</li><li>Component 의 재사용성증가</li></ul><p>와 같은 장점들이 있었습니다.</p><h3 id="결론"><a href="#결론" class="headerlink" title="결론"></a>결론</h3><p>글로는 설명할 수 없지만 개발하는 기간이 생각보다 꽤 길었고 어려운점도 많아서 그만큼 완성도 있고 제대로 만들어보자라는 생각으로 진행한 프로젝트라 막상 마치고 나니 꽤 많은 뿌듯함이 몰려왔습니다.<br>최근에 Frontend 개발 트렌드들이 빠르게 바뀌어가고 그런 흐름들을 단순히 블로그나 커뮤니티에서만 봐오면서 나랑은 거리가 먼 얘기겠지라고만 생각하다가 직접 이렇게 기회가 되어 만들어보게 되면서 지금까지의 생각을 많이 깰 수 있었던 계기가 되었습니다.<br>뭐 제가 늦은거일수도 있지만 아직도 저처럼 이런 흐름에 편승해 따라가기 어려워 한다거나 두렵다면<br>너무 어렵게 생각하지 말고 일단 도전해보길 권해보고 싶습니다.</p>]]></content>
<summary type="html">
<h2 id="버대리-React-개발기"><a href="#버대리-React-개발기" class="headerlink" title="버대리 React 개발기"></a>버대리 React 개발기</h2><p>안녕하세요 버즈니에서 프론트엔드 개발을 하고 있
</summary>
</entry>
<entry>
<title>Hello World</title>
<link href="http://nalrarang.github.io/2018/05/18/hello-world/"/>
<id>http://nalrarang.github.io/2018/05/18/hello-world/</id>
<published>2018-05-18T05:52:27.000Z</published>
<updated>2018-05-21T05:51:25.000Z</updated>
<content type="html"><![CDATA[<p>Welcome to <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/" target="_blank" rel="noopener">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html" target="_blank" rel="noopener">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues" target="_blank" rel="noopener">GitHub</a>.</p><h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new <span class="string">"My New Post"</span></span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/writing.html" target="_blank" rel="noopener">Writing</a></p><h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/server.html" target="_blank" rel="noopener">Server</a></p><h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/generating.html" target="_blank" rel="noopener">Generating</a></p><h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/deployment.html" target="_blank" rel="noopener">Deployment</a></p>]]></content>
<summary type="html">
<p>Welcome to <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a>! This is your very first post. Check <a href="https://hexo.
</summary>
</entry>
<entry>
<title>Responsive Web Publishing</title>
<link href="http://nalrarang.github.io/2015/08/26/responsiv-web-publishing/"/>
<id>http://nalrarang.github.io/2015/08/26/responsiv-web-publishing/</id>
<published>2015-08-25T15:00:00.000Z</published>
<updated>2018-05-21T05:53:21.000Z</updated>
<content type="html"><![CDATA[<h3 id="1-개요"><a href="#1-개요" class="headerlink" title="1. 개요"></a>1. 개요</h3><p>본 문서는 Responsive web publishing project를 위한 개발 가이드로써 프로젝트를 진행함에있어 고려해야할 요건과 사용 기술에대해 서술하였다. 또한 앞서 진행된 프로젝트 사례를 통해 개발 과정 및 발생했던 이슈를 서술하였다.</p><h3 id="2-호환성"><a href="#2-호환성" class="headerlink" title="2. 호환성"></a>2. 호환성</h3><p>호환성이란 지원할 브라우저의 범위를 말한다. 웹 브라우저 종류 별, 버전 별 지원 기술 및 렌더링 방식이 조금씩 다르기 때문에 브라우저 호환 범위에 따라 공수 산정에도 지대한 영향을 미친다.<br>특히 microsoft사의 internet explorer의 버전에 따른 이슈가 가장 크다. 이슈는 Javascript, css, html5, font-end-framework 4가지로 나뉜다.<br>(오픈소스 플러그인 Modernizer.js를통해 html5 및css최신요소지원여부를검사할수도있다 <a href="http://modernizr.com/" target="_blank" rel="noopener">http://modernizr.com/</a>)</p><h4 id="2-1-Javascript"><a href="#2-1-Javascript" class="headerlink" title="2.1. Javascript"></a>2.1. Javascript</h4><p>Javascipt라 썼지만 사실 jquery에대한 항목이다. 인터넷 익스플로러9를 기준으로 그 이전 버전(6,7,8)은 jQuery 1.x버전대를 사용하고, 9 이후 버전은 jQuery 2.x버전을사용한다.<br>참고) <a href="http://jquery.com/browser-support/" target="_blank" rel="noopener">http://jquery.com/browser-support/</a><br>또한 멋진 웹을 개발 하기 위해 jQuery plugin을 사용 해야 하는 경우 해당 플러그인의 호환성을 확인 해야 한다.<br>해당플러그인의 호환성은 플러그인의 description을 참고하면 된다.</p><h4 id="2-2-Css"><a href="#2-2-Css" class="headerlink" title="2.2. Css"></a>2.2. Css</h4><p>반응형 웹을 개발하는데 있어서 가장 큰 이슈가 되는 항목이다. css코드 및 미디어 쿼리 지원 여부 등을 꼼꼼히 살펴봐야 한다. 여기서 미디어쿼리(Media Query)는 필수적이다.<br>브라우저별 HTML5 및 css 지원현황 참고) <a href="http://fmbip.com/litmus" target="_blank" rel="noopener">http://fmbip.com/litmus</a><br>브라우저별 미디어쿼리 지원현황 참고) <a href="http://caniuse.com/css-mediaqueries" target="_blank" rel="noopener">http://caniuse.com/css-mediaqueries</a><br>스크립트 플러그인을 사용하여 css의 호환성을 높이는 방법도 있다.<br><a href="https://github.com/scottjehl/Respond" target="_blank" rel="noopener">https://github.com/scottjehl/Respond</a></p><h4 id="2-3-html5"><a href="#2-3-html5" class="headerlink" title="2.3. html5"></a>2.3. html5</h4><p>html5표준이 아직 정해지지 않은 만큼 최신 요소들에 관한 지원여부도 천차만별이다. 반응형 웹을 개발한다는 것은 모바일도 고려하여 개발하는 것이 때문에 html5에 추가된 기능을 사용 하기 전에 지원여부를 꼼꼼히 체크해 봐야 한다.<br>브라우저별 HTML5 및 css 지원현황 참고) <a href="http://fmbip.com/litmus" target="_blank" rel="noopener">http://fmbip.com/litmus</a><br>스크립트플러그인을 사용하여 html5의 호환성을 높이는 방법도 있다.<br><a href="https://github.com/aFarkas/html5shiv" target="_blank" rel="noopener">https://github.com/aFarkas/html5shiv</a></p><h4 id="2-4-Front-end-Framework"><a href="#2-4-Front-end-Framework" class="headerlink" title="2.4. Front-end Framework"></a>2.4. Front-end Framework</h4><p>개발 편의성을 위해 반응형을 지원하는 그리드 기반 Front-end Framework를 많이 찾아보게 된다. 이때 브라우저 지원여부를 꼼꼼히 살펴 봐야 한다. 참고)<a href="http://libsora.so/posts/ie7-responsive-web-framework/" target="_blank" rel="noopener">http://libsora.so/posts/ie7-responsive-web-framework/</a><br>그리고 프레임워크 학습에 많은 시간이 소요 될 수 있기에 이 또한 고려되어야 한다. 예를 들면 각종 기능이 포함되어있는 bootstrap같은경우 처음 접하는 개발자는 개발시간보다 학습시간이 더 소요 될 수 있다.<br>프레임워크가 반드시 사용 되어야 할 필요는 없다. 그저 좀더 편리한 개발을 위한 도구일 뿐 이라는 것을 명심 해야 한다. 자신이 진행할 프로젝트의 특성에 맞게 사용여부를 판단 할 수 있어야 한다.</p><h3 id="3-개발"><a href="#3-개발" class="headerlink" title="3. 개발"></a>3. 개발</h3><h4 id="3-1-조건부-로딩"><a href="#3-1-조건부-로딩" class="headerlink" title="3.1. 조건부 로딩"></a>3.1. 조건부 로딩</h4><p>익스플로러일 경우에만 사용할 수 있는 html 주석 조건문을 이용해 분기를 나누어 선택적으로 스크립트 및 css를 임포트 시킬 수 있다.<br>예)<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><!--[if !IE]> --> // 익스플로러가아닐때 선택됨</span><br><span class="line"><script src="jquery-2.0.0.min.js"></script></span><br><span class="line"><!--<![endif]--></span><br><span class="line"><!--[if lt IE 9]> // 익스플로러 9미만 일 때 선택됨</span><br><span class="line"><script src="jquery-1.9.1.min.js"></script></span><br><span class="line"><![endif]--></span><br><span class="line"><!--[if gte IE 9]> //익스플로러 9 이상 일 때 선택됨</span><br><span class="line"><script src="jquery-2.0.0.min.js"></script></span><br><span class="line"><![endif]--></span><br><span class="line"> </span><br><span class="line">Javascipt를 통해 분기를 나눌 수 도 있다.</span><br><span class="line">예)</span><br><span class="line">if ((navigator.appVersion.indexOf("MSIE 7.") != -1)||(navigator.appVersion.indexOf("MSIE 8.") != -1)){</span><br><span class="line"> // IE7과 IE8일 경우 동작</span><br><span class="line">}else{</span><br><span class="line"> // 그 외의 브라우저에서 동작</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><h4 id="3-2-미디어-쿼리-구조화"><a href="#3-2-미디어-쿼리-구조화" class="headerlink" title="3.2. 미디어 쿼리 구조화"></a>3.2. 미디어 쿼리 구조화</h4><p>반응형 웹에서 가장 핵심은 미디어 쿼리이다. 미디어 쿼리 작성 방식 및 분기에 따라 최적화가 얼마나 어디에 맞춰지는지를 결정하게 된다.</p><h5 id="3-2-1-미디어-쿼리-구조"><a href="#3-2-1-미디어-쿼리-구조" class="headerlink" title="3.2.1. 미디어 쿼리 구조"></a>3.2.1. 미디어 쿼리 구조</h5><p>미디어 쿼리를 작성할 때 보통 처음 부분에 default로 적용될 css 내용을 작성하고 그 밑에 각종 분기를 작성하게 된다. 전자의 영역이 Mobile First, Desktop First 방식이 결정되는 영역이다.</p><h5 id="3-2-2-Mobile-First"><a href="#3-2-2-Mobile-First" class="headerlink" title="3.2.2. Mobile First"></a>3.2.2. Mobile First</h5><p>모바일에 먼저 맞춰 개발 후 더 큰 사이즈에 맞춰 개발<br>구버전 브라우저에 대한 지원을 배제한 프로젝트라면 최신기술이 대부분 문제없이 동작 할 것이기 때문에 모바일에 대한 중요성이 강조 될 것이다. 이때는 모바일 우선 개발 방식이 더 용이하다.</p><h5 id="3-2-3-Desktop-First"><a href="#3-2-3-Desktop-First" class="headerlink" title="3.2.3. Desktop First"></a>3.2.3. Desktop First</h5><p>일반적인 pc화면에 맞춰 개발 후 점차 작은 사이즈에 맞춰 개발<br>해당 프로젝트가 구 버전 브라우저와의 호환성을 중시하고 모바일 지원은 보다 비중이 낮을 경우 Desktop First 방식으로 작성하는 것이 개발에 용이하다. 또한 구버전 브라우저는 기본적으로 반응형이 동작하지 않는다는 전제를 깔아야 한다.</p><h5 id="3-2-4-미디어쿼리-분기"><a href="#3-2-4-미디어쿼리-분기" class="headerlink" title="3.2.4. 미디어쿼리 분기"></a>3.2.4. 미디어쿼리 분기</h5><p>미디어쿼리 분기는 device width에 따라 선택적으로 css가 적용되게 할 수 있다. 이는 다양한 사이즈의 디바이스 크기에 최적화 시킬 수 있는 핵심적인 부분이다.<br>디바이스 스크린 정보 참고) <a href="http://screensiz.es/tablet" target="_blank" rel="noopener">http://screensiz.es/tablet</a><br>위의 참고를 바탕으로 모바일과타블렛pc의 디바이스 width를 정리해 보았다.<br><strong>[ 모바일 ]</strong><br>iPhone (Original - 3GS), Nokia Lumia 900, Nokia Lumia 720, HTC Desire HD, HTC Evo,<br>Alcatel One Touch Ultra 995, Galaxy SII, Galaxy S Plus, Galaxy S, Nokia Lumia 520,<br>Samsung Nexus S, Nokia Lumia 620, Nokia Lumia (710, 800), HTC Desire, Droid,<br>iPhone 4 (4, 4S), iPhone 5 (5c, 5s)<br><strong>[Device-Width 320px]</strong><br>Droid Razr, Droid Razr Maxx, Galaxy Note II, Droid 3 & 4, Galaxy SIII, Galaxy Nexus,<br>Alcatel One Touch Idol Ultra, BlackBerry Q10, Galaxy SIV, Sony Xperia Z, HTC One<br><strong>[Device-Width 360px]</strong><br>Google Nexus 4 by LG, Nokia Lumia 925, Nokia Lumia 1020, Nokia Lumia 920, BlackBerry Z10<br><strong>[Device-Width 384px]</strong><br>Galaxy Note<br><strong>[Device-Width 400px]</strong><br><strong>[TabletPC]</strong><br>Samsung Galaxy Tab 10.1, Amazon Kindle Fire HD 7”<br><strong>[Device-Width 533px]</strong><br>Nook Tablet, Amazon Kindle Fire 1st Gen, Samsung Galaxy Tab 2, Samsung Galaxy Tab,<br>Asus Nexus 7 (2013)<br><strong>[Device-Width 600px]</strong><br>Asus Nexus 7 (2012)<br><strong>[Device-Width 603px]</strong><br>Apple iPad 1 & 2, Apple iPad Mini, Acer Picasso, Apple IPad 3 & 4<br><strong>[Device-Width 768px]</strong><br>Samsung Galaxy Tab 2 10.1, Galaxy Note 10.1, Asus Transformer, Amazon Kindle Fire HD 8.9”,<br>Google Nexus 10 by Samsung<br><strong>[Device-Width 800px]</strong><br>Motorola Xoom, Toshiba AT100<br><strong>[Device-Width 853px]</strong><br>BlackBerry PlayBook, Ainol Novo 7 Crystal, Ainol Novo 9 Spark<br><strong>[Device-Width 1024px]</strong><br>Ainol Novo 10 Hero, Microsoft Surface Pro<br><strong>[Device-Width 1280px]</strong><br>Microsoft Surface<br><strong>[Device-Width 1366px]</strong></p><p>다음은 위의 내용을 실제 프로젝트에서 사용하기 위해 미디어쿼리 분기로 나타낸 것이다. (desktop first)<br>/<em> desktop pc and tablet pc width All common value, 768px <= width </em>/<br> @media only screen and (min-width: 768px){/<em>insert your css</em>/}<br> /<em> tablet pc big width All common value, 1025px <= width <= 1180px </em>/<br> @media only screen and (min-width: 1025px) and (max-width: 1180px) {/<em>insert your css</em>/}<br> /<em> tablet pc middle width All common value, 768px <= width <= 1024px, nav X </em>/<br> @media only screen and (min-width: 768px) and (max-width: 1024px) {/<em>insert your css</em>/}<br> /<em> tablet pc, 854px <= width <= 1024px </em>/<br> @media only screen and (min-width: 854px) and (max-width: 1024px) {/<em>insert your css</em>/}<br> /<em> tablet pc, 801px <= width <= 853px, nav X </em>/<br> @media only screen and (min-width: 801px) and (max-width: 853px) {/<em>insert your css</em>/}<br> /<em> tablet pc, 768px <= width <= 800px, nav X </em>/<br> @media only screen and (min-width: 768px) and (max-width: 800px) {/<em>insert your css</em>/}<br> /<em> mobile All common value, width <= 767px </em>/<br> @media only screen and (max-width: 767px) {/<em>insert your css</em>/}<br> /<em> mobile, 604px <= width <= 767px </em>/<br> @media only screen and (min-width: 604px) and (max-width: 767px) {/<em>insert your css</em>/}<br> /<em> mobile, 534px <= width <= 603px </em>/<br> @media only screen and (min-width: 534px) and (max-width: 603px) {/<em>insert your css</em>/}<br> /<em> mobile, 401px <= width <= 533px </em>/<br> @media only screen and (min-width: 401px) and (max-width: 533px) {/<em>insert your css</em>/}<br> /<em> mobile, 385px <= width <= 400px </em>/<br> @media only screen and (min-width: 385px) and (max-width: 400px) {/<em>insert your css</em>/}<br> /<em> mobile, 361px <= width <= 384px </em>/<br> @media only screen and (min-width: 361px) and (max-width: 384px) {/<em>insert your css</em>/}<br> /<em> mobile, 321px <= width <= 360px </em>/<br> @media only screen and (min-width: 321px) and (max-width: 360px) {/<em>insert your css</em>/}<br> /<em> mobile, width <= 320px </em>/<br> @media only screen and (max-width: 320px) {/<em>insert your css</em>/}<br>이와 같이 모든 디바이스에 일일이 최적화 하기란 보통 일이 아니다. 실제 프로젝트에서는 분기를 적절히 통합하여 개발 하는 것이 대부분이다. (desktop pc, tablet pc, mobile정도로 통합)</p><p><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi"><br>user-scalable=no : 사용자의 확대보기 허용 여부(no/yes)<br>initial-scale=1.0 : 페이지 로딩 시 확대비율<br>maximum-scale=1.0 : 최대 확대 비율<br>minimum-scale=1.0 : 최소 축소 비율<br>width=device-width : 플랫폼 가로 크기에 맞춤, 수치를 넣으면 그 수치에 맞게 맞춰짐.<br>target-densitydpi=medium-dpi : dpi([dots per inch])를 맞춤. 일반적으로 medium-dpi로 하는게 좋음. (device-dpi/low-dpi/medium-dpi/high-dpi)</p>]]></content>
<summary type="html">
<h3 id="1-개요"><a href="#1-개요" class="headerlink" title="1. 개요"></a>1. 개요</h3><p>본 문서는 Responsive web publishing project를 위한 개발 가이드로써 프로젝트를 진
</summary>
</entry>
</feed>