1. 단방향 바인딩 앞서 데이터 바인딩에 대해 배웠고, 이젠 Vue.js의 데이터 바인딩 기능을 활용하는 방법에 대해 알아보자. Vue.js의 MVVM 구조에서 우리가 작성하는 HTML 코드에 바인딩 변수와 JavaScript 코드를 어떻게 연결 할 수 있는 지 알아보았다. JavaScript 데이터에 연결된 변수를 바꿈에 따라 우리가 보여지는 변수가 변경되는 것을 보았다. 이를 단방향 바인딩이라고 한다. 반대로 우리가 작성하는 HTML input을 변경하여 javaScript를 변경할 수 있다. 이 방식을 양방향 바인딩이라고 한다. 기본적으로 웹 페이지를 두 부분으루 나누게 된다면 위 부분에 HTML로 작성 된 DOM 부분과 아래 부분의 Vue.js로 구성된다. DOM : HTML로 작성 (View)V..
1. Vue.js 2014년 중국인 개발자 Evan You에 의해 새로운 자바스크립트 프레임워크인 Vue.js가 발표된다. Angular와 React는 분명 많은 개발자들의 인기를 끌며 많은 프론트엔드 개발자들의 선호를 받았다. 하지만, 사람들은 여전히 두 언어에 대한 불만이 많았다. 우선 Angular.js의 경우 모든 개발 방식을 Angular화 해야하는 불편함이 있었다. 이는 많은 개발 도구 사용에 제약이 걸릴 뿐만 아니라 프로그램이 무거워지는 불편함이 존재했다. 프론트엔드 개발자들은 좀더 가볍고 범용성이 좀더 큰 개발 방식에 대한 요구사항이 존재핬다. Vue.js는 이러한 배경으로 탄생하게 되었다. Vue.js의 가장 큰 장점은 우리가 흔히 사용하는 개발 도구 들을 자유롭게 쓸 수 있다. 가령 유..
최근에는 Vue.js의 인기가 높아졌지만 기존의 클라이언트사이드 렌더링 방식의 지배자는 Angular.js이다. 따라서, 우린 클라이언트 구축에 필요한 기초 지식들을 Angular.js와 Vue.js를 통해 배워 볼 것이다. 이번 시간에는 Angular,js에서 MVC 패턴이 어떻게 적용 되고 이를 통해 기초적인 클라이언트가 어떻게 만들어지는지 알아보자. 1. Angular.js와 MVC/MVVM 앞서 알아봤듯이 Angular.js로 MVC 패턴의 적용이 가능하다. 그리고 Angular.js에서는 MVVM 패턴도 적용가능하다. - MVVM 패턴 Model-View-ViewModel의 약자로 컨트롤러가 뷰모델로 교체된 형태이다. 기존 모델이 뷰를 위한 뷰모델이 존재하여 뷰를 바인딩 할때 강력한 강점을 보인..
1. 클라이언트 구축이란? 클라이언트 구축이란 우리가 보는 모든 화면이 전부 클라이언트가 된다. 클라이언트 구축을 위해서는 자신이 사용하게 되는 디바이스나 응용 프로그램에 대한 고려가 반드시 필요하다. 같은 플랫폼이어도 서로 다른 디바이스로 볼 수도 있다. 우리는 웹 페이지를 컴퓨터와 모바일 모두 볼 수 있기 때문이다. 그리는 이 중에서도 웹 환경에 기반하여 설명을 할 것이다. 웹은 가장 보편적으로 사용되면서 여전히 많은 사람들에게 각광받고 있는 기술이다. 웹 환경에서 작동하는 클라이언트를 구축하는 것이 우리의 목표다. 웹의 가능성은 무궁무진하다. 최근들어서 웹의 범용성은 더 커지고 있다. 기업에서 사용하는 다양한 포탈이라던지, 웹이 사용되지 않는 부분이 없을 정도로 사이즈가 더..
서버와 클라이언트 기술은 프로그래밍에 있어 가장 근간이 된다. 전세계에 존재하는 거의 모든 프로그램은 서버와 클라이언트가 존재해 네트워크 상에서 데이터를 주고 받기 떄문이다. 프로그램엔 다양한 플랫폼이 생겨났지만 가장 많이 사용하게 되는 환경은 웹이다. 우리가 원하는 서비스를 구현하기 위해 웹을 모르고는 이야기 하기 어렵다. 그리고 이번 시간에는 웹을 구축하기 위해선 클라이언트와 서버를 만들어야 한다. 하나의 건물을 짓기 위해서는 설계도가 반드시 필요하다. 그리고 이 건물 설계를 하는 데 있어 기본적으로 지켜야할 룰이있다. 사람이 들어가야 할 문이라던지, 지하 주차랑이라던지 건물에 필요한 필수 요소라는 것들이 존재한다. 이번 시간에는 이처럼 소프트웨어 설계를 위한 기초적인 패턴에 대해 알아보도록하자. 1..