본문 바로가기

Front-End

(26)
[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들이 있지만 단 하나만이..
문서 스크립팅 클라이언트 자바스크립트의 주 역할은 정적인 HTML 문서를 동적으로 작용할 수 있게 해주는 것이다. 이렇게 웹 페이지의 내용을 제어하는 것이 주 역할이다. Window객체에는 Document 객체를 참조하는 document 프로퍼티가 존재한다. 이 프로퍼티는 해당 창의 내용 정보를 가지고 있다. 즉, 문서 내용을 나타내고 조작하는 중요한 역할을 하는 객체이다. DOM API의 일부이다.( 이게 뭔 소리여?? ) DOM 개요 Document Object Model, 즉 DOM은 HTML과 XML 문서의 내용을 조작할 수 있는 API이다. HTML의 요소 집합(태그) 들이 DOM에서는 객체의 계증 구조로 표현된다. HTML이 DOM 객체로 된 그림이다. 최상단에는 문서 전체를 나타내는 Document 객체가..
Section 5:Object-Oriented Javascript and Prototypal Inheritance Prototype classical vs prototypal inheritance classical 상속이 내가 알고 있는 java에서 사용하는 것이다. 하지만 prototypal 상속에 비해 복잡하다고 하는데 비교를 해보자. Prototype이란? 예제를 먼저 살펴보자. console에 무엇이 나올까?Default ? John ? 무엇이 나올까? 답을 살펴보기 전에 john object가 메모리에 어떻게 할당되어 있는지 살펴보자 john - property( firstName, lastName ) -> person - property ( firstName, lastName, getFullName() ) 이런 식으로 할당이 되어 있다. ->는 prototype chain을 나타낸다.firstName을 찾..
Section4 : Objects and Functions JSON JSON vs XML? - XML은 prop 열고 닫고 하는 것 때문에 string 낭비 - 보기에도 json이 더 보기 좋음
Section3 : Types and Operators Types - 자바스크립트에서 타입을 정하지 않고 할당하는거 실화야? var test="str"; test=1javascript engine 실행시점에 알아서 할당을 해준다. ( 그럼 string, number 타입 상관없이 메모리 크기는 똑같이 할당하는건가? 위의 상황에서 )primitive types 1) undefined 2) null 3) boolean 4) number 5) string 6) symbol ( es6에서 나옴, 다음 글에서 소개 ) 비교 연산자== : value만 비교=== : type과 value 비교 ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness ) Defaul..