전체메뉴

웹 표준 개발 FAQ

아이콘
웹 표준 개발 관련 질문과 답변을 확인 하실 수 있습니다.

전체 38건 (1페이지/4페이지)

  • [초급] Angular의 정의와 장점 및 단점

  • ∎ Angular 이란?


    Angular는 SPA(Single Page Application) 개발을 위한 구글의 오픈소스 자바스크립트 프레임워크입니다.


    웹 애플리케이션은 물론 모바일 웹, 네이티브 모바일과 데스크탑 애플리케이션까지 프론트엔드 개발에 필요한 대부분의 기능을 갖추고 있습니다.


    정적 타입을 제공하는 TypeScript를 주력 언어로 채택하여 대규모 애플리케이션 개발에 보다 적합한 환경을 제공합니다.



    ∎ Angular 특징


    1. 완전한 프레임 워크로, 프로젝트의 생성, 테스트, 빌드, 배포를 위한 모든 기능을 제공합니다.


    2. TypeScript를 사용합니다.


    3. Angular CLI를 제공하여 개발환경을 지원합니다. 파일 생성, 빌드, 패키징, 라이트 서버 기능 등 개발에 필요한 거의 모든 기능을 자체적으로 제공합니다.


    4. 모듈과 컴포넌트 기반으로 동작합니다.


    5. 대다수 기능의 라이브러리는 모두 포함시켜서 자체적으로 제공합니다.라우팅, HTTP, Form 등등)


    6. 단일 페이지 애플리케이션 (SPA, Single Page Application) 개발을 위한 프레임워크입니다. 다만, Server Side Rendering을 위한 기능을 구비하고 있습니다



    ∎ Angular 장점


    1. 컴포넌트 기반


    Angular를 이용한 프론트엔드 웹 개발은 Spring을 이용한 백엔드 개발과 유사합니다.


    DI(Dependency Injection)의 강력한 지원을 통해, 기능에 따라 코드를 분리하고, 재사용하는 것이 굉장히 쉬워집니다. 서버에 Ajax 요청을 하는 부분 및 기타 부분 담당하는 Service클래스와 HTML 컴포넌트를 담당하는 Component 클래스가 명확히 구분되고, 이로 인해 Service 클래스는 여러 Component 클래스에서 재사용이 가능합니다. 또한, 각각의 Component 클래스는 자신만의 HTML 컴포넌트에 집중할 수 있기 때문에 웹 화면을 구성하는 컴포넌트간 독립이 명확해 집니다.


    2. 웹페이지 속도


    Angular로 만든 SPA(Single Page Application)은 다른 페이지로의 전환 속도가 굉장히 빠릅니다. 일반적인 웹페이지는 링크를 클릭할 때마다 서버에 새로운 페이지를 요청하지만, Angular는 클라이언트 측에서 화면을 생성하고 필요한 데이터만 Ajax 요청을 통해 서버에서 내려받기 때문에 네트워크에 의한 딜레이가 적습니다.


    3. 프레임워크


    Angular는 프론트엔드 웹 개발을 위한 종합 프레임워크이므로 전체를 아우르는 구조를 제공합니다. 뷰에서 부터 테스트까지 많은 모듈을 가지고 있으며, 기본 제공되는 모듈이기 때문에 각 모듈의 정합성을 보장할 수 있고 자연스러운 데이터 연결이 보장됩니다.



    ∎ Angular 단점


    1. 학습분량


    Angular는 여러가지 언어를 제공하지만, 주력언어는 TypeScript입니다. 그러므로 대부분의 Angular 앱은 TypeScript로 쓰여있으며, 이를 활용하기 위해서는 Angular 개발자는 필히 TypeScript를 익힐 필요가 있습니다. 또한, TypeScript만 배우면 끝이 아니라, Angular가 지니고 있는 여러가지 개념들을 익혀야하고, 그 개념들이 어떻게 TypeScript로 표현되는지도 익혀야합니다.


    2. 초기 로딩속도


    Angular로 만든 SPA의 초기 로딩속도는 다소 느린편 입니다. 성능이 좋은 데스크탑이나 모바일에서는 큰 문제가 아니라고 생각할 수 있으나, 성능이 좋지 않은 모바일에서는 로딩시간이 1초 이상 걸리기도 하므로 생각보다 큰 문제입니다. 물론 초기화면이 로딩된 다음에 웹페이지 내에서의 이동은 위에서 말했듯이 매우 빠릅니다.


    3. 검색엔진 인덱싱


    Angular로 만든 SPA를 제대로 인덱싱하지 못하는 크롤러가 생각보다 많아서, 모든 검색엔진에 검색되게 하기 위해서는 다른 방법을 사용해야 합니다. SPA를 포기하고 서버측에서 렌더링 할 수 있게 해주는 Angular Universial을 사용하는 것도 방법 중 하나입니다. 하지만 이러한 방법을 사용하게 되면, Angular를 사용해서 얻는 이점이 적어질 수 있습니다.


  • [고급] Virtual DOM 이란 무엇인가요?

  • ∎ DOM 이란?


    DOM은 Document Object Model의 약어입니다.


    즉, 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성합니다.


    웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용합니다.


    DOM은 트리 형태라 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있습니다.



    ∎ Virtual DOM이란?


    Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용합니다.


    마치 실제 DOM의 가벼운 사본과 비슷합니다. 리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 때는 3가지 절차를 진행합니다.


    1. 데이터를 업데이트하면 전체 UI를 Virtual DOM 에 리렌더링합니다.


    2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교합니다.


    3. 바뀐 부분만 실제 DOM에 적용합니다.


    Virtual DOM

    ∎ 참고사항


    Virtual DOM을 사용한다고 해서 사용하지 않을 때와 비교하여 무조건 빠른 것은 아닙니다.


    결국에는 적절한 곳에 사용해야 리액트가 지닌 진가를 비로소 발휘할 수 있습니다.


    리액트를 사용하지 않아도 코드 최적화를 열심히 하면 DOM 작업이 느려지는 문제를 개선할 수 있고, 또 작업이 매우 간단할 때는 오히려 리액트를 사용하지 않는 편이 더 나은 성능을 보이기도 합니다


    리액트와 Virtual DOM이 언제나 제공할 수 있는 것은 바로 업데이트 처리 간결성입니다. UI를 업데이트하는 과정에서 생기는 복잡함을 모두 해소하고, 더욱 쉽게 업데이트에 접근할 수 있습니다.


  • [중급] React JSX문법의 규칙에는 어떤 것들이 있나요?

  • ∎ JSX의 정의


    JSX는 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 자바스크립트의 확장으로, 특히 React.createElement() 호출을 반복해야 하는 불편을 해소합니다. 템플릿 엔진이나 HTML처럼 보일 수도 있지만 그렇지 않습니다. JSX는 React 엘리먼트를 생성하면서 자바스크립트의 모든 기능을 쓸 수 있도록 도와줍니다.



    ∎ JSX문법의 규칙 7가지


    1. JSX에 표현식 포함하기


    2. 두 개 이상의 태그는 하나의 태그로 감싸야 합니다.


      - self closing tag


      - Fragment 사용방법


    3. Style 설정 방법


    4. Class 설정 방법


    5. JSX 주석처리


    6. return(<div></div>);은 가독성을 위해서 사용합니다.


    7. 컴포넌트 네이밍은 항상 대문자로 시작합니다.



    ① JSX에 표현식 포함하기


    Recat JSX

    JSX 중괄호 안에는 유효한 Javascript 표현식을 넣을 수 있습니다


    Recat JSX

    함수 호출 결과인 formatName(user)를 JSX 표현식에 넣을 수도 있습니다.


    -JSX를 if, for loop 안에 사용하고 반환할 수도 있습니다.



    ② 두 개 이상의 태그는 하나의 태그로 감싸야 합니다.


    Recat JSX

    [self closing tag] 태그는 꼭 닫혀져 있어야 합니다.


    - 두개 이상의 태그를 사용할 경우 하나의 태그로 감싸 져있지 않으면 오류가 발생되는데,


    이럴 때 Fragment를 사용하여 불필요한 div 코드를 방지할 수 있습니다.


    Recat JSX

    [Fragment 사용방법] Fragment 를 더 짧게 쓰는 새로운 문법입니다.


    <></> 빈 태그



    ③ style 설정 방법


    - 객체를 생성한 후, 네이밍은 모두 CamelCase로 작성합니다.


    Recat JSX


    ④ class 설정 방법


    Recat JSX


    ⑤ JSX 주석처리


    - 중괄호안에 기존 JS주석처리를 넣으면 됩니다.


    Recat JSX


    ⑥ return(<div></div>); 은 가독성을 위해서 사용합니다.



    ⑦ 컴포넌트 네이밍은 항상 대문자로 시작합니다.


    - React는 소문자로 시작하는 컴포넌트를 DOM태그로 처리합니다


    예를 들어 <div />는 HTML div태그를 나타내지만,


    <Welcome />은 컴포넌트를 나타내며 범위 안에 Welcome이 있어야 합니다.


  • [초급] React를 사용하는 이유와 특징 및 장점은 무엇인가요?

  • ∎ 리액트는 페이스 북에서 제공하는 프론트 엔드 라이브러리 입니다.


    페이스 북이 리 액트를 만들기 전에 이미 AngularJS, Backbone.js, Knockout.js, Ember.js 등의 수많은 프레임 워크가 존재했습니다.


    위 프레임 워크는 MVC 패턴 또는 MVVM (View Model) 등의 패턴으로 애플리케이션을 구조화하고 있습니다


    React 실습

    즉, 이벤트가 발생했을 때 모델 (Model)에서 데이터를 처리하여 그 정보를 바탕으로 화면을 담당하는 뷰 (View)를 변화시켜줍니다.


    이 과정은 간단해 보이지만, 애플리케이션 규모가 크면 상당히 복잡하고 성능도 떨어집니다. 여기서 페이스북 개발팀이 생각한 아이디어는, 데이터가 변할 때마다 어떤 변화를 줄지 고민하는 것이 아니라 “기존 뷰 (View)를 날려 버리고 Virtual DOM을 사용하여 처음부터 새로” 하는 방식으로 좀 더 빠른 속도로 뷰 (View)를 변경 해주게 됩니다.




    ∎ React의 장점


    • Component를 사용해서 효율적으로 재사용이 가능하고 유지보수가 용이


    - Component는 UI를 구성하는 개별적인 뷰 단위로 전체 앱은 각 Component들이 결합해서 만들어 지게 되는데 무엇보다 각 Component들은 앱의 다른 부분, 또는 다른 앱에서 쉽게 재사용이 가능합니다. Redux의 창시자이며, 현재는 Facebook React Core팀의 일원인 Dan Abramov는 React의 목표가 성능보다는 유지가능한 앱을 만드는 것에 있다고 설명합니다.



    • 생태계가 넓고, 다양한 라이브러리 사용 가능


    - 개발을 하다보면 막히는 부분, 오류가 있는 부분이 많은데 Vue에 비해 사용자가 많고, 역시 Facebook에서 만들었다보니 확실히 커뮤니티나 자료가 굉장히 방대합니다.



    • 리액트는 라이브러리이기 때문에 다른 프레임워크나 라이브러리와 혼용 가능


    - React는 다른 프레임워크나 라이브러리와 쉽게 함께 사용할 수 있고 이미 개발된 서비스에서도 일정 부분에서만 선택적으로 적용이 가능하여 단계적으로 React로의 변경이 가능합니다.



    • virtual DOM을 활용하여 빠른 렌더링이 가능


    - DOM은 브라우저가 화면을 그리기위한 정보를 담고있는 문서 객체입니다. JQuery처럼 실제 DOM을 변경할 경우, 변경할 부분이 일부분이더라도 DOM 전체를 다시 렌더링해야하고, 이는 성능 저하로 직결된다는 단점이 있습니다.



    • 단방향 데이터 바인딩을 통한 디버깅 용이, 다른 라이브러리에 비해 안정성이 높음


    - React 내에서의 데이터의 흐름은 부모(Parent)에서 자식(Child)으로 단방향적입니다. 그렇기 때문에 디버깅이 용이하며, 다른 라이브러리에 비해 안전성이 높습니다.



    • 리액트 네이티브를 활용하여 앱개발 가능


    - 리액트 네이티브는 네이트브 모바일 앱을 만들기 위한 프레임워크로서 리액트를 기반으로 개발되었습니다. 리액트 라이브러리가 웹 개발자나 하이브리드 앱 개발자에게 유용하고 관심을 끌게 하는 기술이라면, 리액트 네이티브는 모바일 개발자들이 몹시 주목할 기술입니다.




    ※ 리액트 네이티브 : 대다수의 모바일 앱은 하이브리드가 아닌 네이티브 앱 형식으로 개발이 되는데 여기서 일반적으로 안드로이드와 iOS에서 동시 작동하는 소스코드를 작성하기 위해서는 '웹뷰'를 이용해야만 했다. 그러나 웹뷰를 이용한 하이브리드 앱 기술은 기존의 네이티브 앱에서 지원하는 속성을 이해하지 못했는데 리액트 네이티브 활용으로 네이티브 속성을 그대로 이용하는 것이 가능해졌다.




    ∎ React의 특징


    • 자바스크립트 기반


    - 리액트는 자바스크립트 기반으로 별도의 프레임워크를 배울 필요가 없으며 자바스크립트를 그대로 활용하면 됩니다. 앵귤러(Angular)또는 뷰(Vue)처럼 다른 언어를 배울 필요가 없기 때문에 자바스크립트와 HTML을 조금 아는 정도로도 개발이 가능합니다.



    • 선언형


    - 사용자 인터페이스를 만들때 쉽고 간결하게 해줍니다. 애플리케이션 안에서 각각 상태에 따른 디자인 뷰와 연결된 데이터가 변경되면, 이에 맞는 컴포넌트들을 올바르게 랜더링해 화면 구성을 합니다. 이 처럼 선언형의 화면뷰는 예측 가능한 코드 및 쉬운 디버깅을 하게 합니다.



    • 가상 DOM (Virtual DOM)


    - DOM Tree와 같은 구조체를 Virtual DOM으로 가진다. 'diffing'알고리즘을 통해 문서의 변화를 확인, 'Recomfillation' 진행으로 부분 조작이 가능합니다. 무엇보다 DOM을 직접 조작하는 것이 아니라 In-memory의 가상 DOM을 조작하기 때문에 효율적이라고 빠릅니다.



    • 컴포넌트 (Components)


    - 요소라고 하는 컴포넌트 별로 나누어 개발이 가능하다. 또 이렇게 개발한 것을 다른 곳에 활용할 수도 있습니다. 또 자바스크립트와 JSX를 조금 사용할 줄 안다면 간단하게 구현이 가능한데 이 때문에 개발을 쉽게 하고 유지보수를 하는데도 큰 장점입니다. (*JSX란? 리액트로 HTML을 개발하는 방법, 매우 간단하며 쉽다.) 상태를 관리하는 컴포넌트들을 캡슐화해 빌드한 후 그 컴포넌트들을 복잡한 UI로 조합하여 구성이 가능한데, 컴포넌트 로직은 자바스크립트로 구성이 되어있어 애플리케이션을 통한 대량 데이터를 전송가능하게 하고 DOM의 외부상태를 쉽게 유지할 수 있습니다.



    • 단방향 데이터플로우


    - 데이터가 UI로 흐르는 구조이며, 데이터가 변했을때 UI가 업데이트 됩니다. 하지만 단방향이므로, UI쪽에서 데이터를 변화시키는 것은 불가능합니다. 즉 데이터가 변하게 되면 UI는 변화된 새로운 데이터와 함께 업데이트 됩니다. 앵귤러(Angular)와 비교하면 앵귤러의 경우는 양방향 데이터플로우이며, 이와는 반대로 데이터를 관리하는 컴포넌트가 있고 데이터를 UI컴포넌트에 전달하는 단순한 데이터 흐름으로 이해해 쉽고 편리하게 구현 가능합니다.



  • [고급] Vue.js의 동적 & 비동기 컴포넌트

  • ∎ 동적 컴포넌트


    들어가기 앞서 아래 예제는 (https://jsfiddle.net/chrisvfritz/Lp20op9o/)에서 확인할 수 있습니다.


      <component v-bind:is="currentTabComponent"></component>

    위의 코드와 같이 is를 사용하여 동적으로 컴포넌트를 랜더링 할 수 있습니다.


    ①. Post 탭에서 Hipster lpusm 클릭

    /br>
    Vue 실습1

    ②. Archive 탭으로 변경

    /br>
    Vue 실습2

    ③ Post 탭으로 이동 시 Hipster Ipsum 미노출

    /br>
    Vue 실습3

    is를 사용한 동적 컴포넌트 랜더링을 사용하여 위의 그림와 같이 탭 뷰를 만들 수 있습니다. 하지만 탭을 이동 할 때마다, 새로운 컴포넌트가 그려지기 때문에, 이전의 tab의 상태를 기억하지 못합니다. 위의 예제에서는 Posts 탭에서 Hipster Ipsum을 클릭 했지만, Archive 탭으로 변경하고 다시 Posts 탭으로 돌아오면 이전에 클릭했던 Hipster Ipsum이 보이는 상태가 아니게 됩니다. 탭을 변경 할 때, 이전 탭의 상태를 유지하는 것이 성능 상 좋을 수 있습니다.


      <!-- Inactive components will be cached! -->


      <keep-alive><component v-bind:is="currentTabComponent"></component>


    위의 코드와 같이 <keep-alive>를 사용하면 인스턴스를 캐시로 저장 할 수 있습니다. <keep-alive>를 사용하면 생성된 탭의 인스턴스를 캐시에 저장 하고 있기 때문에, 탭을 변경 후 돌아 왔을 때 탭을 새로 그리지 않고 이전 탭을 보이게 됩니다.



    ①. Post 탭에서 Hipster lpusm 클릭

    /br>
    Vue 실습4

    ②. Archive 탭으로 변경

    /br>
    Vue 실습5

    ③ Post 탭으로 이동 시 Hipster Ipsum 미노출

    /br>
    Vue 실습6

    위의 그림과 같이 Posts 탭에서 Hipster Ipsum을 클릭한 후 Archive 탭을 클릭하고 Posts 탭으로 돌아온 경우 Posts 탭을 캐시에 저장하고 있기 때문에 다시 돌아왔을 때, 이전에 클릭한 Hipster Ipsum이 보이게 됩니다.



    ∎비동기 컴포넌트


    어플리케이션이 커지면, 작은 부분으로 나누고 필요할 때에 가져와 사용하는 구조를 구현해야 할 때가 있습니다. 비동기 컴포넌트를 사용하여 필요할 때 비동기적으로 컴포넌트를 불러와 사용할 수 있습니다.


    Vue.component('async-example', function (resolve, reject) {


    setTimeout(function () {


    // Pass the component definition to the resolve callback


    resolve({


    template: '<div>I am async!</div>'


    })


    }, 1000)


    })



    위의 코드와 같이 팩토리 함수를 사용하여 비동기 컴포넌트를 구현 할 수 있습니다. 컴포넌트를 가져오는 것이 성공하면 resolve 콜백을 실행 해야 하고, 실패할 경우 reject 콜백을 실행해야 합니다. resolve와 reject의 인자는 컴포넌트를 생성 할 때의 옵션 값과 동일 합니다.



    Vue.component('async-webpack-example', function (resolve)


    { // This special require syntax will instruct Webpack to


    // automatically split your built code into bundles which


    // are loaded over Ajax requests.


    require(['./my-async-component'], resolve)


    })

    위의 코드와 같이 Webpack을 사용하여 다른 파일로 구분된 컴포넌트를 비동기 컴포넌트로 만들 수 있습니다.




    Vue.component(


    'async-webpack-example',


    // The `import` function returns a Promise.


    () => import('./my-async-component')


    )


    위의 코드와 같이 Webpack 2와 ES2015 문법을 사용하여 비동기 컴포넌트를 만들 수도 있습니다.



    new Vue({


    // ... components: {


    'my-component': () => import('./my-async-component')


    }


    })


    지역적으로 컴포넌트를 등록할때는 위의 코드와 같이 사용해야 합니다.



    ∎Handling Loading State


    2.3.0 이상의 Vue 버전에서 사용할 수 있는 기능입니다. 비동기 컴포넌트를 좀 더 간결하고, 직관적으로 사용할 수 있게 되었습니다.


    const AsyncComponent = () => ({


    // The component to load (should be a Promise)


    component: import('./MyComponent.vue'),


    // A component to use while the async component is loading


    loading: LoadingComponent,


    // A component to use if the load fails


    error: ErrorComponent,


    // Delay before showing the loading component. Default: 200ms.


    delay: 200,


    // The error component will be displayed if a timeout is


    // provided and exceeded. Default: Infinity.


    timeout: 3000


    })


    2.3.0 이상 부터 지원하는 간결한 비동기 컴포넌트 구현 방법

  • [중급] Vue.js Binding에 어떤 종류가 있나요?

  • Date Binding 이란?

    Date Binding 이란 두 데이터 혹은 정보의 소스를 모두 일치시키는 기법입니다.

    즉 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 기법입니다.



    Vue.js Binding

    Vue 개체가 HTML 요소에 바인딩되면 Vue 개체가 변경되면 HTML 요소가 변경됩니다.


       <div id="app">


           {{ message }}


       </div>


       <script>


          var myObject = new Vue({


              el: '#app',


              data: {message: 'Hello Vue!'}


          })


          function myFunction() {


              myObject.message = "John Doe";


          }


       </script>



    Vue.js Two-Way Binding


    v-model지침 바인딩 응용 프로그램 데이터를 HTML 요소의 값입니다. 이를 양방향 바인딩이라고합니다.


       <div id="app">


           <p>{{ message }}</p>


           <p><input v-model="message"></p>


       </div>


       <script>


          var myObject = new Vue({


              el: '#app',


               data: {message: 'Hello Vue!'}


          })


       </script>




    Vue.js Loop Binding


    v-for지시문을 사용하여 Vue 객체 배열을 HTML 요소의 "배열"에 바인딩합니다.


       <div id="app">


           <ul>


           <li v-for="x in todos">


              {{ x.text }}


           </li>


           </ul>



       <script>


          var myObject = new Vue({


              el: '#app',


               todos: [


                   { text: 'Learn JavaScript' },


                   { text: 'Learn Vue.js' },


                   { text: 'Build Something Awesome' }


                   ]


               }


          })


       </script>



  • [초급] Vue를 사용하는 이유와 특징 및 장점은 무엇인가요?

  • ∎ vue.js는 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크입니다.


    ue.js는 여타 다른 프론트엔드 프레임워크보다 배우기 쉽다는 장점이 있고, 리엑트와 앵귤러라는 프레임워크의 장점들을 쏙 빼와서 더욱 빠르고 가볍게 만든 프레임워크입니다.



    ∎ Vue. js의 장점


    1. 배우기 쉽다.


    2. React와 Angular에 비해 성능이 우수하고 빠르다.


    3. React의 장점과 Angular의 장점을 가지고 있다.



    ∎ Vue. js의 특징


    뷰(Vue.js)는 UI 화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리입니다.



    Vue 실습

    MVVM 패턴이란 화면을 모델(Model) - 뷰(View) - 뷰 모델(ViewModel)로 구조화하여 개발하는 방식을 의미합니다.



    이러한 방식으로 개발하는 이유는 화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적으로 이해할 수 있고, 추후 유지 보수가 편해집니다.


    용어 설명
    뷰(View) 사용자에게 보이는 화면
    돔(DOM) HTML 문서에 들어가는 요소(태그,클래스,속성 등)의 정보를 담고 있는 데이터 트리
    돔 리스너(DOM Listener) 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치
    모델(Model) 데이터를 담는 용기. 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장
    데이터 바인딩(Data Binding) 뷰(View)에 표시되는 내용과 모델의 데이터를 동기화
    뷰 모델(ViewModel) 뷰와 모델의 중간 영역. 돔 리스너와 데이터 바인딩을 제공하는 영역


    ∎ 컴포넌트 기반 프레임워크


    뷰가 가지는 또 하나의 큰 특징은 바로 컴포넌트 기반 프레임워크입니다.


    Vue 실습

    위 그림과 같이 컴포넌트란 레고 블록을 조합하는 것과 비슷합니다.즉, 화면을 왼쪽 같이 구성을 하면 오른쪽과 같은 컴포넌트 트리 구조를 가지게 되는 것 입니다. 이러한 컴포넌트 기반의 프레임워크를 사용함으로써 코드의 재사용성이 향상되며 직관적인 화면 구조를 갖게 되는 것 입니다.



    ∎ React의 장점과 Angular의 장점을 가진 프레임워크


    뷰는 앵귤러의 양방향 데이터 바인딩과 리액트의 단방향 데이터 흐름의 장점을 모두 결합한 프레임워크입니다. >양방향 데이터 바인딩이란 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 값이 변경되는 것을 의미합니다. 단방향 데이터 흐름은 컴포넌트의 단방향 통신을 의미합니다. 즉, 컴포넌트 간에 데이터를 전달할 때 항상 상위 컴포넌트에서 하위 컴포넌트 한 방향으로만 전달하게끔 프레임워크가 구조화되어 있는 것을 말합니다.



    이 외에도 뷰는 빠른 화면 렌더링을 위해 리액트의 가상 돔 렌더링 방식을 적용하여 사용자 인터랙션이 많은 요즘의 웹 화면에 적합한 동작 구조를 갖추고 있습니다.가상 돔을 활용하면 특정 돔 요소를 추가하거나 삭제하는 변경이 일어날 때 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면을 갱신합니다.따라서 브라우저 입장에서는 성능 부하가 줄어들어 일반 렌더링 방식보다 더 빠르게 화면을 그릴 수 있습니다.


  • HTML5에서 추가된 태그 중에서 콘텐츠 그룹화 태그(Grouping content Tag)는 무엇인가요?

  • ∎ 콘텐츠 그룹화 태그에서 추가된 태그는 <figure>, <figcation>태그가 있습니다.


    <figure>태그는 캡션을 붙일 대상을 지정합니다.

    <figure>태그는 이미지, 다이어그램, 비디오, 텍스트 단락과 같은 멀티미디어 요소를 묶을 수 있으며 태그 안에 <img>태그나 <code>태그와 같은 다른 태그도 사용이 가능합니다.

    <figure> 태그의 사용법은 다음과 같이 <figure>엘리먼트로 시작해서 캡션을 붙일 요소를 지정하고 </figure>엘리먼트로 종료합니다.

    다음 <figcaption>태그는 <figure> 태그를 사용하여 지정한 대상에 캡션 내용을 붙이는 태그입니다.

    <figcaption>태그는 꼭 사용해야 하는 태그는 아니지만 사용할 때에는 반드시<figure>태그 다음에 사용해야 합니다.

    <figcaption> 없이 <figure>태그를 사용하는 것은 브라우저에게 미디어가 있다는 것을 알려주기 위한 것입니다.

    <figcaption> 태그의 사용법은 다음과 같이 <figcaption> 엘리먼트로 시작해서 내용을 적고 </figcaption>엘리멘트로 종료합니다.

    figure 실습


  • HTML5에서 추가된 태그 중에서 텍스트 태그(Text-level semantics Tag)는 무엇인가요?

  • ∎ 텍스트 태그에서 추가된 태그는 <bdi>,<mark>,<ruby>,<time>, <wbr>이 있습니다.


    <bdi>는 텍스트 방향을 주위와는 별도로 표시하도록 지시하는데 사용하며, 사용자가 텍스트의 방향성을 모를 때 사용하면 유용한 태그로 브라우저가 <bdi> 태그의 텍스트를 보고 방향성을 판단하여 화면에 출력하게 됩니다.

    그러나 자동으로 텍스트방향을 제어하다 보니 해석 오류로 인해 비정상적으로 출력될 수도 있기 때문에 w3c는 <bdi>태그의 사용을 텍스트의 방향성을 정말 알 수 없고, 서버 쪽에서 사용할 수 있는 더 좋은 알고리즘이 없을 때 최후의 보루로 사용하기를 권하고 있습니다.

    다음과 같이 한글과 영어 그리고 아랍어의 인사말을 <bdi>태그로 묶으면 이러한 결과창이 나옵니다. 한글과 영어 그리고 아랍어의 인사말이 정확히 적혀있어 결과창의 인사말도 그대로 출력되는 것을 확인할 수 있습니다.


    bdi 실습


    <mark>는 텍스트를 하이라이트 형태로 표시하며 특정한 단어나 일부분을 강조하고 싶을 때 사용하는 태그입니다.

    보통은 텍스트의 배경을 형광색으로 표시하는데 크롬 브라우저의 경우에는 노란색으로 배경을 표시하며, 텍스트의 배경색은 <style>태그를 사용 바꿀 수 있습니다.

    예제를 통해 <mark>태그의 사용법에 대해 자세히 알아보겠습니다. 예제에서는 주어진 문장 속에 있는 우유를 마크로 묶었습니다.

    그리고 그 결과값을 확인해 보니 우유의 배경이 노란색으로 바뀐 것을 볼 수 있습니다.

    <style> 태그를 이용하여 배경색을 바꾸는 방법도 익혀두면 유용하게 사용할 수 있습니다.


    mark 실습


    <ruby>는 동아시아 타이포그래피에 사용되는 루비 주석을 지정하는데 사용되는 태그입니다.

    <ruby> 태그에는 <rt>나 <rp>태그를 하나 이상 포함하게 되는데 <rt>는 작은 글씨를 주석으로 나타내는 태그이며, <rp>태그는 <rt>태그를 지원하지 않는 브라우저에서 괄호 안에 주석을 표현하게 하는 태그입니다.

    브라우저에서 <rt>태그를 지원한다면 <rp> 태그의 값은 표시되지 않습니다. 예제의 화면은 대한민국 한글 표기를 한자표기 위에 주석으로 나타내는 소스입니다.

    결과창을 보니 대한민국이라는 한글이 한자 위에 주석으로 표시된 것을 볼 수 있습니다.

    소스에서는 rp값으로 양쪽 괄호를 사용하였는데, 만약 브라우저에서 <rt>태그를 지원하지 않는다면 이 소스의 결과는 다음과 같이 괄호 안에 주석을 표시하게 됩니다.


    ruby 실습


    <time>은 HTML 문서 내의 날짜 및 시간을 선언하는데 사용됩니다. 하지만 웹 문서에서 날짜나 시간을 자동으로 표시해주는 것은 아닙니다.

    <time>태그를 사용하는 이유는 <time>를 사용하면 모든 브라우저에서 해당 내용을 정확히 인식할 수 있기 때문입니다.

    그리하여 검색 사이트에서 검색 대상을 날짜나 시간으로 제한했을 때 원하는 정보를 검색할 수 있게 해줍니다.

    datetime속성을 이용하여 날짜와 시간 모두를 인식하게 할 것인지 아니면 날짜와 시간을 각각 따로 인식하게 하거나 정확하게 인지할지를 지정할 수 있습니다.

    다음과 같이 시간요소를 <time> 태그로 묶어서 사용하며, 결과 창은 다르지 않게 표시되지만 브라우저에서는 10시를 시간요소로 인식하고 있음에 의미가 있습니다.


    time 실습


    <wbr>은 강제로 원하는 위치에서 줄 바꿈을 하고자 할 때 사용되는 태그입니다.

    강제로 줄 바꿈을 한다는 것은 <nobr>태그 안에서 사용됨을 의미합니다.

    <nobr> 태그는 화면 크기에 따라 줄이 바뀌는 것을 방지하는 태그로 이 태그를 사용하면 화면 밖의 내용은 스크롤을 사용하여 나타냅니다.

    이때 <wbr> 태그를 사용하면 원하는 위치에서 줄 바꿈을 할 수 있으며, <wbr> 태그로 묶인 부분부터 줄이 바뀐다는 점을 유의해서 위치를 조정하면 됩니다.

    예제를 통해 살펴보겠습니다. 다음은 <nobr> 태그와 <wbr> 태그를 이용한 소스입니다.

    결과 창을 보면 <wbr> 태그로 묶인 부분부터 줄이 바뀌어 나타난 것을 확인할 수 있습니다.


    wbr 실습


  • HTML5에서 추가된 태그 중에서 폼 태그(Form Tag)는 무엇인가요?

  • ∎ HTML5가 등장하면서 새로운 태그들이 추가 되었습니다.


    새로운 태그들이 등장하면서 사용자가 프로그램 코드를 작성하기가 더 편리해졌고, 문서의 구조도 기존과는 큰 차이가 없습니다.


    폼 태그에서 새롭게 추가된 태그는 <datalist>, <keygen>, <meter>, <output>, <progress>입니다.


    <datalist>는 <input>태그와 함께 사용하며 미리 정의된 옵션의 드롭 다운 목록을 지정할 때 사용합니다.


    다음과 같이 소스를 입력하면 이런 결과창이 나오게 되며 네모 칸에 마우스를 가져가서 클릭을 하면 다음과 같이 option value로 지정했던 목록들이 아래로 나열됩니다.


    목록들 중에 하나를 선택하면 빈 칸에 선택한 목록이 자동으로 채워집니다.


    datalist 실습


    <keygen>은 인증서 관리 시스템과 웹 폼을 처리하는 데 사용되며, 보안 키를 생성하고 공개 키를 제출합니다.


    이때, 개인 키는 로컬에 저장되고 공개 키는 서버로 전송됩니다. 의 대표적인 속성으로 Keytype, Name, Challenge가 있습니다.


    Keytype은 생성된 키의 형식을 지정하는 속성으로 기본값은 RSA로 설정됩니다. Name은 엘리먼트의 이름이며 Challenge는 공개키와 함께 전송되는 챌린지 문자열을 나타내는 속성입니다.


    keygen 실습


    <meter>는 알려진 범위 내에서 스칼라 측정 또는 소수 값을 나타내는데 사용되며, 웹 페이지에 그래픽 형식에서 데이터를 표시 할 때 유용한 태그입니다.


    <meter> 태그는 익스플로러와 사파리에서는 실행되지 않음에 유의해야 합니다.


    다음과 같이 소스창에 meter 태그를 이용하면 이러한 결과 창이 뜨게 됩니다. 예제에서는 두 개의 meter 태그를 사용하였는데, 첫 번째 meter 태그의 meter 값은 2이며 최소값은 0이고 최대값은 10입니다.


    이것을 meter 태그를 이용해 0~10 중 2값 만큼을 그래프로 나타낸 것입니다. 다음 두 번째 줄의 meter태그는 100% 중 60%만 그래프로 나타낸 것입니다.


    meter 실습


    <output>은 스크립트에 의해 수행 계산의 결과를 나타내는 태그입니다.


    <output> 태그를 사용해도 화면에는 다르게 표시되지 않지만 이 태그로 묶인 부분이 일반 텍스트가 아닌 계산의 결과 값이라는 것을 브라우저에서 정확히 인식할 수 있습니다.


    <output> 태그에서 많이 사용되는 속성은 for와 name으로 for는 계산에 사용되는 요소들의 ID를 지정하며 name은 엘리먼트의 이름을 지정하는 속성입니다.


    <output> 태그는 다음과 같이 <output [속성=“속성 값”]> 내용 </output>으로 사용합니다.


    output 실습


    <progress>는 작업의 진행 상황을 나타내는 태그입니다. Progress의 속성은 value와 맥스가 있습니다.


    Value는 작업이 얼마나 진행되었는지를 나타내며, max는 작업이 완료되는 양을 나타내는 속성입니다. 이 두 속성 모두 부동 소수점으로 표현합니다. 다음과 같은 소스를 입력하면 이러한 결과창이 뜨게 됩니다.


    예제에서는 value 값을 680으로 max 값을 1000으로 했으며, 그것을 1000의 680만큼의 진행상황을 그래프로 표시되었습니다.


    progress 실습

이메일 무단 수집 거부

팝업 닫기

본 웹사이트에 게시된 이메일 주소가 전자우편수집 프로그램이나 그밖의 기술적장치를 이용하여 무단으로 수집되는 것을 거부하며, 이를 위반시 정보통신망 이용촉진 및 정보보호등에 관한 법률에 의해 처벌 받을 수 있습니다.

닫기
TOP