본문 바로가기

프로그래밍(TA, AA)/자바스크립트

(28)
[자바스크립트] ExtJS MVC 아키텍처 대형 웹 클라이언트 애플리케이션은 항상 작성, 조직화 그리고 유지보수에도 어려움을 겪게됩니다. 대형 웹 애플케이션은 더많은 기능과 개발자들이 추가될때 순식간에 컨트롤할 수 있는 범위를 벗어나기도 합니다. 새로운 어프리케이션 아키텍처를 포함한 Ext JS 4는 코드를 조직화할 수 있을 뿐만 아니라 프로그래머의 작성 코드량도 감소 시켜줍니다. ExtJS4의 애플리케이션 아키텍처는 Model과 Controller를 포함한 MVC 패턴을 따릅니다. 그것은 이미 존재하는 많은 MVC 아키텍처들과는 약간 다른 형태를 보입니다. Model은 필드와 데이터에 대한 콜렉션입니다. 예를 들면 User Model은 username과 password를 포함하고 있을 것입니다. Model는 데이터 패키지를 통해 자기 자신 객체..
[브라우저엔진] 브라우저 렌더링 엔진 2015년 구글은 크롬의 웹 렌더링 엔진으로 사용하던 WebKit을 대체하는 Blink라는 WebKit에서 파생된 새로운 웬 렌더링 엔진을 사용하기 시작했습니다. WebKit은 웹브라우저 시장의 40% 점유율을 가지는 웹 렌더링 엔진이고, Chrome(28 버전 이전), Safari, Opera(15 버전 이전) 등 많은 웹 브라우저에서 사용했었습니다. 아래는 WebKit과 Blink 및 모질라 재단의 FireFox 브라우저에서 사용하는 Gecko 웹 렌더링 엔진을 분석하고 차이점을 알아보겠습니다. WebKit은 애플이 오픈소스로 개발하고 있는 웹 렌더링 엔진이고, HTML, CSS, JavaScript를 지원하도록 설계되었습니다. WebKit은 웹 애플리케이션을 개발하는 기업이 자체 개발을 해왔고, 대..
[자바스크립트] ES2015(ES6) 알아보기 2 Template javascript 개발에서 Template이라는 개념은 매우 중요합니다. JSON으로 응답을 받고 Javascript Object로 변환하고 어떠한 데이터처리 조작을 한 후에 dom에 추가하는 이 일련의 과정이 결국 UI 개발의 핵심이 되기 때문입니다. Javascript 개발은 데이터 + HTML문자열의 결합이라고 생각할 수 있습니다. 실제 DOM 조작 작업에 많은 로드가 들어가기 때문에 React나 Angular에서는 Virtual DOM과 같은 개념을 도입하여, 템플릿 작업을 프레임단에서 할 수 있게 지원하고 있습니다. 이전에는 Underscore, Handle bar 이런 라이브러리를 활용하여 ES6의 템플릿은 이러한 기능을 일부 포함하고 있습니다. const data = [ {..
[자바스크립트] React 이해하기 react 설명: http://webframeworks.kr/tutorials/react/getting-started/ 출처는 webframeworks.kr 사이트 입니다. 아래는 학습용으로 작성한 포스팅입니다. React 시작하기 이 글을 읽기 시작하시는 분들 중 React가 무엇인지 들어본 사람도 있고, 아닌 사람도 있을 것 같습니다. 이 글에서는 React가 어떤 동기에 의하여 만들어졌고, 어떤 것을 해주는 라이브러리인지, 그리고 어떤 것이 아닌지에 대해 알아볼 것입니다. 일종의 컨텍스트를 제공하는 글이라고 보셔도 될 것 같습니다. 페이스북은 왜 React를 만들었는가 페이스북은 왜 React를 만들었을까요? 이는 React 공식 문서에 간략히 정리되어 있고, (전) React 팀이었던 Pete H..
[자바스크립트] flux 개념 이해하기 flux 설명: https://haruair.github.io/flux/docs/overview.html 출처는 haruair.github.io 사이트 입니다. 아래는 학습용으로 작성한 포스팅입니다. Flux는 Facebook에서 클라이언트-사이드 웹 애플리케이션을 만들기 위해 사용하는 애플리케이션 아키텍처입니다. 단방향 데이터 흐름을 활용해 뷰 컴포넌트를 구성하는 React를 보완하는 역할을 합니다. 이전까지의 프레임워크와는 달리 패턴과 같은 모습을 하고 있기 때문에 수많은 새로운 코드를 작성할 필요없이 바로 Flux를 이용해 사용할 수 있습니다. Flux 애플리케이션은 다음 핵심적인 세가지 부분으로 구성되어 있습니다: Dispatcher, Stores, Views(React 컴포넌트). Model-V..