Front-End (30) 썸네일형 리스트형 Web project 성능 최적화하기 웹 어플리케이션 성능 최적화 모바일 웹 어플리케이션 구동 시 서버에서 단말 단까지 구성되는 지연 요소는 크게 단말에서의 HTML,CSS,JS 처리와 서버에서의 처리 지연 그리고 네트워크 전송 부분으로 구성된다. 1. 자바스크립트자바스크립트 적재 시간 최적화첫 화면 구성 시 즉시 필요한 자바스크립트와 필요하지 않은 자바스크립트를 분리하여 lazy loading자바스크립트 minify자바스크립트 수행 코드 수행 시간 짧게 유지자바스크립트 수행 동안 main UI thread는 중지됨 http://readme.skplanet.com/?p=4437 Prototype, Object 이해하기 Prototype이란 무엇인가?Java에서와 다르게 Javascript는 프로토타입 기반의 언어라고 한다. 항상 귀동냥으로 자바는 객체지향 언어이고 이는 자바스크립트에서 지원이 되지 않는다고만 알고 있었다. ( ECMA2016에서 class 키워드가 등장하긴 했지만... ) 공부를 하다보니 Object가 무엇인지도 제대로 안 되어 있음 Object란 무엇인가?Object란 객체이다. 객체란 Java에서 배웠던 것 처럼 데이터(주체)와 행동(데어터에 관련된 동작)을 정의하고 있는 것이다. 자바스크립트는 객체 그 자체라고 하는데, 이것이 어떠한 의미인지는 아직 와닿지는 않는다. 위에서 정의한 것처럼 흔히 데이터는 프로퍼티라 칭하고, 행동은 메소드라 칭한다. Property 프로퍼티는 객체의 속성을 나타내는 .. [Docs번역-Tutorial]#3.Master.Detail(리스트만들기) 이번에는 영웅들의 리스트를 보여주고, 사용자가 영웅을 선택하여 상세내역을 확인할 수 있도록 만들어 볼 것입니다. 코드는 다음과 같습니다. ( https://embed.plnkr.co/?show=preview ) 파일 디렉토리angular-tour-of-heroessrcappapp.component.tsapp.module.tsmain.tsindex.htmlstyles.csssystemjs.config.jstsconfig.jsonnode_modules ...package.json heroes 보여주기프로젝트를 만들기 영웅들의 리스트를 보여주기 위해서는 view template를 추가하자. Mock data로 사용할 10개의 heroes를 만들자.src/app/app.component.ts (hero arra.. [Docs번역-Tutorial]#2.The Hero Editor(양방향 바인딩) 개발 환경 로컬에 구성하기 angular-tour-of-heroes 프로젝트를 만들기 위해 해당 링크(https://angular.io/guide/setup)를 따라하자. angular-tour-of-heroessrcappapp.component.tsapp.module.tsmain.tsindex.htmlstyles.csssystemjs.config.jstsconfig.jsonnode_modules ...package.json 우리가 이 모든것을 완성하고 나면 다음과 같은 화면(https://embed.plnkr.co/?show=preview)을 볼 수 있다. 앱을 compile하고 실행하자.터미널에 다음과 같은 명령어를 입력하자. npm start 이 커맨드는 TypeScript 컴파일러가 "watch .. [Docs번역-Tutorial]#1.Introduction 이 튜토리얼에서는 영웅들의 인력관리를 위한 앱을 만들 것이다. 이 앱은 Angular의 핵심 기반들을 다룰 것이다. 우리는 data-driven app에 기대하는 다양한 특징들을 가진 앱을 만들것이다. ( 영웅들의 리스트를 얻고 보여주며, 선택된 영웅들의 세부내역을 편집하고, 영웅들의 데이터를 다양한 관점에서 보여줄 수 있는 ) 우리는 영웅들의 데이터를 보여주고, element들을 보여주고 숨기기 위해 build-in directive(지시자)를 사용할 것이다. 우리는 영웅들의 상세 내용과 영웅들을 배열로 보여주기 위해 component 들을 만들 것이다. 우리는 read-only 데이터를 위해 one-way data binding을 사용할 것이다. 우리는 편집가능한 필드를 위해 2-way databin.. 데이터 바인딩이란? 1. 데이터 바인딩이란? - 데이터 바인딩은 왜 필요한가? 어플리케이션에서 '화면에 있는 객체'와 '데이터'를 일치시키는 일은 중요하다. ( 개발 경험이 없을 때는 이게 당연한 줄 알았다. 데이터를 보여주는건 당연하니까 ) 일반 어플리케이션 ( ex: SWT,jFace 이용 ) 에서는 바인딩이 자연스러운데 웹에서는 왜 이래? 웹 출발 시점에는 사용자와의 양방향 상호작용을 가정한 것이 아님 이 작업을 도와주는 것이 데이터 바인딩 2. 기본 웹 기술의 데이터 바인딩 - framework 없이 데이터 바인딩 해보기 해야 할 일 사용자가 입력한 정보를 얻어옴 찾아온 데이터를 갱신 위의 일을 위해서 DOM API나 jQuery를 사용함 예제) input 태그 안의 keyup 이벤트가 발생할 때 마다, 해당 inp.. Closure 12345678910111213function makeAdders(n) { var adders = []; for (var i = 0; i < n; i++) { adders.push(function (x) { return i + x; }); } return adders;} var adders = makeAdders(10);var add5 = adders[5];var r = add5(2);console.log(r);// We expect 7, but 12 is printed. 익명함수 ( i+x )를 만들 때 var i의 주인은 function makeAdders 이다. Javascript에서는 이 변수를 넘길 때 Closure라는 scope를 가지고 넘긴다. 외부함수 makeAdders의 변수 i에 접근할.. Client-Server 웹 개발 기술의 역사 1. 초기 웹 페이지는 웹서버가 간단하고 서버가 정적인 페이지를 보내주면 브라우저가 정적인 페이지를 랜더링만 하였다. 2. 1990년 중반에 동적 콘텐츠가 등장했다. 하지만 이 당시 클라이언트 측 컴퓨터가 좋지 못했고 javascript는 느렸기 때문에 서버측 프로세싱을 활용하는데 집중했다. 이렇다 보니 서버측에 MVC 패턴이 적용되기 시작했다. 3. 클라이언트-서버 방식 개발이란? 화면에는 데이터만 전달하고, 서버에서는 화면을 생성하지 않는 디자인을 말한다. 브라우저는 어떻게 동작 하는가? 소개 우리가 가장 많이 사용하는 웹브라우저에서 www.naver.com 입력시 어떤 과정을 거쳐 네이버 메인화면을 보여주는지에 대해 알아보자. 이 글에서는 오픈소스 브라우저에 대해 알아볼 것이다. 브라우저의 주요 기능 브라우저의 주요 기능은 사용자가 자원을 요청하고 그 자원을 브라우저에 표시해주는 것이다. 자원은 보통 HTML 문서지만 PDF나 이미지 형태일 수도 있다. 자원의 주소는 URI에 의해 정해진다. 브라우저는 HTML과 CSS 명세에 따라 HTML을 해석하여 브라우저에 그려준다. 초창기에는 해당 명세를 만드는 W3C(World Wide Web Consortium)을 잘 따르지 않아 호환성 문제를 심각하게 겪었지만 최근에는 대부분의 브라우저가 명세를 따르고 있다. 브라우저의 사용자 인터페이스는 .. Shadow DOM Shadow DOM이란? Document Object Model, 즉 DOM은 HTML과 XML 문서의 내용을 조작할 수 있는 API이다. HTML의 요소 집합(태그) 들이 스타일 캡슐화(Encapsulation) Shadow DOM의 핵심 기능 중에 하나는 shadow boundary이다. 이게 무슨 말이냐 하면, 스타일의 경계가 생긴다는 것이다. 즉, 내가 원하는 경계 내에서만 적용을 할 수 있다는 것이다. Shadow DOM 내의 CSS 스타일들은 Shadow Root로 범위가 지정이 되어, 스타일이 캡슐화된다! 예제를 보면 브라우저가 Shadow DOM을 지원한다면 "Shadow DOM"을 볼 수 있다. 위의 결과를 통해 2가지 사실을 알 수 있다.이 페이지 내에 다른 h3들이 있지만 단 하나만이.. 이전 1 2 3 다음
